AspNet MVC4 教学-18:Asp.Net MVC4 客户端验证和服务端验证快速Demo

最新推荐文章于 2020-04-11 19:15:09 发布
最新推荐文章于 2020-04-11 19:15:09 发布
阅读量4.6k 收藏
点赞数
分类专栏： 2015-ASP.Net-MVC教学案例 文章标签： mvc4 asp.net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vinglemar/article/details/45957811
版权

A.首先创建Basic类型的mvc项目.

B.创建Model:

Student.cshtml:

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

namespace MvcRenderTest.Models
{
    public class Student
    {
        [Display(Name = "姓名")]    //设置要显示的字段名
        [Required(ErrorMessage = "您需要填写{0}")]  //设置为必须字段 已经错误提示
        [StringLength(50, MinimumLength = 2)]     //设置最大长度和最小长度
        public string Name { get; set; }

        [Display(Name = "年龄")]
        [Range(14, 70, ErrorMessage = "年龄填写不正确！")]  //设置 值范围
        public int Age { get; set; }

        [Display(Name = "身高")]
        [Range(typeof(decimal), "1.20", "2.50", ErrorMessage = "身高超出指定范围")]
        public decimal Height { get; set; }

        [Display(Name = "生日")]
        [DataType(DataType.Date, ErrorMessage = "{0}格式不正确")]  //设置数据类型以及错误提示
        public DateTime Birthday { get; set; }

        [Display(Name = "电话")]
        [Remote("CheckPhone", "Student", ErrorMessage = "{0}已被注册")]   //在指定的Conteroller中的通道（route）中验证数据
        public string Phone { get; set; }

        [Display(Name = "地址")]
        [DataType(DataType.MultilineText)]
        public string Address { get; set; }

        [Display(Name = "电子邮箱")]
        [RegularExpression(@"(\w)+(\.\w+)*@(\w)+((\.\w+)+)", ErrorMessage = "{0}格式不正确")]  //正则验证
        public string Email { get; set; }

        [Display(Name = "再次输入电子邮箱")]
        [Compare("Email", ErrorMessage = "{0}两次输入不一致")]   //设置比较两个字段的值
        public string EmailConfirm { get; set; }

        [Display(Name = "密码")]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [Display(Name = "备用电子邮箱")]
        [DataType(DataType.EmailAddress, ErrorMessage = "{0}格式不正确")]
        public string email_B { get; set; }
  
    }
}

Phone.cshtml: 

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

namespace MvcRenderTest.Models
{
    public class Phone
    {
        public int ID { set; get; }
        public string PhoneNum { set; get; }
    }
}


C.创建Controller:

HomeController.cs:

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

namespace MvcRenderTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

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

    }
}
StudentController.cs: 

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

