我想知道如何在使用Ajax呼叫更新資料后重繪模式并顯示它-有解無憂

/ $.ajax({ type: "Post", url: '@Url.Action("ModifierPM", "Mode")', data: data, contentType: false, processData: false, success: function (response) {

     $("#modalModifPM").modal('hide');
     $("#modalTMRs").modal('show');/// i want to show data there in this Modal within refresh all the page , just the MODAL 
    }

});

uj5u.com熱心網友回復：

如果您的回應來自 Parital View Result（也就是說，您的回應是 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 div寫一個id，通過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 串列，那么您可以將其轉換為表客戶端；

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

當您將結果資料發送到此函式時，這將為您提供一個表格。下一步，將表格附加到您想要的任何位置，如上文所述。

在此示例中，您必須了解資料模型并按名稱呼叫值。

如果您想制作更具彈性的制表器，則必須像這樣更改回應模型；

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

這個 json 是一個 list 的串列，由每個 item 組成一個物件串列。優點是這種模式；您可以通過回圈進行迭代，無需知道屬性名稱。

 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) 是表格字串！

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476348.html

標籤：javascript C＃ jQuery 阿贾克斯模态对话

上一篇：如何從json資料中獲取值以輸入

下一篇：通過id使用Jquery制作影片