Ajax Success 不渲染局部视图

Question

我已将部分视图放入模式中以更新密码，如下所示：

 <div class="modal fade" id="modalPassword" tabindex="-1" role="dialog" 

aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-body">
                                    <div class="modal-content">
                                        <div id="message"></div>
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">Change Password</h4>
                                        </div>
                                        <div class="modal-
                                            <div id="passwordForm">
                                                @{
                                                    @Html.Action("ChangePassword","Account");
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

这是我的部分观点：

@model WebApplication1.Models.ViewModel.ChangeUserPassword

@{
    Layout = null;
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>


<form id="form">
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <fieldset id="submitPasswordForm">
            <div class="col_full">
                @Html.LabelFor(model => model.OldPassword, htmlAttributes: new { @class = "capitalize t600" })
                @Html.TextBoxFor(model => model.OldPassword, null, new { @class = "sm-form-control", id = "txtOldPassword" })
                @Html.ValidationMessageFor(model => model.OldPassword)
            </div>

            <div class="col_full">
                @Html.LabelFor(model => model.ChangedPassword, htmlAttributes: new { @class = "capitalize t600" })
                @Html.TextBoxFor(model => model.ChangedPassword, null, new { @class = "sm-form-control", id = "txtChangedPassword" })
                @Html.ValidationMessageFor(model => model.ChangedPassword)
            </div>

            <div class="col_full">
                @Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "capitalize t600" })
                @Html.TextBoxFor(model => model.ConfirmPassword, null, new { @class = "sm-form-control", id = "txtConfirmPassword" })
                @Html.ValidationMessageFor(model => model.ConfirmPassword)
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
                <input type="submit" value="Save Changes" class="btn btn-primary" id="btn_save_password" />

            </div>
        </fieldset>
    </form>

当我点击“btn_save_password”时，我会像这样调用 onclick 事件：

$("#btn_save_password").click(function (event) {
    event.preventDefault();
    var data = $("#submitPasswordForm").serialize();
    $.ajax({
        type: "POST",
        url: "@Url.Action("ChangePassword", "Account")",
        data: data,
        success: function (result) {
            $("#passwordForm").empty();
            //$("div").remove("#passwordForm");
            addHtml(result);
        },
        error: function () {
            $("#passwordForm").html("Error occured");

        }
    });
});

function addHtml(htmlString) {
    $("#msg").html(htmlString);
}

然后它调用我的控制器“ChangePassword”中的一个方法

 [Authorize]
    public ActionResult ChangePassword()
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult ChangePassword(ChangeUserPassword password)
    {
        if (ModelState.IsValid)
        {
            var cookie = HttpContext.Request.Cookies["Sys_user_id"];
            var um = new UserManager();
            if (cookie != null && um.GetAccountPassword(Convert.ToInt32(cookie.Value), password.OldPassword))
            {
                um.ChangeUserPassword(password, Convert.ToInt32(cookie.Value));
            }
            else
            {
                ModelState.AddModelError("","Wrong current password");
            }
        }
        else
        {
            ModelState.AddModelError("","Error");
        }
        return View();
    }

“ChangePassword”方法调用 PartialView “ChangePassword.html”，如下所示：

[Authorize]
public ActionResult ChangePassword {
       return PartialView();
}

我可以在模态框上查看部分视图，并且能够成功更新数据库。但问题是，我希望能够在成功与否时将成功消息或错误消息发送到模式中。提交后，无论是否更新了数据库，刷新页面，modal消失。我希望能够将消息放入模态。 非常感谢您的帮助。

编辑 -- 我现在可以在 Modal 中看到验证消息，但它只能工作一次。一旦我再次点击“btn_save_password”，页面就会刷新。

Answer 1

在局部视图中使用 hide 类添加两个包含您的消息（成功和失败）的 <div> 部分。 Ajax 提交后，为合适的div 添加类Show。

例如：

<div class="alert alert-danger text-center hide" role="alert"id="FailedMesssage">
           Failed....!!!
 </div>

<div class="alert alert-success text-center hide" role="alert" id="successMesssage">
        success....!!!
 </div>

<button type = "button" value="Submit" onclick ="Test()"/>

使用 ajax 代码将 Var 值设置为 0 或 1，然后尝试以下脚本

<script>
 function Test()
 {
   var value =1;
   if(value == 1)
   {
     $("#successMesssage").addClass("show").removeClass("hide");
   }
   else
   {
     $("#FailedMesssage").addClass("show").removeClass("hide");
   }
 }
</script>