namespace MvcRenderTest.Controllers
{
    public class StudentController : Controller
    {
        //
        // GET: /Student/
        private MvcRenderTestContext db = new MvcRenderTestContext();
        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /Student/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }
        public JsonResult CheckPhone(string Phone)
        {
            var result = false;
            if((db.Phones.Where(m=>m.PhoneNum==Phone).Count())==0)
            {
                result = true;
            }            
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        //
        // GET: /Student/Create

        public ActionResult Create()
        {
            return View("Create");
        }
        public ActionResult Create2()
        {
            return View("Create2");
        }
        //
        // POST: /Student/Create

        [HttpPost]
        public ActionResult Create(Student student)
        {
            if (ModelState.IsValid)
            {
                if (student.Name == "奥巴马")
                {
                    ModelState.AddModelError("", "奥巴马名称禁用.");
                    return View();
                }


                if (student.Name == "张三")
                {
                    ModelState.AddModelError("Name", "您的名字好奇特");
                    return View();
                }
                return View("OK");
            }
            else
            {
                return View();
            }
        }

        //
        // GET: /Student/Edit/5

        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /Student/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /Student/Delete/5

        public ActionResult Delete(int id)
        {
            return View();
        }

        //
        // POST: /Student/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}
PhoneCtrolloller.cs: 

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcRenderTest.Models;

namespace MvcRenderTest.Controllers
{
    public class PhoneController : Controller
    {
        private MvcRenderTestContext db = new MvcRenderTestContext();

        //
        // GET: /PhoneNum/

        public ActionResult Index()
        {
            return View(db.Phones.ToList());
        }

        //
        // GET: /PhoneNum/Details/5

        public ActionResult Details(int id = 0)
        {
            Phone phone = db.Phones.Find(id);
            if (phone == null)
            {
                return HttpNotFound();
            }
            return View(phone);
        }

        //
        // GET: /PhoneNum/Create

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

        //
        // POST: /PhoneNum/Create

        [HttpPost]
        public ActionResult Create(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Phones.Add(phone);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(phone);
        }

        //
        // GET: /PhoneNum/Edit/5

        public ActionResult Edit(int id = 0)
        {
            Phone phone = db.Phones.Find(id);
            if (phone == null)
            {
                return HttpNotFound();
            }
            return View(phone);
        }

        //
        // POST: /PhoneNum/Edit/5

        [HttpPost]
        public ActionResult Edit(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Entry(phone).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(phone);
        }

        //
        // GET: /PhoneNum/Delete/5

        public ActionResult Delete(int id = 0)
        {
            Phone phone = db.Phones.Find(id);
            if (phone == null)
            {
                return HttpNotFound();
            }
            return View(phone);
        }

        //
        // POST: /PhoneNum/Delete/5

        [HttpPost, ActionName("Delete")]
        public ActionResult DeleteConfirmed(int id)
        {
            Phone phone = db.Phones.Find(id);
            db.Phones.Remove(phone);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}
D.相应的View文件:

Home/Index.cshtml:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<h2>@Html.ActionLink("Phone Num","Index","Phone")</h2>
<h2>@Html.ActionLink("Create学生","Create","Student")</h2>
<h2>@Html.ActionLink("Create学生2","Create2","Student")</h2>

Student/Create.cshtml: 

@model MvcRenderTest.Models.Student

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Student</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
    @*       @Html.EditorFor(model => model.Name)*@
            @Html.TextBox("Name")
        @*  @Html.TextBoxFor(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 class="editor-label">
            @Html.LabelFor(model => model.Height)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Height)
            @Html.ValidationMessageFor(model => model.Height)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Birthday)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Birthday)
            @Html.ValidationMessageFor(model => model.Birthday)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EmailConfirm)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EmailConfirm)
            @Html.ValidationMessageFor(model => model.EmailConfirm)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.email_B)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.email_B)
            @Html.ValidationMessageFor(model => model.email_B)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Student/Create2.cshtml: 

@model MvcRenderTest.Models.Student

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) {

       @Html.EditorForModel()
        <p>
            <input type="submit" value="Create" />
        </p>

}

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

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
Student/OK.cshtml: 

@{
    ViewBag.Title = "OK";
}

<h2>验证OK!</h2>
<h2>@Html.ActionLink("Index","Index","Home")</h2>
--------------------------

注意:利用Model中的Phone类,采用EntityFramework技术,创建相应的Controller,与数据库有关的上下文.并产生相应的View文件.

下面抓图看解决方案目录:

E.通过Web.config内容的修改,观察页面提交后,刷新按钮状态的变化:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />
F.通过修改网页浏览器的Javascript的禁用和启用,观察页面提交后,刷新按钮状态的变化.








