004.MVC视图、辅助方法
一.视图基础-
视图定义:
用户界面,是显示应用程序用户界面(UI)组件
Web应用程序:页面
作用:
1.输出/显示模型数据
2.出入提交
视图建议在View文件夹位置存储视图
视图引擎(了解):本意发动机,这里指的是:处理视图的软件(框架内部)
ASP.NET Web窗体提供了一种视图引擎,称为Web窗体引擎
ASP.NET MVC1及MVC2版本中支持Web窗体引擎
ASP.NET MVC3版本除了支持Web窗体引擎,还提供了一种新的视图引擎,称为Razor(视图)引擎
Razor引擎更加清晰,简洁,建议在项目中使用
在ASP.NET MVC3.0两种视图引擎
1.Web窗体视图引擎[aspx视图引擎]:处理Web窗体[处理.aspx文件的]
2.Razor视图引擎[Razor引擎]:处理Razor视图[处理.cshtml文件的]
Web和Razor引擎声明变量的区别:
Web引擎变量<%=name%> :声明字符比较多,使用不方便
Razor引擎变量@name :更加的清晰简洁,优化页面的性能,节省流量
Razor视图引擎的特点优点:
Razor视图的特点优点 设计原则:
清晰简洁,用@代替了曾经Web窗体中的<%= %>
尽可能的干净,上一个请求的状态一般没有特殊的需求就不做保留(不保留状态)
Razor:本意剃须刀,这里比喻这种类型的视图干净简洁,尽量使用!
工作原理:
Web客户端(浏览器)→服务器端处理
↑ ↓
↑ NET Framwork
↑ ↓ ↘
↑ ↓ ↘
↑ ASP.NET Web窗体
↑ MVC路由组件 →→ 视图引擎
↑ ↓
客户端处理←← Razor视图引擎
Razor引擎:
1.Razor引擎会编译程序中的视图.视图会转换为C#的类,然后再编译
Razor视图的文件后缀是.cshtml
Razor视图的内容包含:
a.静态内容,如:html标记(HTML课程,CSS)
b.动态内容:动态内容是在运行时生成(客户端脚本[语言]编写的+服务端脚本语言[编写的])(javascript,jquery,ajax等客户端技术)
答案:写法和web窗体一样
2.重点学习:
使用服务端脚本[语言]编写的动态内容
二.Razor语法
注意:
不适合用Razor语法在Razor页面中写大量的复杂的业务逻辑,可以写少量的和视图相关的逻辑!
学习新的语法:
Razor语法[@开头的语法]遵循C#的语法规范
方法1:
内联代码(代码呈现块语法),将C#代码嵌入在Razor输入文件中
针对少量的试图逻辑,如if或foreach代码片段等,必须使用页的默认的服务端语言编写,在呈现页面的过程中执行
a.用内联代码,有两种写法
1>@单条语句,不需要分号结束.如:@ViewBag.Title 用来进行调用(变量,方法)
2>@{...}单条语句或多条语句,需要分号结束.如:@{ViewBag.TiTle="Index";} 用来声明或定义变量[为变量赋值]不呈现!相当于在控 制器中写!
b.语句:
@if
@foreach
@for
c.注释@* *@
d.()@的使用
练习:for foreach输出一个表,有50行,3列
方法2:
什么是HTML辅助方法:
是ASP.NET MVC对html元素的封装>>方法>>最后:浏览器中仍是Html元素
为什么封装:
方便使用,便于维护
经验!! 注意:
大部分html辅助方法,确实方便使用,便于维护,但是也不咋地!!
也有一些html元素没有对应的封装!Sumit经常用,没有封装!
设计Razor网页时:Html控件+html辅助方法如何选择?!
文本框: 有 有 都可以(喜欢用哪个用哪个,个人爱好,如果要绑定显示模型的数据,最好用html辅助方法)
怎么封装:方法名>>标记的类型 input type="?"
参数>> 标记的属性id="?" name="?"
标记有很多属性
参数不是很多>>封装了,对应了常用的一些标记属性
不常用的标记属性,如果需要怎么办(用匿名数据类型)
代码例子:
html辅助方法代码:
@Html.TextBox("t1")<br />
@Html.TextBox("t2",123)<br />
@Html.TextBox("t3", "33", new { style="background-color:red;color:black;width:300px;"})
浏览器自动转换成html的代码:
<input id="t1" name="t1" type="text" value="" /><br />
<input id="t2" name="t2" type="text" value="123" /><br />
<input id="t3" name="t3" style="background-color:red;color:black;width:300px;" type="text" value="33" />
MVC框架中提供了HTML辅助方法,帮助生成常见的单个HTML元素或多个HTML元素,便于维护视图.
三.弱类型的HTML辅助方法:
1.URL辅助方法:
最后本质:路径;[直接手写]
优点:
可读性好,可维护,可以使用~表示从根目录出发去找文件!~属于C#中的语法
注意:
图像控件,找不到了,建议用URL辅助方法指定路径
<img src="../../Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png" />
<img src="@Url.Content("~/Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png")" />
路径>>URL辅助方法>>路径
@Url.Content("~/images/my.bmp")<br />
/images/my.bmp
@Url.Action("Login","Student")<br />
/Student/Login
@Url.RouteUrl(new { Controller="C",action="F"})
/C/F
1.布局页:
布局页用途和母版页一样,有时也叫母版页
layout master
2.内容页:包含部分标记(不包含html,head,body)
3.完整的页面=布局页+内容页
4.@RenderBody() 呈现页面体 用途:占位方法(占位控件)
5.如何让内容页选择布局页
Layout = "~/Views/Shared/_Layout.cshtml";
6.练习:创建两个布局页
创建一个方法 一个内容页,让内容页使用第一个布局页,
然后再让这个内容页使用第二个布局页
7.扩展:可以把以前的母版页或者好的主页 标记考到Razor,布局页中,在合适的位置:@RenderBody()
2.HTML[输入]辅助方法
1.Html.TextBox
2.Html.Password
3.Html.Hidden
4.Html.TextArea
5.值 string 类型
练习:首先创建一个典型的实体类,然后使用以上控件 值string类型
单选按钮使用注意
1:一般使用三个参数的重载,是否选中由第三个参数决定,一般用于多项,但是最多只能选择一项的字段(性别,是否)
比较实用的用法是怎么的?怎么正确合理的使用?
见:Day03MVC视图Razor语法HTML辅助方法视图输出和显示模型数据>>F2视图
复选框的使用
1:比较简单
@Html.CheckBox("cb",false)体育<br />
@Html.CheckBox("cb",true)音乐<br />
@Html.CheckBox("cb",true)美术<br />
下拉列表的使用
@Html.DropDownList("ddl1",new SelectList(new string[]{"男","女","未知"}))<br/>
@Html.DropDownList("ddl2",new SelectList(new string[]{"男","女","未知"}),"请选择")<br/>
记住语法!!!!!*****
------------------------------------------------------辅助方法------------------------------------------
一.强类型的Html输入辅助方法
弱类型:Html.方法名()
强类型(3个条件):
1.Html.方法名For()
2.当前页面必须声明:@model...模型
控制器必须使用模型传值给视图
3.Html.方法名For(参数Lambda表达式)
Html.TextBoxFor(x=>x.t)
4.注意:如果是集合类型的模型,参数lambda怎么写 x=>o.Id//两个不能一样
使用时用哪一种:
1.一般情况使用强类型的比较多!(和模型联系的密切)
2.但对于DropList,ListBox常用弱类型的
练习1:
首先创建一个典型的实体类,然后使用TexBox;Password;Hidden,TextArea的强类型输入辅助方法来显示对应的字段的值来显示数据
练习2:
首先创建一个典型的实体类,返回多个对象给视图,在视图中使用强类型的输入辅助方法显示,TextBox常用
练习3:首先创建一个典型的实体类,返回一个对象给视图,在视图中使用模型模版辅助方法显示P20的方法都调用一下
二.模型模版输入辅助方法
只需指定想要编辑的模型对象或属性,其余的细节工作由MVC框架计算并呈现
根据字段的类型,自动选择合适的对象来显示
控制器代码:
public ActionResult Index2()
{
Users users = new Users
{
Id = 1,
Name = "张三",
Birthday = DateTime.Now.AddYears(-20),//20岁生日,今天-20年
Sexstring = "男",
Sexbool = true
};
return View(users);
}
视图代码:
<div>
<h2>使用模型模版的输入辅助方法(弱类型)</h2>
@Html.EditorForModel()<br />
<hr />
@Html.Label("Name")<br />
@Html.DisplayText("Name")<br />
@Html.Display("Name")<br />
@Html.Editor("Name")<br />
<hr />
@Html.DisplayText("Sexbool")
@Html.Display("Sexbool")
<hr />
<h1>可编辑的</h1>
@Html.Editor("Name")<br />
@Html.Editor("Sexbool")<br />
<hr />
<h2>使用模型模版的输入辅助方法(强类型)</h2>
@Html.EditorForModel()<br />
<hr />
@Html.LabelFor(x=>x.Name)<br />
@Html.DisplayTextFor(x=>x.Name)<br />
@Html.DisplayFor(x=>x.Name)<br />
@Html.EditorFor(x=>x.Name)<br />
<hr />
@Html.DisplayTextFor(x=>x.Name)
@Html.DisplayFor(x=>x.Sexbool)
<hr />
<h1>可编辑的</h1>
@Html.EditorFor(x=>x.Name)<br />
@Html.EditorFor(x=>x.Name)<br />
<hr />
</div>
模型代码:
public class Users
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
public string Sexstring { get; set; }
public bool Sexbool { get; set; }
}
三.视图控制器输入提交
表单辅助方法
视图输入提交(1)-提交按钮
视图输入提交 视图输入提交(2)-超链接
GET请求和POST请求
↗
1..ASP.NET MVC-视图-控制器
↘ 控制器方法接收输入
通过上下文对象获取
控制器方法接收输入 通过操作方法参数获取
模型绑定
2.视图输入提交
页面工作:
实际使用 两种情况:
a.查看[浏览新闻]发出一个请求
get读操作
b.交互[互动](见加法程序2):
发出第1个请求 得到一个初始页面 F1
get首次加载 输入信息,
发出第2个请求 提交>>处理 F2
post提交处理(读写)
登录
注册
添加,修改......
*重点:输入,提交,对提交内容进行处理*****
输入提交的方式有两种:
post方式:表单输入域的信息:大量,安全性要求高的!
get方式 :url查询字符串的信息 http://...?a=123&b=ok
ASP.NET MVC中Post提交:(表单输入域的内容)
提交页面中的内容,表单输入域的内容
1>有表单
表单的3种写法:
写法1:原始
<form action="/Home/F" method="post"></form>
写法2:html表单辅助方法
@{Html.BeginForm();}
@*写控件*@
@{Html.EndForm();}
写法3:html表单辅助方法(常用 OK!!)
@using (Html.BeginForm())
{ }
2>使用Submit提交按钮
只有1种写法:原始
ASP,NET MVC中get提交:(url查询字符串的信息)
1>url超链接 写法3:
写法1:原始 重载?
<a href="/Home/F3?a=123&b=OK">插入</a>
写法2:超链接辅助方法 重载
控制器处理GET和POST请求:
-GET请求用于读操作,即首次加载
-POST请求用于写操作,即提交处理,如增,删,改等
特性(*****):
因为一个web交互,需要两个请求=两个方法,索性,两个方法运用重载,同时标注是get 方法还是post方法
实际项目:登录 Login(get),Login(post)
添加 Insert(get),Insert(post)
见Day01MVC加法程序方法2
两个视图方法写成重载方法,引入两个特性[httpget]和[httppost]
首次加载使用[httpget]
处理时使用[httppost]
控制器代码:
public class CController : Controller
{
// GET: /C/
//F1,F2改成了F同名方法重载
[HttpGet]//可以省略
public ActionResult F()
{
return View();
}
[HttpPost]//不能省略
public ActionResult F(M m)
{
//1.通过参数获得输入,自动获得
//2.处理
m.C = m.A + m.B;
//3.输出
//ViewBag.a = m.C;
ModelState.Clear();
return View(m);
}
模型代码:
public class M
{
public int A { get; set; }
public int B { get; set; }
public int C { get; set; }
}
视图代码:
<body>
@using (Html.BeginForm("F","C"))
{
<span>加数</span>@Html.TextBoxFor(x=>x.A)<br/><br/>
<span>被加数</span>@Html.TextBoxFor(x=>x.B)<br /><br />
<input id="Submit1" type="submit" value="计算" /><br />
@*<span>结果是:</span>@ViewBag.a*@
<span>@Html.TextBoxFor(x=>x.C)</span>
}
</body>
Global代码:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // 路由名称
"{controller}/{action}/{id}", // 带有参数的 URL
new { controller = "C", action = "F", id = UrlParameter.Optional } // 参数默认值
);
}
控制器方法接收输入信息:
*控制器方法需要从请求中获取数据,有两种主要方法:
方法1.通过操作方法参数获取(首选,用的比较多):
用模型,或者定义参数名称和输入控件名称一样
方法2.通过上下文对象获取:
Request
会话Session和Web窗体使用方法一样!
模型绑定[概念](Model Binding)2.1
ASP.NET MVC 自动(从请求中获取数据)转换和移入到模型的过程
常用的上下文对象:
属性 类型 说明
Request.Url Url 当前请求的URL
Request.UserHostAddress String 当前请求的IP地址
RequestForm 名称-数值对 通过Post方式发送的请求
RequestQueryString 名称-数值对 通过GET方式发送的请求参数
Request.Files
HttpContext.Session HttpSessionStateBase 浏览者的会话状态
