Ajax调用MVC后将链接列添加到DataTable答案

【问题标题】：Add Link Column to DataTable After Ajax Call MVCAjax调用MVC后将链接列添加到DataTable
【发布时间】：2017-12-01 22:14:00
【问题描述】：

在我的视图页面上，我有一个表格（来自部分视图）和一个表单。我正在使用 ajax 将表单提交到我的 webapi 控制器。

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

目前我只处理编辑链接。

这是我的局部视图表：

<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 部分。

我该如何解决这个问题？

【问题讨论】：

尝试将链接创建为var link = <a href='/controllerName/Edit/' + data.id>EDIT</a>
@shantaram_t 有效。谢谢。发布为答案，我会接受
很高兴听到它有帮助...

标签： javascript jquery ajax asp.net-mvc-5 datatables

【解决方案1】：

使用纯 JS：

var link = document.createElement('a'); 
link.textContent = 'Edit';
link.href = "/controllerName/Edit/" + data.id;

你只需要把它放在你的 td. 如果你想删除'http://localhost:61888'，你可以使用replace通过非空字符串来改变你的本地主机。或者拆分你的字符串，只保留第二部分

【讨论】：

【解决方案2】：

尝试创建链接为：

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

【讨论】：