如何从 Kendo.Grid 的 ClientTemplate 内部向 JavaScript 函数发送参数？

Posted 2023-05-07

【中文标题】如何从 Kendo.Grid 的 ClientTemplate 内部向 JavaScript 函数发送参数？

【英文标题】：How to send parameters to JavaScript function from inside of a ClientTemplate of a Kendo.Grid?

【发布时间】：2020-11-17 23:36:48

【问题描述】：

我的视图有一个带有 ClientTemplate 的 Kendo Grid，按以下方式为列定义：

.ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail'  onclick='showDetails(this)'><span class='k-icon k-i-file-txt'></span></button>#=data.TicketId#");

以上代码调用javascript函数showDetails

此功能与剑道网格在同一视图中定义：

function showDetails(e) 
    var grid = $("#VarianceTicket").data("kendoGrid");
    var row = $(e).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var item = grid.dataItem(row);
    var ticketDetailsUrl = "@Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new  id = "data" ), Request.Url.Scheme)".replace("data", item.TicketId);
    var newURL = ticketDetailsUrl;
    window.open(newURL, '_blank');

现在，我需要将该函数移动到一个通用的 Site.js 文件中。

当我这样做时，函数中的以下行不正确：

var ticketDetailsUrl = "@Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new  id = "data" ), Request.Url.Scheme)".replace("data", item.TicketId);

看起来是这样的：

基本上，如我所见，它无法构建@Url.Action 字符串。

我应该怎么做才能确保它有效？

【参考方案1】：

您可以更改 showDetails 方法以接受 url 作为参数，并更新您的 ClientTemplate 以使用 @Url.Action 传递该参数。像这样：

ShowDetails 方法：

function showDetails(e, url) 
    var grid = $("#VarianceTicket").data("kendoGrid");
    var row = $(e).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var item = grid.dataItem(row);
    var ticketDetailsUrl = url;
    var newURL = ticketDetailsUrl;
    window.open(newURL, '_blank');

ClientTemplate（使用字符串连接并添加空行以提高可读性，格式可能需要调整，我现在无法在本地测试）：

.ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail'  onclick='showDetails(this, " + 

Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new  id = "data" ), Request.Url.Scheme)".replace("data", #=data.TicketId#) +

")'><span class='k-icon k-i-file-txt'></span></button>#=data.TicketId#");

---

我已将 ClientTemplate 更改为以下逻辑： .ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail' onclick='showDetails(this, " + Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new id = "data" ), Request.Url.Scheme) + ")'><span class='k-icon k-i-file-txt'></span></button>#=data.TicketId#");

我将替换 showDetails 函数内的 data 部分

【讨论】：

得到 JavaScript 错误 Uncaught SyntaxError: missing ) after argument list

就像我说的格式可能需要调整。 :) 我看到您的编辑，您提到您将替换 showDetails 函数内的数据部分。为什么不直接将 id 设置为模板中的正确 ID？像这样：new id = #=data.TicketId#

这样做很有意义。谢谢

如果我只是将TicketID 作为参数传递给函数，并且函数内部会将票证ID附加到url：showDetails("#=data.TicketId#")

您可以这样做，但是当您将 id 附加到 javascript 函数中的 url 时，您将无法使用 Url.Action 来帮助构建该 URL（假设您正在使用一个独立的js文件）