MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证
原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证
MVC中,关于往后台提交的方法有:
1、Html.BeginForm():同步
2、Ajax.BeginForm():异步
3、js或jQuery提交后台
本文体验Ajax.BeginForm()方法。
View model
using System;
using System.ComponentModel.DataAnnotations;
namespace XHelent.Models
{
public class Registration : IValidatableObject
{
public string RegisrationUniqueId { get; set; }
[Required]
[Display(Name = "姓名")]
public string Name { get; set; }
[Required]
[Display(Name = "年龄")]
public int Age { get; set; }
public System.Collections.Generic.IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
if (Age < 18)
{
yield return new ValidationResult("年龄至少18岁以上", new String[]{"Age"});
}
}
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
让model实现了IValidatableObject,在model层自定义验证逻辑和错误信息。
HomeController
using System.Security.Cryptography;
using System.Web;
using System.Web.Mvc;
using XHelent.Models;
namespace XHelent.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new Registration());
}
[HttpPost]
public PartialViewResult Index(Registration model)
{
if (ModelState.IsValid)
{
RNGCryptoServiceProvider csp = new RNGCryptoServiceProvider();
byte[] registrationBytes = new byte[16];
csp.GetBytes(registrationBytes);
model.RegisrationUniqueId = Convert.ToBase64String(registrationBytes);
return PartialView("Success", model);
}
else
{
return PartialView("FormContent", model);
}
}
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
无论验证成功或失败,都返回强类型部分视图。
Home/Index.cshtml视图
@model XHelent.Models.Registration
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>当前时间:@DateTime.Now.ToShortDateString()</h2>
<div id="formContent">
@{Html.RenderPartial("FormContent");}
</div>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Home/FormContent.cshtml部分视图
@model XHelent.Models.Registration
@{
AjaxOptions options = new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "formContent" //可忽略
};
}
<style type="text/css">
.field-validation-error {
color: red;
}
</style>
@using (Ajax.BeginForm(options))
{
<fieldset>
<legend>登记</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>
<div>
<input type="submit" value="登记"/>
</div>
</fieldset>
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Home/Success.cshmtl视图
@model XHelent.Models.Registration
<h2>恭喜,注册成功了!</h2>
<p>注册号为:@Model.RegisrationUniqueId</p>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
没有填写效果:
年龄小于18效果:
输入正确效果:
==总结
使用Ajax.BeginForm()虽然可以实现异步提交并验证,但,如果放到后台管理系统的背景下,返回部分视图可能不是很方便。
MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证的更多相关文章
- Ajax.BeginForm方法 参数
感谢博主 http://www.cnblogs.com/zzgblog/p/5454019.html toyoung 在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Aja ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- AJAX(二)-实现验证码异步验证功能
案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...
- MVC验证11-对复杂类型使用jQuery异步验证
原文:MVC验证11-对复杂类型使用jQuery异步验证 本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证.与本篇相关的"兄弟篇 ...
- MVC验证10-到底用哪种方式实现客户端服务端双重异步验证
原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳 ...
- MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax
MVC之Ajax.BeginForm使用详解之更新列表 1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScrip ...
- [ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax
Ajax (Asynchronous JavaScript and XML 的缩写),如我们所见,这个概念的重点已经不再是XML部分,而是 Asynchronous 部分,它是在后台从服务器请求数据的 ...
- 【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax
本文参考:http://www.cnblogs.com/willick/p/3418517.html 1.Unobtrusive Ajax允许我们通过 MVC 的 Help mothod 来定义 Aj ...
- Html.BeginForm() vs Ajax.BeginForm() in MVC3
我们知道,BeginForm()方法能创建一个Form标签,因此可以结合表单级的方法,在这个页面中.我一直在考虑Html.BeginForm()方法和Ajax.BeginForm()方法在MVC3中有 ...
随机推荐
- JAVA中的super和this关键字的使用
一 this关键字 this关键字可以出现在构造方法和实例方法中,不能出现在静态方法中,这是因为静态方法可以用类名来调用,这时可能还没有任何对象诞生. this主要有两种用法: 1 用在构造方法中,调 ...
- 提升Mac os x 10.10+xcode6.1之后,Cocoapods发生故障的解决方案
提升Mac OS X 10.10+Xcode 6.1之后.Cocoapods图书馆管理也依赖于相应升级.现在最新的Release版本号是 0.34.在之前的版本号.当数据库更新和管理,你会遇到一个错误 ...
- 解决github访问问题
github这是个好地方.但是,上不去就蛋疼. 今天github上不去,果断f12下,看下network.发现里面好多请求都是指向 github.global.ssl.fastly.net这个域名的, ...
- Tempdb怎么会成为性能瓶颈
原文:Tempdb怎么会成为性能瓶颈 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/25/tempdb.aspx 我曾经遇到过这样一个性能问题. ...
- 面向对象的软件project——面向对象分析
为了解决软件危机.一些IT前辈国产软件project这个词汇,软件project它被引入到整个软件开发过程的维护. 软件project从程序的设计角度能够分为两类.一类是面向结构的软件project. ...
- 【JAVA】【NIO】5、Java NIO Scatter / Gather
标题手段Java NIO该分散体浓缩 Java NIO内置支持分散与收集.的概念主要用于信道分散聚集的读写. 读出的分散体的一个通道被读多个数据buffer在.因此.数据分散到多个buffer中. 对 ...
- velocity基本语法
一.基本语法 1."#"用于识别Velocity该脚本语句,这包括#set.#if .#else.#end.#foreach.#end.#iinclude.#parse.#macr ...
- SQL Server 2008 R2 性能计数器详细列表(一)
原文:SQL Server 2008 R2 性能计数器详细列表(一) SQL Server Backup Device 计数器: 可监视用于备份和还原操作的 Microsoft SQL Server ...
- ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
- Linux 编程学习笔记----命令行参数处理
转载请注明出处.http://blog.csdn.net/suool/article/details/38089001 问题引入----命令行參数及解析 在使用linux时,与windows最大的不同 ...