Asp.net MVC 3 中 Unobtrusive javascript 与Ajax
前面的文章我们介绍了jquery.validate.unobtrusive 脚本实现Asp.net MVC3表单验证。这里我们介绍应用jquery.unobtrusive-ajax.js实现的ajax操作.首先确保的是在Web.config中配置节：
<add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
我们有一个_register.cshtml的PartialView :
<script type="text/javascript"> function ReloadForm(xhr) { $('#formcontent').html(xhr.responseText); } function ClearValidationErrors() { $('.validation-summary-errors').html(''); $('.input-validation-error').removeClass('input-validation-error'); $('.field-validation-error').remove(); }</script>@using (Ajax.BeginForm("IndexPost", "Home", Model, new AjaxOptions { UpdateTargetId = "formresults", HttpMethod = "Post", OnSuccess = "ClearValidationErrors", OnFailure = "ReloadForm(xhr)" })){ @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.") <div> <fieldset> <legend>Account Information</legend> <div class="editor-label"> @Html.LabelFor(m => m.UserName) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.UserName) @Html.ValidationMessageFor(m => m.UserName) </div> <div class="editor-label"> @Html.LabelFor(m => m.Email) </div> <div class="editor-field"> @Html.TextBoxFor(m => m.Email) @Html.ValidationMessageFor(m => m.Email) </div> <div class="editor-label"> @Html.LabelFor(m => m.Password) </div> <div class="editor-field"> @Html.PasswordFor(m => m.Password) @Html.ValidationMessageFor(m => m.Password) </div> <div class="editor-label"> @Html.LabelFor(m => m.ConfirmPassword) </div> <div class="editor-field"> @Html.PasswordFor(m => m.ConfirmPassword) @Html.ValidationMessageFor(m => m.ConfirmPassword) </div> <p> <input type="submit" value="Register" /> </p> </fieldset> </div>}
上面的代码，我们使用了AjaxOptions，这样帮我们指定要更新UpdateTargetId，调用成功要执行的Js function，以及失败以后执行Js function. 这里当我们的ajax调用成功后我们返回一个叫”_result.cshtml”的partialView，内容是这样的:
<h2>Thanks for registering!</h2><p>You have successfully registered</p>
在_Layout.cshtml中定义一个header节:
@if(IsSectionDefined("Header"))
{
@RenderSection("Header")
}
下面是主要用示演的Index.cshtml的内容. 你可以看到一个id叫formresults，AJAX调用成功后将会更新它:
@model AjaxTest.Models.RegisterModel@{ ViewBag.Title = "Home Page";}@section Header{ <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>}<h2>@ViewBag.Message</h2><div id="formcontent"> @{ Html.RenderPartial("_register", Model); }</div><div id="formresults"></div>
Controller的代码是这样的,IndexPost Action就是我们Ajax的Post 目标.
public ActionResult Index(){ ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(new AjaxTest.Models.RegisterModel());}[HttpPost]public ActionResult IndexPost(AjaxTest.Models.RegisterModel model){ if (ModelState.IsValid) { return PartialView("_results"); } HttpContext.Response.StatusCode = 500; HttpContext.Response.Clear(); return PartialView("_register", model);}
Model是这样的:
public class RegisterModel{ [Required] [Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Email address")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm password")] [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")] public string ConfirmPassword { get; set; }}
当View执行时我们看到这样的HTML，你可以看到Form 标签加上了 data-ajax,data-ajax-method等特性, 而input上data-* 用来做验证：
<form action="/Home/IndexPost" data-ajax="true" data-ajax-failure="ReloadForm(xhr)" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="ClearValidationErrors" data-ajax-update="#formresults" id="form0" method="post"> <div> <fieldset> <legend>Account Information</legend> <div class="editor-label"> <label for="UserName">User name</label> </div> <div class="editor-field"> <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span> </div> <div class="editor-label"> <label for="Email">Email address</label> </div> <div class="editor-field"> <input data-val="true" data-val-required="The Email address field is required." id="Email" name="Email" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> </div> <div class="editor-label"> <label for="Password">Password</label> </div> <div class="editor-field"> <input data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" /> <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> </div> <div class="editor-label"> <label for="ConfirmPassword">Confirm password</label> </div> <div class="editor-field"> <input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" /> <span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span> </div> <p> <input type="submit" value="Register" /> </p> </fieldset> </div></form>
你有兴趣可以查看Asp.net MVC 3 RTM的源代码，下面是来AjaxOptions类ToUnobtrusiveHtmlAttributes方法，你可以看到data-*与表单中生成的一致。
public IDictionary<string, object> ToUnobtrusiveHtmlAttributes() { var result = new Dictionary<string, object> { { "data-ajax", "true" }, }; AddToDictionaryIfSpecified(result, "data-ajax-url", Url); AddToDictionaryIfSpecified(result, "data-ajax-method", HttpMethod); AddToDictionaryIfSpecified(result, "data-ajax-confirm", Confirm); AddToDictionaryIfSpecified(result, "data-ajax-begin", OnBegin); AddToDictionaryIfSpecified(result, "data-ajax-complete", OnComplete); AddToDictionaryIfSpecified(result, "data-ajax-failure", OnFailure); AddToDictionaryIfSpecified(result, "data-ajax-success", OnSuccess); if (!String.IsNullOrWhiteSpace(LoadingElementId)) { result.Add("data-ajax-loading", "#" + LoadingElementId); if (LoadingElementDuration > 0) { result.Add("data-ajax-loading-duration", LoadingElementDuration); } } if (!String.IsNullOrWhiteSpace(UpdateTargetId)) { result.Add("data-ajax-update", "#" + UpdateTargetId); result.Add("data-ajax-mode", InsertionModeUnobtrusive); } return result;}
希望对您开发有帮助，您可能感兴趣的文章:
HTML5中custom data-*特性与asp.net mvc 3 表单验证
Html 5中自定义data-*特性
作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。
TAG:
