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

Question

我的模式有问题，在创建新条目后，我的表列表没有显示表中最后创建的行(在我的数据库中它已经存在)，只有在刷新后才显示它页。

我尝试了一些东西，但只第一次起作用(来自:Refresh table using AJAX in ASP.NET MVC)。

这是我的 Controller 代码:

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

希望有帮助。