Asp.Net MvcでAjaxを使用してテーブルリストをリフレッシュ

Question

新しいエントリを作成した後、モーダルに問題があります。テーブルリストにテーブルの最後に作成された行が表示されません。 ）、ページを更新した後にのみ表示されます。

私は何かを試しましたが、初めて働いただけです（Refresh table using AJAX in ASP.NET MVCから）。ここで

はそれのための私のコントローラのコードです：

public ActionResult IndexEvent() 
    { 
     return View(db.tbl_Event.ToList()); 
    } 

    [HttpGet] 
    public ActionResult Add() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Add(BOL3.tbl_Event eve) 
    { 
     if(ModelState.IsValid) 
     { 
      db.tbl_Event.Add(eve); 
      db.SaveChanges(); 
     } 
     return IndexEvent(); 
    } 

、ここではアクションボタンとモーダルは次のとおりです。

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#enquirypopup">Add</button> 
 

 
<div id="enquirypopup" class="modal fade in" role="dialog" tabindex="-1"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content row"> 
 
      <div class="modal-header custom-modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Add Event</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form id="myForm"> 
 

 
        <div class="modal-body"> 
 
         <div class="row form-group"> 
 
          <div class="col-md-12"> 
 
           <div class="input-group"> 
 
            <span class="input-group-addon"></span> 
 
            <input type="text" class="form-control" name="Event" id="Event" placeholder="Event Name"> 
 
           </div> 
 
          </div> 
 
         </div>  
 
         <div class="row form-group"> 
 
          <div class="col-md-12"> 
 
           <div class="input-group"> 
 
            <span class="input-group-addon"></span> 
 
            <input type="text" class="form-control" name="Start_Date" id="Start_Date"> 
 
           </div> 
 
          </div> 
 
         </div>       
 
         <div class="row form-group"> 
 
          <div class="col-md-12"> 
 
           <div class="input-group"> 
 
            <span class="input-group-addon"></span> 
 
            <input type="text" class="form-control" name="End_Date" id="End_Date"> 
 
           </div> 
 
          </div> 
 
         </div>       
 
         <br /> 
 
         <div class="modal-footer"> 
 
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
 
          <button type="submit" class="btn btn-success" id="btnSubmit">Save</button> 
 
         </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

、ここでは、テーブル、スクリプト部分です。

<script> 
 
    $(document).ready(function() { 
 
     $("#btnSubmit").click(function() { 
 
      var myformdata = $("#myForm").serialize(); 
 

 
      $.ajax({ 
 
       type: "POST", 
 
       url: "/Prog/Add", 
 
       data: myformdata, 
 
       success: function() { 
 
        $("#enquirypopup").modal("hide"); 
 
        $("#tbl").load("/Prog/IndexEvent"); 
 
        //$("#tbl").reload("/Prog/IndexEvent"); 
 
       } 
 
      }) 
 

 
     }) 
 
    }) 
 
</script>

@model..... 
 
<div class="table-responsive"> 
 
    <table class="table table-bordered table-striped" id="tbl"> 
 
     <thead> 
 
      <tr> 
 
       <th>Event Name</th> 
 
       <th>Starting (Date and Time)</th> 
 
       <th>Ending (Date and Time)</th> 
 
       <th>All Day ?</th> 
 
       <th></th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      @foreach(var item in Model) 
 
      { 
 
       <tr> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.Event) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.Start_Date) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.End_Date) 
 
        </td> 
 
        <td> 
 
         @Html.DisplayFor(modelItem => item.All_Day) 
 
        </td> 
 
        <td style="align-content:center"> 
 
         
 
         <a href="@Url.Action("EditEvent", "Prog", new { id = item.ID})" class="editDialog">Edit</a> |      
 
         @Html.ActionLink("Delete", "Delete", new { id = item.ID }) 
 
        </td> 
 
       </tr> 
 
      } 
 
     </tbody> 
 
    </table> 
 
</div>

私は本当にあなたが私を助けることができるので、もしこのモーダルの仕事は、それはそれらを使用して初めてです、私は実際にそれをappriciate正確にどのように知りません。ありがとう。

Answer 1

シンプル！ location.reload（）を正常に追加します。

 $.ajax({ 
      type: "POST", 
      url: "/Prog/Add", 
      data: myformdata, 
      success: function() { 
      $("#enquirypopup").modal("hide"); 
      location.reload(); 
       } 
      }); 

希望小冊子。