MVC AJAX.BeginForm() 页面异步提交

1、首先新建一个修改密码的的视图模型(viewmodel)

using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace BM.Model
{
    public class PasswordModel
    {
        /// <summary>
        /// 原密码
        /// </summary>
        [DisplayName("初始密码")] // 显示名字
        [Required(ErrorMessage = "初始密码密码不能为空")] // 不能为空特性
        [Remote("CheckPasswordIsOk", "User", ErrorMessage = "初始密码不正确", HttpMethod = "GET")] // 远程验证 User控制器下的 CheckPasswordIsOk 下去验证
        //[DataType(DataType.Password)]
        public string Password { get; set; }
        /// <summary>
        /// 新密码
        /// </summary>
        [DisplayName("新 密 码")]
        [Required(ErrorMessage = "新密码不能为空")]
        public string NewPassword { get; set; }
        /// <summary>
        /// 确认密码
        /// </summary>
        [DisplayName("确认密码")]
        [System.ComponentModel.DataAnnotations.Compare("NewPassword", ErrorMessage = "新密码不匹配")] // 比较字段
        public string ConfirmPassword { get; set; }
    }
}

2、 新建一个强类型视图

@{
    Layout = null;
}
@model  BM.Model.PasswordModel
<!DOCTYPE html>
<html>
<head>
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/layer/skin/layer.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>  // 这里需要注意的是: 使用Ajax.BeginForm提交表单是一定需要它,不然提交成功需要执行的js代码无法执行
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Content/layer/layer.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .title {
            display: inline-block;
             auto;
            height: 34px;
            font-size: 22px;
            font-family: "宋体";
            font-weight: 500;
            /*color: #fff;
            background-color:#0094ff;*/
        }

        .row {
            margin: 8px;
        }

            .row input[type=text], .row input[type=password] {
                 300px;
                height: 30px;
                border: 1px solid #ddd;
            }

            .row input[type=submit] {
                text-align: center;
                line-height: inherit;
                 150px;
                height: 40px;
                font-size: 26px;
                margin-left: 80px;
                margin-top: 3px;
                color: #fff;
                background-color: #0094ff;
            }

        .field-validation-error {
            color: red;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <h2 style="text-align:center">修改密码</h2>
        <div class="form">
            @using (@Ajax.BeginForm("ChangePassword", "User", new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnComplete = "complete" }, new { id = "form" }))
            {
                @Html.AntiForgeryToken();  // 防止CSFR 攻击,配合控制器上的 ValidateAntiForgeryToken 一起使用
                <div class="row">
                    <span class="title">@Html.DisplayNameFor(c => c.Password):</span> @Html.PasswordFor(c => c.Password)
                    @Html.ValidationMessageFor(c => c.Password)
                </div>
                <div class="row">
                    <span class="title">@Html.DisplayNameFor(c => c.NewPassword):</span> @Html.PasswordFor(c => c.NewPassword)
                    @Html.ValidationMessageFor(c => c.NewPassword)
                </div>
                <div class="row">
                    <span class="title">@Html.DisplayNameFor(c => c.ConfirmPassword):</span> @Html.PasswordFor(c => c.ConfirmPassword)
                    @Html.ValidationMessageFor(c => c.ConfirmPassword)
                </div>
                <div class="row">
                    <input id="btnSubmit" type="submit" value="确  认" />
                </div>
            }
        </div>
    </div>
</body>

</html>
<script>
    function complete(data) {
        var json = JSON.parse(data.responseText);
        layer.msg('恭喜你,密码修改成功,请重新登录!!', {
            time: 3000,
            icon: 1
        });
        setTimeout(function () {
            window.top.location.href = json.BackUrl;
        }, 2000);
    }
</script>

3. 以下是控制器中方法

 /// <summary>
        /// 修改密码
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult ChangePassword()
        {
            if (Session[CurrentUser] == null)
            {
                return Redirect("/user/login");
            }
            return View();
        }


        [HttpPost, ValidateAntiForgeryToken]
        public ActionResult ChangePassword(PasswordModel model)
        {
            using (BusinessManageEntities db = new BusinessManageEntities())
            {
                int userId = (int)Session[CurrentUser];
                var bm = db.BusinessManager.Where(c => c.UserId == userId).FirstOrDefault();
                bm.BizPassword = Utils.Md5(model.NewPassword);
                db.SaveChanges();
            }
            //return Content("<script>base.AlertTip('修改密码成功');window.location.href='/user/login';</script>");
            return Json(new { Message = "修改密码成功", BackUrl = "/user/login" }, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 检查用户密码是否正确
        /// </summary>
        /// <param name="Password">旧密码</param>
        /// <returns></returns>
        [HttpGet]
        public ActionResult CheckPasswordIsOk(string password)
        {
            if (Session[CurrentUser] == null)
            {
                return Redirect("/user/login");
            }
            int userId = (int)Session[CurrentUser];
            using (BusinessManageEntities db = new BusinessManageEntities())
            {
                var bm = db.BusinessManager.Where(c => c.UserId == userId).FirstOrDefault();
                if (bm.BizPassword.Equals(Utils.Md5(password)))
                {
                    return Json(true, JsonRequestBehavior.AllowGet);
                }
            }
            return Json(false, JsonRequestBehavior.AllowGet);
        }
原文地址:https://www.cnblogs.com/mafei2014/p/5054611.html