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

小渣渣 · 发表于 2016-6-30 10:44:01

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" />
<scrip{过滤}t src="~/scrip{过滤}ts/jquery-1.10.2.js"></scrip{过滤}t>
<scrip{过滤}t src="~/scrip{过滤}ts/jquery.validate.js"></scrip{过滤}t>
<scrip{过滤}t src="~/scrip{过滤}ts/jquery.unobtrusive-ajax.min.js"></scrip{过滤}t> // 这里需要注意的是：使用Ajax.BeginForm提交表单是一定需要它，不然提交成功需要执行的js代码无法执行
<scrip{过滤}t src="~/scrip{过滤}ts/jquery.validate.unobtrusive.js"></scrip{过滤}t>
<scrip{过滤}t src="~/Content/layer/layer.js"></scrip{过滤}t>
<style>
* {
padding: 0;
margin: 0;
}
.title {
display: inline-block;
width: 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] {
width: 300px;
height: 30px;
border: 1px solid #ddd;
}
.row input[type=submit] {
text-align: center;
line-height: inherit;
width: 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>
<scrip{过滤}t>
function complete(data) {
var json = JSON.parse(data.responseText);
layer.msg('恭喜你，密码修改成功,请重新登录！！', {
time: 3000,
icon: 1
});
setTimeout(function () {
window.top.locatio{过滤}n.href = json.BackUrl;
}, 2000);
}
</scrip{过滤}t>

复制代码

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("<scrip{过滤}t>base.AlertTip('修改密码成功');window.locatio{过滤}n.href='/user/login';</scrip{过滤}t>");
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);
}

复制代码

小渣渣 · 发表于 2016-10-20 14:42:59

mvc返回javascrip{过滤}t脚本
http://www.itsvse.com/thread-3084-1-1.html
(出处: 架构师)

		自动登录	找回密码
密码			注册[Register]

[资料] MVC AJAX.BeginForm() 页面异步提交

相关帖子