MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证

简介: 原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证MVC中,关于往后台提交的方法有: 1、Html.BeginForm():同步 2、Ajax.BeginForm():异步 3、js或jQuery提交后台 本文体验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"});
            }
        }
    }
}
 

让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);
            }
        }
 
    }
}
 

无论验证成功或失败,都返回强类型部分视图。

 

  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>
 

  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>
}
 

  Home/Success.cshmtl视图

@model XHelent.Models.Registration
 
<h2>恭喜,注册成功了!</h2>
<p>注册号为:@Model.RegisrationUniqueId</p>
 

没有填写效果:

图像 1

 

年龄小于18效果:

图像 2

 

输入正确效果:

图像 3


==总结

使用Ajax.BeginForm()虽然可以实现异步提交并验证,但,如果放到后台管理系统的背景下,返回部分视图可能不是很方便。

目录
相关文章
|
5月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
50 0
|
5月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
75 0
|
2天前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
22 6
|
6天前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
11 1
|
9天前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
14 2
|
18天前
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
21 6
|
24天前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
18 4
|
22天前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
15 1
|
25天前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
13 1
|
9天前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
12 0