如何在asp.net mvc中调用ajax之后关闭模式弹出式引导程序并更新数据表?

时间:2017-07-20 18:01:58

标签: jquery ajax asp.net-mvc twitter-bootstrap

我使用了datatable库以及两个按钮编辑和删除。当我提交表单(模式弹出式引导程序)时。它没有关闭,我必须手动关闭它我必须手动刷新我的"数据表"显示我的操作。我有两个问题.1)模态弹出窗口没有关闭,2)datatable没有刷新。

enter image description here     @model Dentistry.Areas.ViewModels.UserViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
    </button>
    <h4 class="modal-title custom_align" id="Heading">ویرایش کاربران</h4>

</div>
@using (Html.BeginForm("Edit", "Users", FormMethod.Post, new { id = "popupForm" }))
{
    @Html.AntiForgeryToken()
    if (Model != null && Model.UserId != string.Empty)
    {
        <div class="modal-body" id="editModal">
            <div class="form-group">
                @Html.HiddenFor(a => a.UserId)
            </div>
            <div class="form-group">
                <label>نام کاربری</label>
                @Html.TextBoxFor(a => a.UserName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.UserName)
            </div>
            <div class="form-group">
                <label>نام</label>
                @Html.TextBoxFor(a => a.FirstName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.FirstName)
            </div>

            <div class="form-group">
                <label>نام خانوادگی</label>
                @Html.TextBoxFor(a => a.LastName, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.LastName)
            </div>
            <div class="form-group">
                <label>جنسیت</label>
                @Html.TextBoxFor(a => a.Gender, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.Gender)
            </div>
            <div class="form-group">
                <label>وضعیت</label>
                @Html.TextBoxFor(a => a.IsActive, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.IsActive)
            </div>

            <div class="form-group">
                <label>ایمیل</label>
                @Html.TextBoxFor(a => a.Email, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.Email)
            </div>
            <div class="form-group">
                <label>آدرس</label>
                @Html.TextBoxFor(a => a.Address, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.Address)
            </div>
            <div class="form-group">
                <label>شماره تماس</label>
                @Html.TextBoxFor(a => a.PhoneNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(a => a.PhoneNumber)
            </div>

            @*<a href="#" id="btnSubmit" class="btn btn-success btn-block">ویرایش</a>*@
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success btn-block" >ویرایش</button>
            @*<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>*@
        </div>
    }
}
<script>
    //$(document).ready(function () {


        $(function () {
            $('#popupForm').on('submit', function (e) {
                e.preventDefault();
                alert("hi");
                SubmitForm();
            })
        });
        function SubmitForm() {
            var data = $("#popupForm").serialize();
            var url = "/Users/Edit";
            var form = $('#popupForm')[0];
            var formdata = false;
            if (window.FormData) {
                formdata = new FormData(form);
            }
            alert(formdata);
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: url,
                data: formdata ? formdata : data,
                cache: false,
                contentType: false,
                //  enctype: 'multipart/form-data',
                processData: false,
                success: function (data) {
                    if (data == true) {
                        $('#edit').modal('hide');
                        window.location.href="/Users/Index";
                        $("#myDatatable").ajax.reload();
                    }
                }

            });
        }

</script>

============================================

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(UserViewModel user)
{
    bool status=false;
    if (ModelState.IsValid)
    {
        var userQuery=db.User.SingleOrDefault(u => u.Id  == user.UserId);
        if (user.UserId != string.Empty)
        {
            userQuery.FirstName = user.FirstName;
            userQuery.LastName = user.LastName;
            userQuery.PhoneNumber = user.PhoneNumber;
            userQuery.UserName = user.UserName;
            userQuery.Email = user.Email;
            userQuery.Address = user.Address;
            userQuery.Gender = Convert.ToBoolean(user.Gender);
            userQuery.IsActive = Convert.ToBoolean(user.IsActive);
        }
        else
        {
            User userDB=new User();
            userDB = userQuery;
            db.User.Add(userDB);
        }
        //  db.Entry(user).State = EntityState.Modified;
        db.SaveChanges();
        status = true;

    }
   // return RedirectToAction("Index");
    // return View(user);
    return new JsonResult { Data = new { status = status } };
}

2 个答案:

答案 0 :(得分:1)

您对MVC的回复是一个包含属性success的对象,因此在您的jQuery中,您需要测试if(data.success == true)。由于它是一个布尔值,你也可以if(data.success)作为捷径。

答案 1 :(得分:1)

您的回复应该是

return Json(new{success =true},JsonRequestBehaviour.DenyGet);

并在客户端

  success: function (data) {
                    if (data.success) {
                        $('#edit').modal('hide');
                        window.location.href="/Users/Index";
                                          }
                }

您可能想要添加错误功能以便知道