將不確定變為確定~Razor視圖中是否可以嵌套JS代碼

回到目錄

這個問題有點意思，Razor的自動閉合性，導致JS代碼不能直接與Razor代碼混排，原來ASPX頁面中，我們到處可見這種代碼

  <%
           if(Model!=null){
           foreach (var item in Model.Res_ResourceProperty_Ext.GroupBy(i => i.PlatformID))
            {
              string vidArr="";
              string vidNameArr="";
              foreach (var sub in item)
               {
                vidArr+=sub+",";
                vidNameArr+=(new Service.EEE114.Common_BasePropValueService().GetCommon_BasePropValueByID(sub.VID ?? 0)!=null?new Service.EEE114.Common_BasePropValueService().GetCommon_BasePropValueByID(sub.VID ?? 0).Name:"")+",";
               }
           %>
            var source = html.replace(reg, function (node, key) {
                return {
                    'Platform_SubValValue': '<%=item.Key %>',
                    'Platform_SubValID': 'Platform_SubVal' + '<%=item.Key %>',
                    'platform': '<%=((Platform)item.Key).GetDescription()%>',
                    'VIDValue': '<%=vidArr %>',
                    'VIDDisplayName': '<%=vidNameArr %>'
                }[key];
            });
            $("#selection").append(source);
            <%} 
             }%>

而如果是Razor頁面，這種寫法，顯然是行不通的，因為JS變量直接混在了Razor塊中，使得系統無法辨認JS，事實上，我們在razor中，可以加入<script>塊

來解決這個問題，上面的代碼在Razor視圖中，可以類似於這樣

@if (Model != null)
{
    foreach (var item in Model.WebManageRoles.GroupBy(i => i.DepartmentID))
    {

        foreach (var sub in item)
        {
    <script type="text/javascript">
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分別用於指定區分大小寫的匹配、全局匹配和多行匹配。
        var html = document.getElementById("commentTemplate").innerHTML;
        var source = html.replace(reg, function (node, key) {
            return {
                'Platform_SubValValue': '@item.Key',
                'Platform_SubValID': 'Role' + '@item.Key',
                'platform': '@item.Key',
                'VIDValue': '@sub.ManageRoleID',
                'VIDDisplayName': '@sub.RoleName'
            }[key];
        });
        $("#Selection").append(source);
    </script>
        }
    }
}

這種代碼，我們感覺比ASPX里的排版更加清晰了，呵呵！

感謝Razor!

回到目錄