asp.net cshtml页面使用Razor后台代码动态产生页面——函数实现

在asp.net的MVC框架的Razor页面中——也就是常用的cshtml页面中——提供了在前台HTML、Javascript代码中使用后台代码的框架。下面是Razor的简介：

Razor 是一种允许您向网页中嵌入基于服务器的代码（Visual Basic 和 C#）的标记语法。

当网页被写入浏览器时，基于服务器的代码能够创建动态内容。在网页加载时，服务器在向浏览器返回页面之前，会执行页面内的基于服务器代码。由于是在服务器上运行，这种代码能执行复杂的任务，比如访问数据库。

该框架的一大特点就是如PHP等能够动态的产生页面代码，从而屏蔽对应逻辑。此外，Razor在table、ul等需要循环产生的页面元素中，尤其是当需要根据返回数据的数量产生对应数量的相同样式的页面元素时，使用Razor相对于使用JS的append方法向页面添加元素要简便的多。当然，JS的append方法也有其优势，如使用Ajax进行数据获取并延迟加载时就需要使用append方法进行页面重载。

Razor页面通过@{}进行标记，从而告诉服务器需要按照对应Razor后台代码解析方法对括号内的后台代码进行处理。

回到本文的主题，本文主要记录在Razor页面中如何进行后台代码的函数实现。

背景介绍：在MVC的前台页面中，可能会出现树形结构数据等复杂类型数据需要进行递归处理、代码逻辑重复严重可抽离为函数方法以及其他复杂情形时，简单的Razor后台代码不能够满足需求，此时就需要编写函数进行递归调用。

Razor函数实现与示例：

1. 业务需求： 对层级结构的组织机构信息进行页面展示； 2. 解决方案： 利用Razor递归进行树形结构数据解析，并产生对应页面。

@helper OrganizationHelper(IEnumerable<OrganizationTreeModel> organizations, int depth=0)
{
List<Organization_Managers> managers = ViewBag.OrganizationManagers;
foreach (var organization in organizations)
{
var canEdit = ViewBag.CanEdit;@*是否可编辑权限*@
<tr class="@("depth" + depth) @(depth > 0 ? "childtr" : "")" parentId="@(organization.Organization.ParentId)" thisid="@(organization.Organization.Id)" childCount="@(organization.Subordinates.Count)">
@if (canEdit)
{
<td>
@if (organization.Organization.ParentId > 0)
{
<s class="line" style="margin-left:@(30 * (depth))px">@(organization.Subordinates.Count > 0 ? "└───" : "├─── ")</s>
}
else
{
<s class="line" style="margin-left:@(30 * (depth))px"></s>
}
<span class="@("depth" + depth) @(organization.Subordinates.Count > 0 ? "glyphicon glyphicon-minus-sign" : "")" id="@(organization.Organization.Id)"></span>
<input class="hidden_id" type="hidden" value="@organization.Organization.Id">
<input class="hidden_original_name" type="hidden" value="@organization.Organization.OrganizationName"/>
<input class="text-name input-no-sp-name" type="text" value="@organization.Organization.OrganizationName">
</td>
<td style="text-align:center; word-break:break-all; width:300px">
@{
string userNames = string.Join(",", managers.Where(m => m.OrganizationId == organization.Organization.Id).Select(m => m.ManagerName).ToArray());
<span> @userNames</span>
}
</td>
<td class="td-operate">
<span class="btn-a">
<a class="addOrganization" parentid="@(organization.Organization.Id)">新增下级</a>
<a class="delete-classify">删除</a>
</span>
</td>
}
else
{
<td>
@if (organization.Organization.ParentId > 0)
{
<s class="line" style="margin-left:@(30 * (depth))px">@(organization.Subordinates.Count > 0 ? "└───" : "├─── ")</s>
}
else
{
<s class="line" style="margin-left:@(30 * (depth))px"></s>
}
<span class="@("depth" + depth) @(organization.Subordinates.Count > 0 ? "glyphicon glyphicon-minus-sign" : "")" id="@(organization.Organization.Id)">@(organization.Organization.OrganizationName)</span>
</td>
<td style="text-align:center; word-break:break-all; width:300px">
@{
string userNames = string.Join(",", managers.Where(m => m.OrganizationId == organization.Organization.Id).Select(m => m.ManagerName).ToArray());
<span> @userNames</span>
}
</td>
<td class="td-operate">

</td>
}
</tr>
if (organization.Subordinates.Count > 0)
{
@OrganizationHelper(organization.Subordinates, depth + 1);
}
}
}

在上面的例子中，OrganizationTreeModel是由OrganizationInfo Organization和List<OrganizationTreeModel> Subordinates构成的树形层级数据。在对该数据进行页面展示时，由于树形数据的层级深度未知，因此需要递归或迭代的进行数据解析，这里我们使用递归进行解决。

注意项：

　　1. Razor使用@helper 进行函数标记，因此在编写函数时不要忘记使用@helper 。

　　2. helper函数在调用时必须有@符合，如例子中的@OrganizationHelper(organization.Subordinates, depth + 1);否则将不执行函数体内逻辑代码。

　　3. helper函数多用于页面元素的生成，如果希望函数如有return返回值需要使用@functions { }进行编程。在@functions{ }的跨号内可以如常用的函数编程方式编写函数，如:

@functions
{
public static bool isEqual(string a, string b)
{
return string.Equals(a, b);
}
}

　　博文http://www.cnblogs.com/jiagoushi/p/3904995.html很详细的介绍了@functions{}方式的函数实现。

　　由于在大部分Razor页面后台代码中往往进行的都是相对简单的页面元素动态生成，因此本文重点介绍@helper的函数实现方式。