MVC 是通过路由定位到对应的Action进行页面显示,那如何将后台的数据传递到前端的cshtml页面呢?如下我们来看几种传值方式。
ViewBag,ViewData,TempData,Model 主要有这四种方式。
1.ViewBag 是动态类型dynamic,可以理解为往对象中设置任意属性, 有点类似js中的对象,使用很简单,如下就可以添加属性并赋值。
//后端赋值 ViewBag.Name = "ankeyliu";
@*前端取值,@相对于VUE中的{} 输出数据*@ @ViewBag.Name
2.ViewData 对象是ViewDataDictionary 类型,从类型中可以看出使用方式应该是类似键值对,赋值方式如下:
//向ViewData中添加键值对 ViewData["Name"] = "ankeyliu";
@*前端取值,@相对于VUE中的{} 输出数据*@ @ViewData["Name"]
@ViewBag.Name
也可以通过ViewBag进行取值,说明两个类型引用的对象地址为同一地址。
ViewBag 和ViewData都是存放一些不重要的数据,什么是不重要的数据呢?例如在新闻页面中,标题和内容都是重要数据,旁边的广告不是重要数据,可以放在这两个对象中。
3.TempData 是一个Session类型,赋值后可以在其它页面页面中读取,但只能读取一次就被清空了,使用方式于ViewData一致为键值对类型。
4.Model 对象类型,MVC支持将对象通过View()方法传递到前端页面,前端页面有2种类型页面即(强类型和弱类型)。
后端action中返回一个对象
return View(new Models.Student() { Id = 1, Name = "ankeyliu", Age = 10 });
1. 强类型页面,强类型页面可以理解为页面中支持语法提示,需要在页面中显示指定需要使用的数据对象模型是什么。
如下指定为Student类型,使用的使小写的model进行指定,输出时使用大写的Model进行数据输出
@model ASP.NET_MVC基础_2.Models.Student @{ ViewBag.Title = "ShowData"; } <h2>ShowData</h2> @Model.Id @Model.Name @Model.Age
如果将对象属性写错了,则会有错误提示,可以使错误在开发时发现。
2.弱类型页面即页面支持错误提示,在页面中不进行model类型指定,在输入错误时,编译器不进行提示,错误只能在运行时发现。
View()方法有多个重载,我们常用有如下几种我们简单学习下
view 可以单独创建不一定要有对应的action
1.View(),当不传参数时,则返回与控制器同名的View页面,且不传任何参数
2.View(string viewName),显示指定一个View页面的名称, 可以显示指定的页面,可以使用带action的页面,也可以指定不带action的页面
3.View(string viewName,string masterName),显示指定一个View页面名称,和母版布局页面,可有将页面换一个母版页进行显示。
前端页面提交数据主要有两种方式,即Get请求和Post请求,我们都比较熟悉。
get通过url的参数将数据提交到控制器中。
post通过表单将数据提交到控制器中。
MVC支持数据验证功能,需要在对象上加入验证属性
using System.ComponentModel.DataAnnotations;
如下添加一个viewmodel类进行登陆页面制作。
public class LoginViewModel { [Required(ErrorMessage ="请填写邮箱"),StringLength(50,ErrorMessage ="长度超出",MinimumLength =10)] [EmailAddress(ErrorMessage ="邮箱格式不正确")] [Display(Name ="邮箱")] public string Email { get; set; } [DataType(dataType: DataType.Password)] [Display(Name = "密码")] [Required, MinLength(6)] public string Password { get; set; } }
2.添加控制器
我们一般会使用一对控制器,一个为Get请求获取表单页面,一个为Post请求提交表单数据存储到数据库中,这里添加的是空的控制器。
[HttpGet] public ActionResult Login() { return View(); } [HttpPost] public ActionResult Login(Models.LoginViewModel model) { return Content("Post"); }
3.添加视图页面
其实登录页面比较类似于数据创建,我们使用create进行改造。主要需要引用脚本库,这样会自动添加验证的脚步文件。
@model ASP.NET_MVC基础_2.Models.LoginViewModel @{ ViewBag.Title = "Login"; } <h2>Login</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>LoginViewModel</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <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"> @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Password, "", 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-3.4.1.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
自动创建的文件中可以看到增加了很多验证规则,mvc自动使用bootstrap前端框架,可以根据真实需求进行改造,当不需要bootstrap样式代码可以进行删除,添加自己的css样式代码
我们将后端控制器代码修改下,使用ValidateAntiForgeryToken进行规则验证:
[HttpGet] public ActionResult Login() { return View(); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Login(Models.LoginViewModel model) { if (ModelState.IsValid) { if (model.Email == "admin@qq.com" && model.Password == "123456") return View(); else { ModelState.AddModelError(key: "", errorMessage: "账号密码错误"); return View(model); } } ModelState.AddModelError(key: "", errorMessage: "数据填写有误"); return View(model); }