在Asp.Net中使用Ajax刷新表列表Mvc

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>

我真的不知道這是怎樣的模態的工作，這是我第一次使用他們，所以，如果你能幫助我，我真的它並欣賞。謝謝。

Answer 1

簡單！ 成功添加location.reload（）。

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

希望有所幫助。