如何从Datatables Row详细信息中使用服务器JSON？

Question

我的View项目ASP MVC中有一个表

@foreach (var items in Model)
        {
            <tr>
                <th>
                    <input type="button" value="Assign" onclick="AssignButtonClicked(this)"
                           data-assigned-id="@items.ADUsersId" /> 
                </th>
                <th>@Html.DisplayFor(modelItem => items.DisplayName)</th>
                <th>@Html.DisplayFor(modelItem => items.Company)</th>
                <th>@Html.DisplayFor(modelItem => items.Department)</th>
                <th>@Html.DisplayFor(modelItem => items.TelephoneNumber)</th>

            </tr>
        }

在第一篇文章中，我将Id传递给函数JS

 function AssignButtonClicked(elem) {
            var id = $(elem).data('assigned-id');
            $.ajax({
                url: '@Url.Action("Details", "Users")',
                type: 'post',
                //cache: false,
                //async: true,
                //data: { id: id }
                data: { id:id }, // OR data: {id:1} => nothing work
                dataType: "json",
                success: function (data) {
                    alert(JSON.stringify(data));
                },
                error: function (xhr) {
                    alert('error');
                }
            })
            };

一切正常，我得到了JSON数据

现在，我如何使用Json数据在Datatable中创建详细信息行？ ODR-use

Answer 1

您可以使用一点jQuery来显示记录的详细信息。这是一个完整的示例，希望它可以帮助您：

<强>控制器：

public class UsersController : Controller
{
    public ActionResult Index()
    {
        var u1 = new User { ADUsersId = 1, DisplayName = "User 1", Company = "Company 1" };
        var u2 = new User { ADUsersId = 2, DisplayName = "User 2", Company = "Company 2" };
        var u3 = new User { ADUsersId = 3, DisplayName = "User 3", Company = "Company 3" };

        var users = new List<User> { u1, u2, u3 };

        return View(users);
    }

    [HttpPost]
    public JsonResult Details(int id)
    {
        //Write your query to fetch the details of the user(mine is hardcoded for simplicity)
        return Json(new {UserSurname="Surname " + id,UserNickName="Nickname " + id }, JsonRequestBehavior.AllowGet);
    }
}

public class User
{
    public int ADUsersId { get; set; }
    public string DisplayName { get; set; }
    public string Company { get; set; }
}

查看：

@model IEnumerable<WebApplication7.Controllers.User>

@{
    ViewBag.Title = "Index";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<style type="text/css">
    .detail{
        border: 2px solid red;
    }
</style>
<script type="text/javascript">

    $('body').on('click', 'tr.detail', function () {
        if(confirm("Are you sure you want to close the detail record?"))
        {
            $(this).remove();
        }
    });

    function RemoveDetail(){
        $('.table tr').each(function () {
            var tr = $(this);
            var isDetail = $(tr).hasClass("detail");
            if (isDetail)
                $(tr).remove();
        });
    }

    function AssignButtonClicked(elem) {
        var id = $(elem).data('assigned-id');
        $.ajax({
            url: '@Url.Action("Details", "Users")',
            type: 'post',
            data: { id: id },
            dataType: "json",
            success: function (data) {
                debugger;
                alert(JSON.stringify(data));

                RemoveDetail();

                var detailRow = "<tr class='detail'><td colspan='3'>Surname - " + data.UserSurname + "<br />Nickanme - " + data.UserNickName + "</td></tr>"
                var currentRow = $(elem).parent().parent();
                $(detailRow).insertAfter(currentRow);     
            },
            error: function (xhr) {
                alert('error');
            }
        });
    };
</script>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DisplayName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Company)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.DisplayName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Company)
        </td>
        <td>
            <input type="button" value="Assign" onclick="AssignButtonClicked(this)" data-assigned-id="@item.ADUsersId" /> 
        </td>
    </tr>
}
</table>

<强>输出：