如何实现引用Model属性的jQuery函数全站复用？

这问题我之前踩过坑，核心原因很明确：纯.js文件是在客户端浏览器执行的，根本没法直接读取服务器端Razor视图里的@Model数据——毕竟Razor是服务器渲染页面时才解析，JS文件加载时早就没服务器什么事了。给你几个实用的方案，都能实现「一次编写全站复用」的目标：

方案1：通过页面全局变量/数据属性传递Model值（最推荐） #

这个方法简单高效，不会污染太多环境，还能完美兼容现有逻辑：

1. 在_Layout.cshtml里传递数据
   先把需要的OfficeID通过ViewBag（或者ViewData）传递到布局页，然后把它存到页面的全局变量或者HTML元素的data属性里：

   <!-- 方法A：用全局变量（简单直接） -->
   <head>
       <!-- 一定要在引用通用JS之前定义这个变量 -->
       <script>
           window.AppConfig = {
               officeID: '@ViewBag.OfficeID'
           };
       </script>
       <script src="/js/common.js"></script> <!-- 你的通用JS文件 -->
   </head>
   
   <!-- 方法B：用HTML data属性（更符合前端规范，不污染全局） -->
   <body data-office-id="@ViewBag.OfficeID">
       <!-- 页面内容 -->
   </body>
   

   注：如果每个页面的OfficeID来自各自的Model，你可以在BaseController里统一设置ViewBag.OfficeID = 当前用户/页面的OfficeID，这样所有继承BaseController的页面都会自动把值传递给Layout，不用每个页面单独写。

2. 在通用JS文件里读取数据
   对应上面的两种方法，在common.js里这样获取值：

   // 对应方法A：读取全局变量
   const officeId = window.AppConfig.officeID;
   
   // 对应方法B：读取data属性
   const officeId = document.body.dataset.officeId;
   
   // 接下来就可以用officeId执行你的jQuery逻辑了
   $(function() {
       // 示例逻辑：根据OfficeID加载数据
       $.get(`/api/data?officeId=${officeId}`, function(res) {
           // 处理返回结果
       });
   });
   

方案2：用Razor渲染动态JS文件 #

如果你的JS逻辑里需要大量服务器端数据，也可以把JS文件改成Razor视图，让服务器动态渲染：

1. 创建Razor版的JS文件
   在Views/Shared目录下新建CommonJs.cshtml，内容可以直接用Razor语法：

   $(function() {
       const officeId = '@ViewBag.OfficeID';
       // 你的jQuery逻辑，直接用officeId即可
   });
   

2. 在Controller里添加返回这个视图的Action
   比如在HomeController里写：

   public ActionResult CommonJs()
   {
       // 这里统一获取OfficeID的逻辑，比如从Session、用户Claims或者路由里取
       ViewBag.OfficeID = User.FindFirst("OfficeID")?.Value;
       // 设置响应类型为JS
       Response.ContentType = "application/javascript";
       return View();
   }
   

3. 在_Layout.cshtml里引用这个Action

   <script src="@Url.Action("CommonJs", "Home")"></script>
   

   注意：这个方案的缺点是JS内容会动态生成，浏览器没法缓存，所以如果JS逻辑很大，可能影响加载速度，适合小体量的脚本。

方案3：封装成初始化函数，在Layout里统一调用 #

把需要动态数据的逻辑封装成一个函数，然后在Layout里统一传入参数：

1. 在通用JS里封装函数

   // common.js
   window.initOfficeRelatedLogic = function(officeId) {
       // 这里写你的jQuery逻辑，officeId作为参数传入
       $(function() {
           // 示例：初始化表格
           $('#office-table').DataTable({
               ajax: `/api/office/${officeId}/data`
           });
       });
   };
   

2. 在_Layout.cshtml里调用函数

   <script src="/js/common.js"></script>
   <script>
       // 页面加载完成后调用初始化函数，传入OfficeID
       $(function() {
           window.initOfficeRelatedLogic('@ViewBag.OfficeID');
       });
   </script>
   

   同样，ViewBag.OfficeID可以在BaseController里统一设置，不用每个页面单独处理。

总结 #

优先选方案1，它兼顾了简洁性和性能，还符合前端最佳实践。只要在BaseController里统一处理OfficeID的传递，就能实现「一次编写，全站复用」的目标，完全不用在每个页面重复代码。

内容的提问来源于stack exchange，提问作者coolhand