Есть ли правильный способ использования HtmlHelper в функции JavaScript?

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 с (моя реализация Image для ActionLink).Я не хочу возвращать HTML-код в ответе JSON от контроллера, потому что это ненужные накладные расходы.

Есть ли какой-нибудь хороший способ создать эти ссылки действий на лету?В настоящее время, чтобы заставить его работать, у меня есть этот невероятно неприятный метод:

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, который представляет идентификатор для редактирования.

Я знаю, что это плохо и сломается, как только в контроллере или действии будет 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.(Окружается символом "

", потому что html () захватывает только внутренний HTML.)