我想知道如何刷新模式并在使用 Ajax 调用更新数据后显示它

Question

如何在不刷新所有页面的情况下将 ajax 响应 html 放入模式内部？

$.ajax({
  type: "Post",
  url: '@Url.Action("ModifierPM", "Mode")',
  data: data,
  contentType: false,
  processData: false,
  success: function (response) {
     
     $("#modalModifPM").modal('hide');
     // i want to show reaponse data in this Modal
     // within not refresh all the page, just the MODAL will be updated and appeared
     $("#modalTMRs").modal('show');
    }
});

Answer 1

如果您的回复来自分部视图结果（也就是说，您的回复是 html 文本），您可以将所有回复放入模态正文中；

$.ajax({
  type: "Post",
  url: '@Url.Action("ModifierPM", "Mode")',
  data: data,
  contentType: false,
  processData: false,
  success: function (response) {
       $("#modalModifPM").modal('hide');
       // this line finds the modal body in two step and puts the response data inside of it
       $("#modalTMRs").find(".modal-body").html(response);
       $("#modalTMRs").modal('show');
    }
});

正如您在评论栏中看到的，有更多更好的方法可以找到模态正文。例如;

$("#modalTMRs .modal-body").html(response); // one space between parent and child

另一种方式是直接在modal body中写一个iddiv，通过id查找；如果你的模式 html 如下所示；

<div id="modalTMRs" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" id="modalTMRs-modal-body">  THATS THE ID
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>

那么一步到位;

$("#modalTMRs-modal-body").html(response);

示例可以更多.. :P

如果您的响应只是 Json 列表，那么您可以将其转换为 table 客户端；

 var exampleJsonResult = [
    { "id":1, "name":"test1", "statu":"OK" },
    { "id":2, "name":"test2", "statu":"OK" },
    { "id":3, "name":"test3", "statu":"OK" },
 ];

结果函数可以是这样的；

 function makeTable(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable += "<tr>";
      htmlTable += "<td>" + item.id + "</td>";
      htmlTable += "<td>" + item.name + "</td>";
      htmlTable += "<td>" + item.statu + "</td>";
      htmlTable += "</tr>";
    });
    htmlTable += "</table>";
    return htmlTable;
 }

当您将结果数据发送到此函数时，这会给您一个 table。下一步，将 table 附加到任何你想要的地方，就像上面解释的那样。

在此示例中，您必须了解数据模型并按名称调用值。

如果你想做更有弹性的tablemaker，你必须这样改变响应模型；

 var exampleJsonResult2 = [
    [ 1, "test1", "OK", 234.2 ],
    [ 2, "test2", "NO", 345.6 ],
    [ 3, "test3", "OK", 456.7 ],
    [ 4, "test4", "NO", 678.9 ],
 ];

这个json是一个list of list，由每个item做成一个object list。优点是这种模式；您可以通过循环进行迭代，无需知道属性个名称。

 function makeTable2(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable += "<tr>";
      item.forEach(prop => htmlTable += "<td>" + prop + "</td>");
      htmlTable += "</tr>";
    });
    htmlTable += "</table>";
    return htmlTable;
 }

makeTable2(exampleJsonResult2) 是 table 字符串！

我想知道如何刷新模式并在使用 Ajax 调用更新数据后显示它

I want to know how i can refresh a modal and display it after update data with Ajax call

javascript

c#

ajax

jquery

modal-dialog