MVC验证08-jQuery异步验证

原文:MVC验证08-jQuery异步验证

本文主要体验通过jQuery异步验证。

在很多的教材和案例中，MVC验证都是通过提交表单进行的。通过提交表单，可以很容易获得验证出错信息。因为，无论是客户端验证还是服务端验证，总能找到与Model属性或验证特性对应的html元素和属性，并把错误信息显示出来。可是，在实际项目中，经常会遇到需要异步提交的情况。那么，如何把服务端的验证错误信息传递给前端视图呢？

□ 思路

1、服务端的验证错误信息是可以收集起来的以json形式传递个视图的。
2、服务端把错误信息存放在一个字典集合Dictionary<string, object>，让key是属性名，value是错误信息。
3、前台视图中，显示错误信息的元素id，比方说是Err_Name，当遍历从服务端传来的字典集合时，取出key，然后把错误信息动态赋值给$(‘#Err_‘ + key)。

View model

using System;
using System.ComponentModel.DataAnnotations;
 
namespace DataAnnotationAjax.Models
{
    public class Student
    {
        public int Id { get; set; }
 
        [Required(ErrorMessage = "姓名为必填项")]
        [Display(Name = "姓名")]
        public string Name { get; set; }
 
        [Required(ErrorMessage = "分数是必选项")]
        [Range(60, 100, ErrorMessage = "分数必须在60和100之间")]
        [Display(Name = "分数")]
        public int Score { get; set; }
 
        [Display(Name = "招收日期")]
        public DateTime Enrollment { get; set; }
    }
}

模拟一个仓储层，负责数据的初始化、添加和显示

using System;
using System.Collections.Generic;
using DataAnnotationAjax.Models;
 
namespace DataAnnotationAjax.Service
{
    public static class StudentRepository
    {
        private static int _idSeed = 1;
        private static readonly List<Student>  _students = new List<Student>();
 
        static StudentRepository()
        {
            Random rand = new Random();
            for (int i = 0; i < 3; i++)
            {
                var student = new Student();
                int id = _idSeed++;
                student.Id = id;
                student.Name = "姓名" + id.ToString();
                student.Score = (60 + Convert.ToInt16(rand.NextDouble()*40));
                student.Enrollment = DateTime.Now;
                _students.Add(student);
            }
        }
 
        public static void AddStudent(Student stu)
        {
            stu.Id = _idSeed++;
            stu.Enrollment = DateTime.Now;
            _students.Add(stu);
        }
 
        public static List<Student> GetStudents()
        {
            return _students;
        }
    }
}
 

BaseController

前台视图为了显示错误信息等，需要控制器传来的json可能包含如下构成：

1、是否验证通过：这个bool值很容易通过ModelState拿到。
2、错误信息的字典集合：每个控制器都有可能用到，可以把获取错误信息的字典集合方法放到一个基控制器中去。
3、再加一个福利：有时希望部分视图以字符串形式传递给某一视图，那就把根据视图名称和model返回视图字符串的方法也放到基控制器中。

展开using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DataAnnotationAjax.Controllers
{
    public class BaseController : Controller
    {
        /// <summary>
        /// 把部分视图转换成string
        /// </summary>
        /// <param name="viewName">部分视图名称</param>
        /// <param name="model">view model</param>
        /// <returns>部分视图字符串</returns>
        public string RenderPartialViewToString(string viewName, object model)
        {
            ViewData.Model = model;
            using (var sw = new StringWriter())
            {
                //根据部分视图名称+ControllerContext获得ViewEngineResult
                //ViewEngineResult中有View属性
                var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);

                //创建ViewContext对象实例
                var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);

                //把ViewEngineResult中的视图渲染到StringWriter实例中
                viewResult.View.Render(viewContext,sw);

                //获取视图string
                return sw.GetStringBuilder().ToString();
            }
        }

        /// <summary>
        /// 获取ModelState中的错误信息，以字典集合的形式返回
        /// </summary>
        /// <returns></returns>
        public Dictionary<string, object> GetErrorFromModelState()
        {
            var errors = new Dictionary<string, object>();
            foreach (var key in ModelState.Keys)
            {
                if (ModelState[key].Errors.Count > 0)
                {
                    errors[key] = ModelState[key].Errors;
                }
            }
            return errors;
        }
    }
}

HomeController

HomeController做了：

1、显示一个异步提交的视图Index.cshtml
2、完成了验证通过情况下的数据添加。
3、不管是否验证通过，都要返回json字符串。

using System.Web.Mvc;
using DataAnnotationAjax.Models;
using DataAnnotationAjax.Service;
 
namespace DataAnnotationAjax.Controllers
{
    public class HomeController : BaseController
    {
        public ActionResult Index()
        {
            return View(StudentRepository.GetStudents());
        }
 
        [HttpPost]
        public ActionResult AddStudent()
        {
            var student = new Student();
            var valid = TryUpdateModel(student);
            string studentPartialViewHtml = string.Empty;
            if (valid)
            {
                StudentRepository.AddStudent(student);
                var students = StudentRepository.GetStudents();
                studentPartialViewHtml = RenderPartialViewToString("Students", students);
            }
            return Json(new {Valid = valid, Errors = GetErrorFromModelState(), StudentsPartial = studentPartialViewHtml});
        }
    }
}
 

部分视图Students.cshtml

展开@model IEnumerable<DataAnnotationAjax.Models.Student>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Score)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Enrollment)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Score)
        </td>
        <td>
            @item.Enrollment.ToString("yy-MM-dd")
        </td>
    </tr>
}

</table>

Index.cshtml异步提交的界面

@model IEnumerable<DataAnnotationAjax.Models.Student>
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .errormsg {
        color: red;
    }
</style>
 
<div>
<table cellpadding="0px">
    <tr>
        <td>姓名</td>
        <td><input type="text" id="Name" /></td>
    </tr>
    <tr>
        <td></td><td colspan="2" 
              id="Err_Name" class="errormsg"></td>
    </tr>
    <tr>
        <td>分数</td>
        <td><input type="text" id="Score" /></td>
        <td>
            <button id="btnAddStudent">添加学生</button>
            <button id="btnClear">清空</button>
        </td>
    </tr>
    <tr>
        <td></td><td colspan="2" 
              id="Err_Score" class="errormsg"></td>
    </tr>
</table>
</div>
 
<div id="divStudent">
    @{Html.RenderPartial("Students",Model);}
</div>
 
@section scripts
{
    <script type="text/javascript">
        $(function() {
            $(‘#btnAddStudent‘).click(function() {
                var data = {
                    Name: $.trim($(‘#Name‘).val()),
                    Score: $.trim($(‘#Score‘).val())
                };
 
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: ‘@Url.Action("AddStudent", "Home")‘,
                    data: data,
                    dataType: "json",
                    success: function(data) {
                        if (data.Valid) {
                            $(‘#divStudent‘).html(data.StudentsPartial);
                            $(‘input‘).val("");
                            return;
                        }
                        $.each(data.Errors, function(key, value) {
                            if (value != null) {
                                $(‘#Err_‘ + key).html(value[value.length - 1].ErrorMessage);
                            }
                        });
                    },
                    error: function(xhr) {
                        alert(xhr.responseText);
                        alert("数据没有能提交到服务器！");
                    }
                });
            });
 
            $(‘#btnClear‘).click(function() {
                $(‘.errormsg‘).html("");
                $("input").val("");
            });
 
            $("input").keyup(function() {
                var $errorDiv = $("#Err_" + this.id);
                if ($errorDiv.html() !="") {
                    $errorDiv.html("");
                }
            });
        });
    </script>
}
 

几个关键点：
1、显示错误信息的元素id的命名有讲究的：Err_Name，Name与Model中的属性一致。
2、遍历服务端传来的错误信息字典集合时，对每个属性，即key，拿的是最近一次错误：$(‘#Err_‘ + key).html(value[value.length - 1].ErrorMessage)。

没有填写信息报错：

填写分数不在定义区间报错：

全部填写正确，验证通过，把部分视图以string形式返回并加载到页面区域中：

MVC验证08-jQuery异步验证,布布扣,bubuko.com

时间： 2024-11-10 00:14:10

MVC验证08-jQuery异步验证的相关文章

MVC验证11-对复杂类型使用jQuery异步验证

原文:MVC验证11-对复杂类型使用jQuery异步验证 本篇体验使用"jQuery结合Html.BeginForm()"对复杂类型属性进行异步验证.与本篇相关的"兄弟篇"包括: MVC验证08-jQuery异步验证    MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证    MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 准备工作 □ js方面:1.jquery的某个版本2.jquery.validate.js3.jquery

ASP.NET MVC验证 - jQuery异步验证

本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性或验证特性对应的html元素和属性,并把错误信息显示出来.可是,在实际项目中,经常会遇到需要异步提交的情况.那么,如何把服务端的验证错误信息传递给前端视图呢? □ 思路 1.服务端的验证错误信息是可以收集起来的以json形式传递个视图的.2.服务端把错误信息存放在一个字典集合Dictionary<s

ASP.NET MVC的客户端验证：jQuery的验证

http://www.cnblogs.com/artech/archive/2012/06/17/client-validation-01.html 之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解Web服务器访问的压力.ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax进行客户端验证,在ASP.NET MVC 3.0中,jQuery

ASP.NET MVC的客户端验证：jQuery验证在Model验证中的实现

原文:ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现 在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelValidator中,而最终的验证规则定义在相应的ValidationAttribute中:而客户端验证规则通过HtmlHelper<TModel>相应的扩展方法(比如TextBoxFor.EditorFor和Edid

ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的

在上一篇"ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建"中了解了ASP.NET异步验证是如何创建表单元素的,本篇体验jquery.validate.unobtrusive.js异步验证的全过程. 在jquery.validate.unobtrusive.js文件的尾部看到了如下的一个调用: $(function () { $jQval.unobtrusive.parse(document); }); 可见,通过把当前页的document对象传给$jQval.u

MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小

本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new {enctype = "multipart/form-data"}) {)%> <input name ="uploadFile" t

MVC验证10-到底用哪种方式实现客户端服务端双重异步验证

原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳理.归纳出一个MVC异步验证的通用解决思路.本篇主要涉及: 1.通过Ajax.BeginForm()方式,返回部分视图显示验证信息.2.通过jQuery+Html.BeginForm()方式,返回部分视图显示验证信息.3.通过jquery,返回json字符串,json字符串中包含部分视图及验证信息.

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

在MVC应用程序中使用jQuery的验证

呵呵,觉得很久没有写博客了,均是工作忙于公司的ERP系统,这是正确的,因为这才是真正的工作. 今天想写点在MVC应用程序中,使用jQuery来验证.在进行之前,还是先回看一下<MVC会员注册>http://www.cnblogs.com/insus/p/3439599.html 这里有些问题需要改正的,如密码文本框,需要把type="text"改为type="password",这样在输入密码时,就不再是明显的了. 另外,所有文本框均没有做验证,是否为必