html表响应未显示在按钮单击jquery函数的MVC视图中
Posted
技术标签:
【中文标题】html表响应未显示在按钮单击jquery函数的MVC视图中【英文标题】：html table response is not displayed in MVC view on button click jquery function 【发布时间】：2019-07-12 13:33:34 【问题描述】：我正在开发 asp.net MVC 应用程序。
点击下面的按钮 jQuery 函数被调用。
我得到状态 === “成功”，作为响应，所有行都在 .html(response) 中可用，但相同的数据没有显示在定义 html 的视图中（html 只不过是一个模态弹出窗口） .
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…</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…</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>
【问题讨论】：
尝试检查response对象内的AJAX调用返回的字符串，是否包含<tr>和<td>标签来形成表格数据？还要检查控制台中可能出现的错误。
@TetsuyaYamamoto 响应对象不包含 $('#modal .modal-body').html(response) 替换具有modal-body CSS 类的元素内的现有内容（表格元素也被清除）。如果您只想更新表格内容，请放置 <tbody> 并将其用作选择器。 response有什么样的数据？
@TetsuyaYamamoto 感谢您的解释。我尝试使用 标记而不是 tr 和 th，但得到的空白记录与之前的相同。我已经用 tbody 的新视图代码更新了主帖子。并且还提到了响应数据快照。
问题似乎来自这一行：
$('#modal .modal-body').html(response);
根据文档，jQuery.html() 用于将现有的 HTML 内容替换为作为其参数传递的 HTML 字符串。因此，它将所有使用 modal-body CSS 类的子 HTML 元素替换为 response 对象数据，包括 table 元素，即使 response 不包含 HTML 元素。这就是表格元素在模态弹出窗口中消失的原因。
如果您的目标是用 AJAX 响应提供的数据替换表中的现有数据，则需要迭代 response 对象，然后为每次迭代创建 <tr> 和 <td> 行元素，并将每一行附加到 @ 987654332@ 元素如下例所示：
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 */
);
相关问题：
Using jQuery to build table rows from Ajax response (Json)
Convert JSON array to an HTML table in jQuery
【讨论】：
感谢您的详细解释。我解决了这个问题。这很有帮助。以上是关于html表响应未显示在按钮单击jquery函数的MVC视图中的主要内容，如果未能解决你的问题，请参考以下文章
jquery 事件按钮显示正确的响应，但视图未在 django 中正确呈现
单击提交按钮后，PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div
SPFx JQuery Dialog 按钮单击未找到公共功能
单击提交按钮后，jQuery选择器未显示复选框的选定值，我收到错误[object Object]