目录
一、Controller(控制器)向View(页面客户端)传输数据
二、View(页面客户端)向Controller(控制器)传输数据
三、Login页面的生成与代码介绍
一、Controller(控制器)向View(页面客户端)传输数据
1、分为四种方式
1.1 ViewBag 和 ViewData
属性:可以作为 View视图和控制器传输的桥梁
无法跨页面
控制器端
public ActionResult Index() { //ViewBag 可以作为 View视图和控制器传输的桥梁 //ViewData和ViewBag 两种完全相同的功能 写法上有些区别 //一般存放一些不主要的数据 //无法跨界面 ViewBag.Content = "这是控制器Controller里的数据"; ViewBag.ZName = "这是Zname"; ViewBag.ZAge = "这是ZAge"; ViewData["Name"] = "张三"; return View(); }
View页面端
@{ ViewBag.Title = "Index"; } <h2>Index</h2> @ViewBag.Content @ViewBag.ZName @ViewBag.ZAge <p> @ViewData["Name"] </p>
ViewBag .属性名 ViewData ["属性名"]
属性名可以随便写 但要保证和View端的一样 这样就可以调用到
1.2 TempData
属性:存储之后读取一次数据就消失了,其他功能和Session一样
可以跨页面
控制器端
public void Demo() { //TempData 存储之后读取一次数据就消失了 //和Session其他功能相同 //可以跨页面 TempData["Hello"] = "world"; Response.Redirect(url: "~/Home/Demo2"); }
View端
@{ ViewBag.Title = "Demo2"; } <h2>Demo2</h2> @TempData["Hello"]
TempData ["属性名"] 属性名需要页面调用的保持一致
Response.Redirect(Url:" ") 为重定向跳转页面
1.3 View(参数传递)
属性:return View有多个重载
常用的View(页面,模板页,实体数据)
三个都可单独传输,也可以空
控制器端
public ActionResult ShowData() { //主要数据传输通过 View传输 //View分为三个常用重载参数为 ViewName=View名字 MaterName=模板页名字 Mode=实体数据 //如果不指定ViewName 默认传给和 Action同名的View页面 //如果不指定MaterName 默认使用_ViewStart里模板页 return View("ShowData_2", "_Layout1", new Student { Name = "张三", Age = 18, Id = 1 }); }
Models->Student实体类端
namespace Study4.Models { public class Student { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } } }
View端
@*//声明 告诉系统传过来的Model类型 这样在写的时候Model.就会有提示 //一直要和View里传过来的一致*@ @model Study4.Models.Student @{ Page.Title = "在此处显示标题"; //页面上单独指定模板页 //Layout = "~/Views/Shared/_Layout1.cshtml"; } <div> <p>我是ShowData2</p> </div> @Model.Name @Model.Id @Model.Age
View端介绍
@model Study4.Models.Student 引用实体类,不引用的话写属性没有代码提示
@Model.Name 输出实体类属性
实体类数据是从控制器端传过来的
二、View(页面客户端)向Controller(控制器)传输数据
1、通过Action参数接收数据
2、通过Request.QueryString[""] 和 Request.Form[""]接收数据
1、通过Action参数接收数据
控制器端
[HttpGet] public ActionResult Index(string name) { return Content(name); }
显示端 View
[HttpGet] 和 [HttpPost] 是限制作用,表面这个Action方法只接收某种请求
如果没做限制 POST表单的Name属性提交可以进入这个Action方法
比如下面这个
<form action="/Demo/Index" method="post"> <input type="text" name="name" /> <button>提交</button> </form>
2、 Request接收数据
public ActionResult Index(string name) { Request.QueryString["name"] 和使用参数同等 Request.Form["name"] 和使用参数同等 return Content(name); }
Request.QueryString接收Get请求的单个参数
Request.Form 接收Post请求表单所有参数
三、Login页面的生成与代码介绍
1、Login登录会分为两个Action方法
1.1 用作处理登录数据的
//用作处理 显示登录结果 [HttpPost] //POST 请求通过表单提交过去的 才能进入POST请求方法里 // [ValidateAntiForgeryToken] 防伪标记 提交POST的界面必须要有防伪标记才能提交到这里 //保证提交的页面是自己写的正常页面 防止伪造表单提交到这里 // [ValidateAntiForgeryToken] public ActionResult Logins(Models.LoginViewModel model) { if(ModelState.IsValid) //数据校验 校验内容在Models->LoginViewModel 里 { //表单要和属性名对应 if (model.Name == "admin@gmail.com" && model.Password == "123456") return Content("OK"); else { ModelState.AddModelError("","账号密码有误"); return View("Login",model); } } ModelState.AddModelError("", "数据有误"); return View("Login", model); }
用作处理登录数据的Action介绍:
1、页面通过表单传输到控制器方式为 实体类参数接收
2、ModelState.IsValid 用来校验属性的一些设置 比如(不为空 长短限制之类的)
3、[ValidateAntiForgeryToken] 防伪标志,页面对应也必须有,没有的无法请求过来。
可以用作安全限制吧,保证一些非法表单提交
1.2 用作显示的View的 这个控制器需要生成View页面
//用作显示 [HttpGet] public ActionResult Login() { return View(); }
生成方法及页面代码介绍:
1、在Login()方法处右键 选择 添加视图
2、Login 选择为Create 并选择视图类和JS 如下图
3、生成后代码介绍
@model Study4.Models.LoginViewModel @{ ViewBag.Title = "Login"; } <h2 class="labels">Login</h2> <style> .labels{ color:red } </style> @using (Html.BeginForm("Logins", "Demo")) //BeginForm生成一个表单 默认给当前同名Login界面提交 //也可以像现在这样指定 Action和Controller { @Html.AntiForgeryToken() //防伪标记 <div class="form-horizontal"> <h4>LoginViewModel</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @*//htmlAttributes是控制input里type属性的*@ @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" ,title="鼠标提示"}) <div class="col-md-10"> @*文本框*@ @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @*显示Models定义的限制 错误显示*@ @Html.ValidationMessageFor(model => model.Name, "", 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="登录" 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>
1、Html.BeginForm("Logins", "Demo") :可以选择提交到那个控制器的Action方法,默认 不输入提交到同名的Login Post请求Action方法里
2、 @Html.AntiForgeryToken() : 防伪标记,有这个才可以正确提交到Action方法。
3、 @Html.ValidationSummary : Action方法里的ModelState.AddModelError
("", "数据有误");会在这块显示出来
4、@Html.LabelFor :lable标签,C#写法,引用实体类 model.Name
5、@Html.EditorFor :文本框标签,C#写法,引用实体类 model.Name
6、@Html.ValidationMessageFor: Span标签,C#写法。用于实体类定义的一些(非
空,长度限制等一些信息的显示)
7、页面默认用的是BootStrap里一些JS样式,如果想自己设置就需要像页面
里 htmlAttributes: new {@class=} class自己写样式名
4、实体类LoginViewModel介绍
namespace Study4.Models { public class LoginViewModel { [Display(Name="账号")] [Required(ErrorMessage ="不可为空"),StringLength(20,MinimumLength =2,ErrorMessage ="长度必须是2-20")] //设置只读和长度限制 [EmailAddress(ErrorMessage ="邮件名有误")] //邮箱验证 public string Name { get; set; } [Display(Name = "密码")] //控制自动生成表单的Label [Required,MinLength(6)] //设置只读和长度限制 [DataType(DataType.Password)] //告诉文本框页面这是是密码 用.....显示 public string Password { get; set; } } }
1、[Display(Name="账号")]:可以改变View界面的Lable显示
2、[Required(ErrorMessage ="不可为空"),StringLength(20,MinimumLength =2,ErrorMessage ="长度必须是2-20")] 设置只读和长度限制
3、 [EmailAddress(ErrorMessage ="邮件名有误")] 邮箱格式判断
4、[DataType(DataType.Password)] 设置为密码格式
下面是几张View图
总结
分享了关于View和Controller之间传输数据 和 Login页面以及实体类的一些介绍