Question

在我的视图页面上，我有一个表格（从局部视图）和表格。我正在使用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部分。

我该如何解决这个问题？

Answer 1

尝试创建链接为：

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

Answer 2

使用pur JS：

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

你只需将它放在你的td里面。如果要删除“http://localhost:61888”，可以使用replace来通过un empty string更改localhost。或拆分你的字符串，然后保留第二部分

在Ajax调用MVC之后将链接列添加到DataTable

2 个答案: