这个问题有点意思,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!
本文转自博客园张占岭(仓储大叔)的博客,原文链接:将不确定变为确定~Razor视图中是否可以嵌套JS代码,如需转载请自行联系原博主。