zoukankan      html  css  js  c++  java
  • 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);
            }
  • 相关阅读:
    oracle+st_geometry
    php开发面试题---php面向对象详解(对象的主要三个特性)
    php开发面试题---Mysql常用命令行大全
    php开发面试题---Linux常用命令大全
    php开发面试题---vue面试题(vue.js的好处及作用)
    php开发面试题---数据库SQL调优的几种方式
    剑指offer---2、二叉搜索树的后序遍历序列
    MYSQL中IN与EXISTS的区别
    mysql笔试题大餐---2、exists加一些查询
    正确理解MySQL中的where和having的区别
  • 原文地址:https://www.cnblogs.com/mafei2014/p/5054611.html
Copyright © 2011-2022 走看看