将不确定变为确定~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!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:将不确定变为确定~Razor视图中是否可以嵌套JS代码,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
32 0
|
2月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
13 0
|
1天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
7 3
|
10天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
17天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
18天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0
|
24天前
|
JavaScript
js校验统一社会信用代码
js校验统一社会信用代码
27 0
|
27天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
50 4
|
1月前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?