如何将Kendo MVC网格列模板分离至独立文件并传递参数？

步骤1：提取模板到独立文件 #

新建ActionPanelTemplate.html文件，将原index.cshtml中<script id="meterGrid_ActionPanel" type="text/html">内的模板内容迁移至此，用Kendo模板语法直接引用参数：

<div class="action-buttons">
  <button class="btn-view" data-id="#= Id #">查看</button>
  <button class="btn-edit" data-status="#= Status #" data-code="#= MeterCode #">编辑</button>
  <!-- 其余依赖参数的内容均用#= 属性名 # 直接引用 -->
</div>

步骤2：页面初始化时预加载模板 #

在index.cshtml的页面脚本中，一次性请求模板文件并缓存编译后的Kendo模板，避免重复请求：

// 全局缓存编译后的模板
let compiledActionPanelTemplate;

$(function() {
  // 页面加载时仅发起一次请求获取模板
  $.get('/Templates/ActionPanelTemplate.html', function(templateHtml) {
    compiledActionPanelTemplate = kendo.template(templateHtml);
  });
});

注意：确保模板文件路径正确，ASP.NET项目需配置静态文件访问权限（比如ASP.NET Core中在Program.cs添加app.UseStaticFiles()）。

步骤3：修改getActionPanel函数调用缓存模板 #

调整原函数逻辑，直接使用预编译的模板渲染内容，参数传递完全保留：

function getActionPanel(data) {
  // 防止模板未加载完成时返回空内容
  if (!compiledActionPanelTemplate) return '<span>加载中...</span>';
  // 传入完整data对象，模板自动解析内部属性
  return compiledActionPanelTemplate(data);
}

步骤4：网格ClientTemplate保持原有调用 #

Kendo MVC网格列的ClientTemplate无需修改，仍沿用原调用方式：

columns.Bound(p => p.Id).ClientTemplate("#= getActionPanel(data) #");

核心优势 #

• 仅发起单次服务端请求加载模板，彻底避免28000行网格触发批量请求的性能问题
• 完全兼容原有11-12个属性的参数传递，模板内直接通过#= 属性名 #访问data对象的所有字段
• 实现代码解耦，模板内容单独维护，页面代码更简洁

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