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); }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。