1. 程式人生 > >asp.net cshtml頁面使用Razor後臺代碼動態產生頁面——函數實現

asp.net cshtml頁面使用Razor後臺代碼動態產生頁面——函數實現

網頁加載 行數 及其 let 使用遞歸 strong hidden html con

在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 OrganizationList<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的函數實現方式。

asp.net cshtml頁面使用Razor後臺代碼動態產生頁面——函數實現