javascript - Ajax调用MVC后将链接列添加到DataTable

Question

在我的 View 页面上，我有一个表格(来自部分 View )和一个表单。我正在使用 ajax 将表单提交到我的 webapi Controller 。

成功后，我想将文本框中输入的内容添加到第一列，并链接到新行的第二列中的“编辑”和“删除”。

到目前为止，我只处理“编辑”链接。

这是我的部分 View 表:

<table id="Table" class="table table-bordered">
    <thead>
        <tr>
            <th class="col-md-6">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th></th>
        </tr>
    </thead>


    @foreach (var item in Model)
    {
        <tr>
            <td class="col-md-6">
                @Html.DisplayFor(modelItem => item.Admin)
            </td>
            <td class="col-md-6">
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

这是我的表单 jquery.ajax:

var table = $("#Table").DataTable({
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [1] },
        { "bSearchable": false, "aTargets": [1] }
    ]
});

$("form").submit(function(e) {
    e.preventDefault();

    $.ajax({
        url: infoGetUrl,
        method: "post",
        data: $("form").serialize()
    }).success(function (data) {
        var editLink = document.createElement('a');
        editLink.href = "/controllerName/Edit/" + data.id;
        editLink.text = "Edit";

        table.row.add([
            $("#Textbox").val(),
            editLink
        ]).draw();
    }).error(function(jqXHR, textStatus, errorThrown) {
        console.log("error");
    });
});

问题是，当渲染时我得到这个:

它不可点击并呈现如下:

<tr class="even" role="row">
    <td class="sorting_1">John.Doe</td>
    <td>http://localhost:61888/controllerName/Edit/15</td>
</tr>

如您所见，它没有在 a 标记中呈现，并且我不需要链接的 http://localhost:61888 部分。

我该如何解决这个问题？

Answer 1

尝试创建链接:

var link = <a href='/controllerName/Edit/' + data.id>EDIT</a>