Question

我有一个包含用户的Jquery DataTable。它是由我在MVC控制器中对Json结果方法的JQuery AJAX调用生成的，并迭代结果以生成表中的行。现在我需要能够单击该行，并让它使MVC局部视图表单从隐藏变为可见，并使用用户的数据填充表单，该数据将与另一个Json调用一起填充。我的问题是如何将ID值传递给另一个Json方法以检索该用户的数据，然后在填充用户数据时使部分可见。目前，部分视图在主要部分的div中设置，并使用@Html.Partial("TeamMember")

进行调用

DataTable代码

 $(document).ready(function () {
        $.getJSON("TeamData", {Id: 636},
            function (json) {
                var tr;
                for (var i = 0; i < json.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + json[i].Id + "</td>")
                    tr.append("<td>" + json[i].FullName + "</td>");
                    tr.append("<td>" + json[i].Lan_Id + "</td>");
                    tr.append("<td>" + json[i].CurrDept + "</td>");
                    tr.append("<td>" + json[i].Email + "</td>");
                    $('#mTeamTable').append(tr);
                }
                $('#mTeamTable').DataTable();
            });
    });

Answer 1

假设你有这样的HTML视图：

<table id="mTeamTable">
   ...
</table>

<div id="partialView">
    @Html.Partial("TeamMember")
</div>

返回JSON数据的控制器方法如下：

public JsonResult TeamData(string Id)
{
    // query team data
    var member = GetTeamData();

    // return JSON string
    return Json(member, JsonRequestBehavior.AllowGet);
}

然后，您需要配置2个操作：收到JSON数据时＆amp;单击DataTable行以显示部分视图时。以下代码中说明了这两个操作：

$(document).ready(function () {

    // hide partial view div first
    $('#partialView').hide();

    $.getJSON("TeamData", { Id: 636 }, function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
           tr = $('<tr data-id="' + json[i].Id + '"/>');
           tr.append("<td>" + json[i].Id + "</td>");
           tr.append("<td>" + json[i].FullName + "</td>");
           tr.append("<td>" + json[i].Lan_Id + "</td>");
           tr.append("<td>" + json[i].CurrDept + "</td>");
           tr.append("<td>" + json[i].Email + "</td>");
           $('#mTeamTable').append(tr);
        }
        $('#mTeamTable').DataTable();
    });

    // this section just an example to handle row click event
    // if the table contains tbody element, use $('#mTeamTable tbody')
    // see https://datatables.net/examples/advanced_init/events_live.html for row event handling
    $('#mTeamTable').on('click', 'tr', function () {
        var table = $('#mTeamTable').DataTable();
        var data = table.row(this).data();

        // call partial view here
        // use of @Url.Action in url part is recommended
        $.get("TeamMember", { Id: data[0] } , function () {

            // show partial view div
            $('#partialView').show();
        });
    });
});

此外，您可能需要设置一个控制器操作方法，该方法使用viewmodel返回部分视图，如下所示：

public PartialViewResult TeamMember(string Id)
{
    // query team member
    var member = GetTeamMember();

    // put query results on a viewmodel, say it Member
    var teamMember = new Member()
    {
        Id = member.Id,
        FullName = member.FullName,
        ...
        Email = member.Email
    };

    // return partial view with viewmodel properties
    return PartialView("TeamMember", model);
}

也许这远非完美，但至少解释了应该考虑处理数据表行点击事件的关键点。

如何从JQuery表行中填充MVC部分视图表单字段单击

1 个答案: