单击 asp.net 表单中的按钮后重新加载页面的一部分

Question

大家好消息。我又有问题了。我有带有个人信息块、个人信息编辑块和密码块的页面。单击按钮后，我只需要重新加载密码块。但是我有一个问题，当我点击按钮时，我的页面尝试重新加载所有页面。并要求再次调用加载个人和密码信息的方法。但是，我只需要在密码块中显示消息并使用密码进行操作，而不会影响个人信息块。 （另外我需要在不影响密码块的情况下使用个人信息块，但我认为下面的答案将是相同的）。

PersonalInf 控制器：

[HttpPost]
    public ActionResult changePassword(PersonalPageModel personalPage)
    {
        var passwordDetauls = dbModel.USERS.Where(model =>
        model.vPassword == personalPage.usersModel.NewPassword
            ).FirstOrDefault();

        if (passwordDetauls != null)
        {
            personalPage.usersModel.ChangePasswordErrorMessage = "Новый пароль совпадает со старым!";
            return View("~/Views/home/PersonalPage.cshtml", personalPage);
        }
        else
        {
            var userDetails = dbModel.USERS.Where(model =>
            model.vPassword == personalPage.usersModel.vPassword).FirstOrDefault();

            if (userDetails == null)
            {
                personalPage.usersModel.LoginErrorMessage = "Неверный пароль!";
                return View("~/Views/home/PersonalPage.cshtml", personalPage);
            }
            else
            {
                int iIdUsers = Convert.ToInt32(Session["iIdUsers"].ToString());

                //Change password here!

                var query = from ord in dbModel.USERS
                            where ord.iIdUsers == iIdUsers
                            select ord;

                foreach (var ord in query)
                {
                    ord.vPassword = personalPage.usersModel.NewPassword;
                }

                try
                {
                    dbModel.SaveChanges();
                }
                catch(Exception exc)
                {
                    personalPage.usersModel.ChangePasswordErrorMessage = exc.Message;
                }

                ViewBag.SuccessMessage = "Пароль был успешно изменен!";

                //Session["iIdUsers"] = userDetails.iIdUsers;
                //Session["vNickName"] = userDetails.vNickName;
                //return RedirectToAction("PersonalPage", "Home");

                return View("~/Views/home/PersonalPage.cshtml", personalPage);
            }
        }
    }

并查看代码，类似autherize form的代码：

 @using (Html.BeginForm("changePersonalInf", "PersonalPage", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()

                    <tr>
                        <td><p>Город:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vCity, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>ФИО:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vFIO, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Индекс:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vIndex, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Населенный пункт:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vLocality, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Улица:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vStreet, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Дом/корпус/строение:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vHome, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Квартира:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vApartment, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>
                    <tr>
                        <td><p>Телефон:</p></td>
                        <td>@Html.EditorFor(model => model.personalInfModel.vPhone, new { htmlAttributes = new { @class = "form-control" } })</td>
                    </tr>


                    <tr>
                        <td><input type="submit" value="Изменить" class="btn-problem" /></td>
                        <td><input type="reset" value="Очистка" class="btn-problem" /></td>
                    </tr>
                }

Answer 1

将更改密码块放在部分视图中，并将表单更改为 Ajax 表单：

@using (Html.BeginForm("changePersonalInf", "PersonalPage", FormMethod.Post)) {

}

到

@using (Ajax.BeginForm("changePersonalInf", "PersonalPage", null, new AjaxOptions {
    UpdateTargetId = "id_of_your_change_password_block"
}, new { role = "form", id = "AssignCoachForm" })) {

}

这将自动更新具有给定 ID 的块。或者，您可以自己在 JavaScript 中执行此操作并对其进行更多控制：

@using (Ajax.BeginForm("changePersonalInf", "PersonalPage", null, new AjaxOptions {
    OnSuccess = "your_js_success_function(data);",
    OnFailure = "your_js_failure_function();",
}, new { role = "form", id = "AssignCoachForm" })) {

}