MVC:DataTable没有刷新ajax的成功

时间:2017-08-28 18:40:33

标签: javascript jquery ajax datatable datatables

当我在执行CRUD操作时从我的控制器返回JSON成功时,我尝试刷新DataTable数据。 CRUD操作正常工作并且出现了toastr成功消息,当模态关闭时,我似乎无法让数据表刷新操作。我不想做location.reload(),因为在页面其余部分输入的数据将会丢失。我正在使用模态的部分视图,不确定这是否与我的问题有关。我已经研究过并试过了几件事,但却无法让它发挥作用。

代码:

  [HttpPost]
    public ActionResult CreateFooterLink(footer_links footer_link)
    {
        try
        {
            if (ModelState.IsValid)
            {
                db.footer_links.Add(footer_link);
                db.SaveChanges();
                return Json(new { success = true, message = "Saved Link Successfully." },JsonRequestBehavior.AllowGet);
            }
            return View("_CreateFooterLink", footer_link);                               
        }
        catch (Exception ex)
        {
            return new JsonResult
            {
                Data = new { ErrorMessage = ex.Message, Success = false },
                ContentEncoding = System.Text.Encoding.UTF8,
                JsonRequestBehavior = JsonRequestBehavior.DenyGet
            };
        }
    }

      @model WST___Dev.Models.footer_links
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 class="modal-title">Add New Link</h3>
        </div>
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "CreateLink" }))

        {
            @Html.AntiForgeryToken()
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            @Html.LabelFor(m => Model.name, new { @class = "control-label col-sm-3 required"})
                            <div class="col-sm-9">
                                @Html.TextBoxFor(m => m.name, new { @class = "form-control", id="name"})
                                <div>
                                    @Html.ValidationMessageFor(m => m.name)
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => Model.target_url, new { @class = "control-label col-sm-3 required" })
                            <div class="col-sm-9">
                                @Html.TextBoxFor(m => m.target_url, new { @class = "form-control", id="target_url" })
                                <div>
                                    @Html.ValidationMessageFor(m => m.target_url)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-6">
                            <input class="btn btn-primary" type="submit" value="Save" id="btnSubmit" />
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-warning" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>

        }
        <script>
            $(document).ready(function () {
                $.ajaxSetup({ cache: false });      
                $("#btnSubmit").click(function (e) {
                    e.preventDefault();
                    var name = $('#name').val();
                    var target_url = $('#target_url').val();
                    var JSONObject = {
                        name: name,
                        target_url: target_url
                    };
                    $.ajax({
                        url: '@Url.Action("CreateFooterLink", "StyleEditor")',
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(JSONObject),
                        dataType: "json",
                        success: function (result) {
                            if (result.success == true) {
                                $("#MyModal").modal('hide');
                                toastr.success(result.message);
                                //window.location.reload(true);
                                //setTimeout(location.reload.bind(location), 6);
                                //setInterval(function () {
                                //    table.ajax.reload();
                                //}, 3)
                                //table.draw();
                                //table.fnClearTable();
                                //table.fnAddData();
                                //table.fnDraw();
                                //var oTableToUpdate = $(tblLinks).dataTable({ bRetrieve: true });
                                //$oTableToUpdate.fnAddData();
                                //$oTableToUpdate.fnDraw();


                            } else {
                                $("#MyModal").modal('show');
                                toastr.error(result.ErrorMessage);
                            }
                        },
                        error: function (xml, message, text) {
                            toastr.error("Msg: " + message + ", Text: " + text);
                        }
                    });

                });
            });
        </script>

DataTable初始化:

 var table;
$(document).ready(function () {

    table = $('#tblLinks').DataTable({
        "ordering": true,
        "bServerSide": true,
        "serverSide": true,
        "orderMulti": false,
        "deferRender": true,
        "pageLength": 5,
        'columnDefs': [{
            'targets': 2,
            'title': '',
            'sortable': false,
        }],
        "stateSave": true,
        "stateDuration": -1,
    });          
});

0 个答案:

没有答案