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

標籤：部分   minus   通過   edit   str   mvc   static   select   .com   

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

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