jquery - 是否有在 JavaScript 函数中使用 HtmlHelper 的正确方法？

Question

我正在编写一个 jQuery 网格插件，我对其进行了设计，使其可以独立于所使用的语言工作。以下是我的插件分配方式的基础知识:

$("#grid").grid({
    enablePager: true,
    dataPath: "Movement/GetGridPage",
    columns: {
        Edit: { title: "", cellCallback: editButtonCallBack, width:"16px" },
        DocketNumber: { title: "Docket #" },
        SiteName: { title: "Site" },
        SiteAddress: { title: "Address" },
        SiteRegion: { title: "Region" },
    },
    cssTable: "table",
    cssAltRow: "altRow"
});

因为我想执行一些更高级的数据处理，而不仅仅是填充 <td>对于一些文本，我添加了一个回调处理程序( cellCallback )，它允许我为特定列数据提供页面特定的函数。因此，在我的插件中，我执行以下操作:

var dataItem = currentRow[columnName];
if (columnSetting.cellCallback) {
    $td.html(columnSetting.cellCallback(dataItem));
}
else {
    $td.html(dataItem);
}

我遇到的问题是我的编辑列需要包含一些 ImageActionLink s(我的 Image 实现 ActionLink )。我不想在 Controller 的 JSON 响应中返回 HTML，因为这是不必要的开销。

有什么好的方法可以动态创建这些操作链接吗？目前，为了让它工作，我有一个令人难以置信的令人讨厌的方法:

function editButtonCallBack(data)
{
    var link = '<%= Html.ImageActionLink("Movement", "Edit", new { id = "X" }, 
        Url.Content("~/Content/Icons/Edit.png"), "Edit", null, null) %>';
    return link.replace("X", data);
}

因此，在每次回调中，我只需查找并替换 X与 data代表要编辑的 ID。

我知道这是不好，一旦 Controller 或操作中有一个X就会崩溃。那么我怎样才能正确地做到这一点呢？

Answer 1

关于:

function editButtonCallBack(data)
{
    var link = '<%= Html.ImageActionLink("Movement", "Edit", null, 
        Url.Content("~/Content/Icons/Edit.png"), "Edit", null, null) %>';

    var element = $('<div>' + link + '</div>');
    element.find('a').attr('id', data)
    return element.html();
}

这至少会对该特定属性而不是整个 HTML block 执行替换。 (用“

”包围，因为 html() 仅获取 内部 HTML。)