gCodeTop 格码拓普 老师
关注
专栏目录
ASP.NET MVC集成CAS客户端
CuiLanren的博客
04-12 3715
最近公司的项目需要使用单点登录，用的是耶鲁大学的CAS单点登录，爬了一堆坑，把这次爬坑的经历分享出来，希望可以帮助到广大.NET的程序员。首先去CAS官网上去下载.net版本的客户端代码。地址：https://apereo.github.io/cas/4.2.x/integration/CAS-Clients.html官方已经为我们写好的客户端，我们不需要做任何的更改，下载完成之后把项目引入到我们...
asp.net mvc 批量保存 服务端获取客户端传进的数组参数的处理方法
Jinfan Zheng 的专栏
01-18 1088
在Ajax + asp.net mvc 里，如果需要将一个数组作为参数传给Action来保存，这时候，需要对这个参数进行额外处理，如果不处理，服务端获取到的数组只是获取到数组的个数。而对象的属性是为Null的、直接看代码吧，有看不懂或不明白的地方可以给我留言。 这里实现的是一个通讯录批量保存数据的功能。
asp.net mvc 客户端验证
12-12
用于mvc框架中验证用户的输入，本例使用mvc2做的
ASP.NET MVC的客户端验证：jQuery的验证
weixin_34240657的博客
06-17 186
之前我们一直讨论的Model验证仅限于服务端验证，即在Web服务器根据相应的规则对请求数据实施验证。如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解Web服务器访问的压力。ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax进行客户端验证，在ASP.NET MVC 3.0中，jQuery验证框架被引入是我们可以采用Unobtrusive...
ASP.NET MVC+Colorbox做的一个Demo(二)
weixin_34419321的博客
11-04 80
接下来我们需要实现的是简历的修改。 第一，在ResumeController中添加两个Action，如下面的代码： // // GET: /Resume/Edit/5 public ActionResult Edit(int id) { Resume.Models.Resume resume = context.Resumes.Find(id); ViewBag.Na...
asp.net的MVC4 DEMO示例
06-05
基于aspnet的mvc4的一款示例程序，简单明了，非常适合新手
ASP.NET MVC4 Demo分步骤学习实例
07-10
ASP.NET MVC4.0 的一步一步实施过程实例，主要完成按照步骤，一个一个的实现具体的mvc项目，其中提供了EF,Autofac等参考。
谈谈如何在ASP.NET CORE MVC中创建web api
覃鸿宇的博客
04-11 3066
前言 Webapi也是一种服务，是属于服务端的，供客户端调用，类似webservice，但是与mvc请求方式不一样（MVC通过路由controller/action请求），Webapi通过不同的HTTP请求（get（查询）、put（更新）、post（增加）、delete）来表达不同的动作（CRUD），只关注数据。它非常适合构建移动客户端服务，显示端可以用H5等进行创建。 MVC与Web...
ASP NET MVC使用Oauth2 0实现身份验证
qq_43678418的博客
11-15 814
ASP NET MVC使用Oauth2 0实现身份验证
【C#】MVC调用WebApi的Demo
热门推荐
学海无涯苦作舟
01-25 1万+
MVC调用WebApi的Demo 目的 通过MVC项目调用写好的Api，完成数据库增删改查操作 WebApi项目 链接：https://blog.csdn.net/unclebober/article/details/86649800 MVC调用WebApi 遇到的问题 如何将请求的数据以JSON格式返回 当客户端调用某个Action方法并希望以JSON的格式返回请求的数据时，ASP.NET ...
asp net4 0 mvc4 C# Razor Demo
01-17
asp.net 4.0 Razor引擎C#的Demo例子，结合jQuery，iBatic，mySQL
ASP.NET mvc demo
03-07
这是asp.net mvc的一个简单小案例，适合新手学习mvc知识。
Asp.net MVC Demo
04-06
详细介绍了asp.net mvc 1.0的使用示例
ASp.Net MVC PagerDemo
05-09
分页小demo.基于bootstrap3，jPaginate。DI 希望对你有帮助
ASP.NET MVC框架精美Demo网站
06-29
演示了ASP.NET框架MVC模式，包括路由，SQL Server数据库操作，LINQ，CSS美化，JavaScript动画等等
MVC学习系列10---验证系列之服务器端验证
a0103122120的博客
07-20 182
这篇文章，我将会说到，使用数据注解API来进行服务端验证。ASP.NET MVC 框架在执行的时候，验证所有传递到控制器的数据，如果验证失败就把错误消息，填充到ModelState对象中，并且把这个对象传递给控制器，然后控制器中的方法，根据Modelstate的状态来判断，是否验证失败还是验证通过。 在这里，我将会使用两种方法来验证数据的合法性，一个是手动添加错误消...
ASP.NET全栈开发验证模块之在MVC中使用服务端统一验证
ddhrzyt4028的博客
07-20 105
首先声明，这篇博文是完善.ASP.NET全栈开发之在MVC中使用服务端验证 的，所以重复内容，我就不过多的阐述，很多问题都是在实践中去发现，然后再去完善，这篇博文也一样，建立在已阅 前面博文 的基础上。 在上一篇中，虽然我们完成了服务端验证，但我们还是需要在Action里调用验证器来进行验证，像这样。 [HttpPost] public Action...
MVC之服务器端验证
weixin_34218890的博客
01-18 126
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gCodeTop 格码拓普 老师

您的鼓励.我的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值