My bootstrap modal is not closing after pressing button why JQuery,Ajax,MVC?

Question

User-199788946 posted

Modal:

<div class="modal fade" id="ResetUserModal" tabindex="-1" role="dialog" aria-labelledby="ResetUserModal" aria-hidden="true" data-backdrop="static">
    <div id="resetUserContainer">
    </div>
</div>

JQuery:

        function ResetUserSuccess(data) {
            debugger;
            if (data.success != true) {
                return;
            }
            $('#ResetUserModal').modal('hide');
            $('#resetUserContainer').html("");
            userListVM.refresh();
            $.notify(data.message, {                
                globalPosition: "top center",
                className: "success"
            })
        }

Controller code:

        [HttpPost, ActionName("Reset")]
        public async Task<ActionResult> ResetUser(string UserId)
        {
            var user = nicDBEntities.User_Table.FirstOrDefault(x => x.UserId == UserId);
            var pass = Membership.GeneratePassword(8, 1);
            HelperClass.SendMail(user.EmailAdd, pass);
            user.PassWd = HelperClass.Encrypt(pass);
            nicDBEntities.User_Table.Attach(user);
            nicDBEntities.Entry(user).State = EntityState.Modified;
            var task = nicDBEntities.SaveChangesAsync();
            await task;
            if (task.Exception != null)
            {
                ModelState.AddModelError("", "Unable to Reset the Password");
                Response.StatusCode = (int)HttpStatusCode.BadRequest;
                User_TableVm userVM = MapToViewModel(user);
                return View(Request.IsAjaxRequest() ? "_ResetPartial" : "Edit", userVM);
            }

            if (Request.IsAjaxRequest())
            {
                return Json(new { success = true, message = "successfully reset" }, JsonRequestBehavior.AllowGet);
            }

            return RedirectToAction("ManageUser");

        }

Ajax call From View

        <div class="modal-body">
            @using (Ajax.BeginForm("Reset", "User", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "ResetUserSuccess" }, new { @class = "form-horizontal", role = "form" }))
            {
            <div class="form-actions no-color">
                @Html.HiddenFor(x => x.UserId)
                <input type="submit" value="Reset" class="btn btn-warning" /> 
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
            }
        </div>

The Json is returning true and the success message is receiving on  function ResetUserSuccess(data) and it is not executing 

   $('#ResetUserModal').modal('hide');

It only show modal why?

Answer 1

User1686398519 posted

Hi,  jameslovemicrosoft

You need to check if you have referenced the "jquery.unobtrusive-ajax.js" file so that Ajax.BeginForm will work well.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Note: You can add jquery.unobtrusive-ajax through NuGet.

Here is the result.

 
Best Regards,

YihuiSun