html table 按钮单击 jquery 函数时 MVC 视图中不显示响应

Question

我正在开发 asp.net MVC 应用程序。

点击下面的按钮 jQuery 函数被调用。

我得到状态 === "success" 作为响应，所有行都在 .html(response) 中可用，但他的相同数据未显示在 html 所在的视图中已定义（html 只不过是一个模态弹出窗口 window）。

jQuery函数调用：

        var url = '@Url.Action("UserDetails", "CompanyUsage")';
        var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

        $.post(url, data1)
            .done(function (response, status, jqxhr) {

                if (status === "success") {
                    $('#modal .modal-body').html(response);
                    $('#modal').modal('show');
                    $("#exportPopUpUserToExcel").show();

                    $(".multiselect").click(function () {
                        $(".btn-group").toggleClass("open");
                    });

                }
                else {
                    /* your "email doesn't exist" action */
                    var pan = 0;
                }

            })
            .fail(function (jqxhr, status, errorThrown) {
                /* do something when request errors */
            });
    };

    return false;
};

查看：

<div id="modal" class="modal fade">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; width: 1200px;  margin-top: 50px; margin-bottom:50px;left: 0px;">
    <div class="modal-content">
        <div class="modal-header">

        </div>

        <div class="modal-body">
            <p>One fine body&hellip;</p>

            @if (Model.UserList != null)
            {
                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <tr>
                            <th>User ID</th>
                            <th>User Name</th>
                            <th>Company</th>
                            <th>License ID</th>
                            <th>Server ID</th>
                            <th>Start Time</th>
                        </tr>

                        @foreach (var item in Model.UserList)
                        {
                            <tr>
                                <td>
                                    @item.UserID
                                </td>
                                <td>
                                    @item.UserName
                                </td>
                                <td>
                                    @item.Company
                                </td>
                                <td>
                                    @item.LicenseId
                                </td>
                                <td>
                                    @item.ServerID
                                </td>
                                <td>
                                    @item.StartTime
                                </td>
                            </tr>
                        }

                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

我得到以下结果，模态弹出数据为空白。

更新： .html(response) 包含以下数据。

另外，现在我正在使用 tbody 标签而不是 tr 和 th，但得到的空白记录与之前相同。下面是更新后的代码，

    <div class="modal-body">
            <p>One fine body&hellip;</p>
            Hi
            @if (Model.UserList != null)
            {

                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>User Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.UserList)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserId)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserName)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

Answer 1

问题似乎来自这一行：

$('#modal .modal-body').html(response);

根据文档，jQuery.html() 用于将现有的 HTML 内容替换为作为参数传递的 HTML 字符串。因此，它将使用 modal-body CSS class 的所有子 HTML 元素替换为 response 对象数据，包括 table 元素，甚至 response 不包含 HTML 元素。这就是 table 元素在模态弹出窗口中消失的原因。

如果您的 objective 是用 AJAX 响应提供的数据替换 table 中的现有数据，您需要迭代 response 对象，然后创建 <tr> & <td> 每次迭代的行元素，并将每一行附加到 <tbody> 元素，如下例所示：

var url = '@Url.Action("UserDetails", "CompanyUsage")';
var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

$.post(url, data1).done(function (response, status, jqxhr) {
    if (status === "success") {
       // set tbody selector
       var $tbody = $('#tableid tbody');

       // remove previous table entries
       $tbody.empty();

       var row = $('<tr>');
       var cell = $('<td>');

       // iterate the response and create table elements
       $.each(response, function(i, item) {
           row.append(
              cell.text(item.UserId),
              cell.text(item.UserName)
           ).appendTo($tbody);
       });

       // show the modal with table inside
       $('#modal').modal('show');
       $("#exportPopUpUserToExcel").show();

       $(".multiselect").click(function () {
           $(".btn-group").toggleClass("open");
       });

    }
    else {
       /* your "email doesn't exist" action */
       var pan = 0;
    }
})
.fail(function (jqxhr, status, errorThrown) {
    /* do something when request errors */
});

html table 按钮单击 jquery 函数时 MVC 视图中不显示响应

html table response is not displayed in MVC view on button click jquery function

javascript

asp.net

asp.net-mvc

jquery

asp.net-mvc-4