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>

当我点击＆＃34; btn_save_password＆＃34;时，我会调用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);
}

然后它在我的控制器＆＃34; ChangePassword＆＃34;

中调用一个方法

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

＆＃34; ChangePassword＆＃34;方法调用PartialView＆＃34; ChangePassword.html＆＃34;像这样：

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

我可以在模态上查看局部视图，并且我能够成功更新数据库。但问题是，我希望能够在成功或不成功时向模态发送成功的消息或错误消息。提交后，无论是否更新了数据库，它都会刷新页面并且模式已经消失。我希望能够将消息传入模态。非常感谢您的帮助。

编辑 - 我现在可以在Modal中看到验证消息，但它只能工作一次。只要我点击＆＃34; btn_save_password＆＃34;再次，页面刷新。

Answer 1

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

例如：

<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 Value设置为0或1，然后尝试按照脚本

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

Ajax Success不会呈现局部视图

1 个答案: