MVC学习系列13--验证系列之Remote Validation

大多数的开发者，可能会遇到这样的情况：当我们在创建用户之前，有必要去检查是否数据库中已经存在相同名字的用户。换句话说就是，我们要确保程序中，只有一个唯一的用户名，不能有重复的。相信大多数人都有不同的解决方法，但是ASP.NET MVC中，为我们提供了一个特性，就是Remote Validation，用它可以解决类似这样的问题。

Remote Validation调用了一个Ajax请求，可以是GET或者POST方式，接着调用方法，这个方法，至少要有一个参数，并且方法的返回类型是Json格式的。【MVC中通过JSOnResult来做到】，这个方法的参数就是要验证的实体的属性【必须，否则不能验证，参数的大小写无所谓。】，如果这个验证的方法返回值是true，那么就表名存在相同的用户，我们就返回false，给前台页面。表明验证不通过。

好了，直接说正题吧！

首先新建一个空白的MVC项目，在Model文件夹下，新建一个类RemoteUser：

  public class RemoteUser
    {

        public string Name { get; set; }

        public string Email { get; set; }

    }

然后建一个测试的数据类：

 public static class MyRemoteStaticData
    {
        public static List<RemoteUser> RemoteList
        {
            get
            {
                return new List<RemoteUser>()
            {
            new RemoteUser(){Name="Daniel",Email="[email protected]"},
            new RemoteUser(){Name="CFS",Email="[email protected]"}
            };
            }

        }
    }

在新建一个控制器MyRemoteController 【主要用来Remote验证】：

using Server_Side_Validation_IN_MVC.StaticData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Server_Side_Validation_IN_MVC.Controllers
{
    public class MyRemoteController : Controller
    {
        // GET: MyRemote
        public JsonResult RemoteValidate(string name) //这里的参数名字，必须要和视图中文本框控件的名字一样，但大小写无所谓
        {
            //如果存在用户名,即isExists=true
            bool isExists = MyRemoteStaticData.RemoteList.
                Where(s => s.Name.ToLowerInvariant().
                    Equals(name.ToLower())).FirstOrDefault() != null;
            //就向前台返回false，表明已经存在userName
            return Json(!isExists,JsonRequestBehavior.AllowGet);
        }

}

上面添加完验证之后，我们来修改一下Model实体：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Server_Side_Validation_IN_MVC.Models
{
    public class RemoteUser
    {
        [Remote("RemoteValidate", "MyRemote", ErrorMessage = "抱歉用户名已经存在！请重新输入！！！")]
        public string Name { get; set; }

        public string Email { get; set; }

    }
}

然后在新建一个测试的控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Server_Side_Validation_IN_MVC.Controllers
{
    public class UserController : Controller
    {

        public ActionResult AddRemoteUser()
        {
            return View();
        }
    }
}

添加AddRemoteUser视图，【注意这里，Remote Validation是需要引入Jquery插件和启用客户端验证的】

这里勾选引入脚本库，也主要是用来引入Jquery插件。

@model Server_Side_Validation_IN_MVC.Models.RemoteUser

@{
    ViewBag.Title = "AddRemoteUser";
}

<h2>AddRemoteUser</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>RemoteUser</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

然后修改一下默认的路由：

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "User", action = "AddRemoteUser", id = UrlParameter.Optional }
            );
        }

运行项目：

输入测试数据：CFS,按Tab键后，自动就进行验证了。

这里我们对Name字段就进行了Remote验证，现在我想对Email字段进行验证，需要使用到AdditionalFields，属性，还需要另外添加一个验证方法：

using Server_Side_Validation_IN_MVC.StaticData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Server_Side_Validation_IN_MVC.Controllers
{
    public class MyRemoteController : Controller
    {
        // GET: MyRemote
        public JsonResult RemoteValidate(string name) //这里的参数名字，必须要和视图中文本框控件的名字一样，但大小写无所谓
        {
            //如果存在用户名,即isExists=true
            bool isExists = MyRemoteStaticData.RemoteList.
                Where(s => s.Name.ToLowerInvariant().
                    Equals(name.ToLower())).FirstOrDefault() != null;
            //就向前台返回false，表明已经存在userName
            return Json(!isExists,JsonRequestBehavior.AllowGet);
        }

        public JsonResult RemoteValidationAddtional(string name, string email)
        {
            //如果存在用户名,即isExists=true
            bool isExists = MyRemoteStaticData.RemoteList.
                Where(s => s.Name.ToLowerInvariant().
                    Equals(name.ToLower()) && s.Email.ToLowerInvariant().Equals(email.ToLower())).FirstOrDefault() != null;
            //就向前台返回false，表明已经存在userName
            return Json(!isExists, JsonRequestBehavior.AllowGet);
        }
    }
}

然后修改对应的实体类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Server_Side_Validation_IN_MVC.Models
{
    public class RemoteUser
    {
        [Remote("RemoteValidate", "MyRemote", ErrorMessage = "抱歉用户名已经存在！请重新输入！！！")]
        public string Name { get; set; }

        //注意，这里的AdditionalFields="Name"，Name字段必须和Modle中的字段完全一样
        [Remote("RemoteValidationAddtional", "MyRemote", AdditionalFields = "Name", ErrorMessage = "抱歉Email已经存在！请重新输入！！！")]
        public string Email { get; set; }

    }
}

接着运行项目：

输入在测试类中写的测试数据：

这里就对两个字段进行了Remote Validation了。

上面使用了AdditionalFields 验证字段，如果我们想要验证不只一个字段，可以在AddtionalFiled里面添加，以逗号分隔就行了。

时间： 2024-12-27 16:25:17

MVC学习系列13--验证系列之Remote Validation的相关文章

ASP.NET MVC学习之模型验证篇

一.学习前的一句话 在这里要先感谢那些能够点开我随笔的博友们.慢慢的已经在博客园中度过一年半了,伊始只是将博客园作为自己学习的记录本一样使用,也不敢将自己的随笔发表到博客园首页,生怕自己的技艺不高,反倒成了笑话.但是随着时间的推移,再也按捺不住这种想法,于是就写了一篇随笔发表到博客园首页.让我意想不到的是有许多人都看了,而且也留下了评论.这让我鼓起勇气写了第二.三.四篇.到现在的连载,这里我希望那些从未发表过随笔的人可以尝试去发表,在这里他人不会嘲讽你,而是会给你更好的建议.说了这么多下面我们继

前端MVC学习总结——AngularJS验证、过滤器

前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令(directive) 3.1.支持AngularJS功能的指令 3.1.1.应用与模块(ng-app) 3.1.2.控制器(ng-Controller) 3.1.3.包含(ng-Include) 3.1.4.不绑定(ngNonBindable) 3.2.扩展表单元素的指令 3.2.1.ng-opti

Spring MVC学习笔记——服务器端验证

UserController.java package org.common.controller; import java.util.HashMap; import java.util.Map; import org.common.model.User; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validat

ASP.NET MVC学习之Ajax（完结）

一.前言 通过上面的一番学习,大家一定收获不少.但是总归会有一个结束的时候,但是这个结束也意味着新的开始. 如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发ajax十分的简单,而ASP.NET MVC学习到现在页面都是刷新的,所以这节就是ASP.NET MVC的最后一节,通过这节的学习我们将能够实现通过ajax提交表单,下面我们开始继续学习. 二.准备工作 1.首先确保引用了以下js库在_Layout中: 2.新建一个HomeController,然后在其

MVC学习系列10---验证系列之服务器端验证

这篇文章,我将会说到,使用数据注解API来进行服务端验证.ASP.NET MVC 框架在执行的时候,验证所有传递到控制器的数据,如果验证失败就把错误消息,填充到ModelState对象中,并且把这个对象传递给控制器,然后控制器中的方法,根据Modelstate的状态来判断,是否验证失败还是验证通过. 在这里,我将会使用两种方法来验证数据的合法性,一个是手动添加错误消息到ModelState对象中,另外一个方法是使用数据注解[Data Annotation] API,来做. 先来看看使用手动验证的

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

[Android学习系列13]关于Gridview的一些事

用mvc的思想去理解 数据源,adapter,xxxView的关系,写代码就轻松多了 先写一个简单的gridview 第一版:只有图片 xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent&q

ASP.NET MVC学习系列(二)-WebAPI请求(转)

转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax

MVC学习系列——ModelBinder扩展

在MVC系统中,我们接受数据,运用的是ModelBinder 的技术. MVC学习系列——ActionResult扩展在这个系列中,我们自定义了XmlResult的返回结果. 那么是不是意味着能POST一个XML数据类型给我们项目,这样的话,我们需要自定义一个XmlModelBinder来接受XML数据. 新建XmlModelBinder,继承于:IModelBinder 1 public class XmlModelBinder : IModelBinder 2 { 3 public obje