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

Question

I am working on asp.net MVC application.

On button click below jQuery function gets called.

I get status === "success" and in response all rows are available in the .html(response) but he same data not showing in the view where html is defined (html is nothing but an modal pop up window).

jQuery function call:

        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;
};

View :

<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>

I get the below resut with modal pop up data as blank body.

Update: .html(response) contains the following data.

Also now I am using tbody tag instead of tr and th but getting the blank record same as previous. Below is the updated code,

    <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

The problem seem coming from this line:

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

According to the documentation, jQuery.html() used to replace existing HTML content with HTML string passed as its argument. Hence, it replaces all child HTML elements which uses modal-body CSS class with response object data including the table element, even response doesn't contain HTML elements. That's the reason why the table element disappear inside modal popup.

If your objective is to replace existing data inside table with data provided from AJAX response, you need to iterate response object, then create <tr> & <td> row elements for each iteration, and append each row to <tbody> element as provided in example below:

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 */
});

Related issues:

Using jQuery to build table rows from Ajax response (Json)

Convert JSON array to an HTML table in jQuery