MVC中的视图
| authour： | chenboyi |
| updatetime： | 2015-04-26 19:19:53 |
| friendly link： |
目录：
7,视图引擎RazorViewEngine之 视图查找路径配置
8,视图引擎RazorViewEngine之 查找视图的方法
CodeSimple：
1 #region 1.0 弱类型视图 2 3 public ActionResult Index() 4 { 5 return View(new Pig() { Name = "小猪", Age = 1 }); 6 } 7 8 #endregion 9 10 #region 2.0 强类型视图 11 12 public ActionResult Index1() 13 { 14 return View(new Pig() { Name = "小猪", Age = 1 }); 15 } 16 17 #endregion
1 <!--Index.cshtml--> 2 @{ 3 Layout = null; 4 } 5 @using MVC知识点.Models 6 7 <!DOCTYPE html> 8 9 <html> 10 <head> 11 <meta name="viewport" content="width=device-width" /> 12 <title>Index</title> 13 </head> 14 <body> 15 <div> 16 17 @this.GetType().Assembly.Location 18 <br /> 19 20 @{
//弱类型视图Model为动态类型，运行时才能确定 21 Pig pig = Model as Pig; 22 23 if (pig != null) 24 { 25 <text>pig.Name = </text> @pig.Name 26 @:pig.Age= @pig.Age 27 } 28 } 29 </div> 30 </body> 31 </html>
1 <!-- Index1.cshtml --> 2 @{ 3 Layout = null; 4 } 5 @* 将当前视图指定为强类型视图 *@ 6 @model MVC知识点.Models.Pig 7 8 <!DOCTYPE html> 9 10 <html> 11 <head> 12 <meta name="viewport" content="width=device-width" /> 13 <title>Index1</title> 14 </head> 15 <body> 16 <div> 17 @this.GetType().Assembly.Location 18 <br /> 19 @{ 20 <text>猪名称=</text> @Model.Name 21 } 22 </div> 23 </body> 24 </html>
3.1 CodeSimple：
1 @{ 2 Layout = null; 3 } 4 @using MVC知识点 5 6 <!DOCTYPE html> 7 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-width" /> 11 <title>Index</title> 12 </head> 13 <body> 14 <div> 15 <hr /> 16 使浏览器将a标签当做 正常的html解析的三种写法<br /> 17 @* 1.0 Html的编码 *@ 18 @{ 19 var linkStr = "<a href='http://www.baidu.com'>跳转到百度</a>"; 20 @linkStr // 将a标签当做文本输出 21 <br /> 22 @:1.0.1 使浏览器将a标签当做 正常的html解析方式1 23 @Html.Raw(linkStr) 24 <br /> 25 <text>2.0 使浏览器将a标签当做 正常的html解析方式2</text> 26 MvcHtmlString html = new MvcHtmlString(linkStr); 27 @html 28 <br /> 29 @:3.0 使浏览器将a标签当做 正常的html解析方式3 30 HtmlString html1 = new HtmlString(linkStr); 31 @html1 32 } 33 34 <hr /> 35 <br /> 36 2.0 转译符号@@ 37 [email protected]<br /> 38 ivanyb@@ qq.com 39 40 <hr /> 41 <br /> 42 3.0 Razor中调用后台的方法<br /> 43 3.0.1 调用有返回值的方法 44 @Kits.ToJsonString("我爱北京天安门") 45 <br /> 46 3.0.2 调用无返回值的方法 47 @{Kits.cw("我爱北京天安门");} 48 <br /> 49 3.0.3 调用泛型方法 50 @(Kits.ToJString<string>("我顶你个肺"))<br /> 51 @{Kits.ToJString<int>(100); } 52 53 <hr /> 54 <br /> 55 4.0 在Razor视图中调用自己定义的方法 56 4.0.1 利用@@helper指令集 定义一个Razor的方法CreateH3 57 @helper CreateH3(int num) 58 { 59 for (int i = 0; i < num; i++) 60 { 61 <h3>h3 @i</h3> 62 } 63 } 64 65 <br /> 66 4.0.2 调用CreateH3方法 67 @CreateH3(5) 68 69 <hr /> 70 <br /> 71 72 5.0 系统中默认的string类型上的 转换方法和类型判断 73 @{ 74 var str1 = "1"; 75 str1.IsInt(); //true 76 int iid = str1.AsInt(); //将字符串转换成整数 int.TryParse() 77 } 78 79 <hr /> 80 <br /> 81 6.0 直接调用上下文中的相关属性和方法 82 @HttpContext.Current.Response 83 @Response 84 @Request.QueryString["id"] 85 @Server.UrlEncode(linkStr)
86 87 </div> 88 </body> 89 </html>
1 //Kits.cs 2 3 using System; 4 using System.Collections.Generic; 5 using System.Linq; 6 using System.Web; 7 8 namespace MVC知识点 9 { 10 public class Kits 11 { 12 public static string ToJsonString(string ss) 13 { 14 return ss; 15 } 16 17 public static void cw(string ss) 18 { 19 Console.WriteLine(ss); 20 } 21 22 public static T ToJString<T>(T t) 23 { 24 return t; 25 } 26 } 27 }
3.2 Razor补充：
3.2.1 @: astr 作用：会将@:后面的变量 当做字符串输出 ,注意：@:只能写到@{} 花括号中
3.3.2 @表示转义符 输出@astr到网页则必须写：@@astr ，只能 @{} 花括号外
@:astr;
3.3.3 <text><text> 将包括在其中的变量当做字符串输出，而不是输出变量的值，<text></text>只能写在@{} 花括号中
<text>astr</text>
1、默认存放在Views文件目录下
2、当前Views文件夹下的所有视图执行之前，会先执行Views文件跟目录下的_ViewStart.cshtml的内容写入 response对象
3、如果Views文件夹的某个目录下有存在_ViewStart.cshtml ,那么会先执行Views文件跟目录下的_ViewStart.cshtml的内容写入 response对象，
再将当前文件夹下的_ViewStart.cshtml的内容写入 response对象，，最后才能将视图的内容写入到response对象
4、_ViewStart.cshtml 文件名不能随意更改
5.1、@RenderBody() ：将来会被 子页中的内容替换
5.2、 @RenderSection("scripts", required: true) ：其中类似于 scripts 这种名字可以由程序员自行定义
但是在子页中利用 @setion xx 指令来编写的的时候，其中"xx" 要和layout.cshtml中的名字保持一致
例如：
在layout.cshtml中定义了如下：
@RenderSection("scripts", required: true)
由于required: 设置成了true，所以必须在子页面中重写：
@section scripts{
<script type="text/javascript">
alert("执行了");
</script>
}
5.3、
@Styles.Render("~/Content/css")
作用：
1、根据虚拟路径 ~/Content/css 就可以下载到 bundConfig类中的bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
所设置的对于的物理css文件，可以对于多个css文件，方便程序的管理
2、会自定将css压缩以后发给浏览器
5.4、
@Scripts.Render("~/bundles/modernizr")
5.5、
注意：
//由于_ViewStart.cshtml中自定指定了 Layout 到一个 _layout.cshtml，所以在子页中一定要
//利用 layout = null 来清除母版页的使用
5.6 CodeSimple:
<!-- _Layout.cshtml -->
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width" /> 6 <title>@ViewBag.Title</title> 7 @Styles.Render("~/Content/css") @*将具体的css以虚拟路径的形式输出到html中同时会压缩css文件*@ 8 @RenderSection("css", required: false) 9 <style type="text/css"> 10 .left { 11 width: 200px; 12 float: left; 13 border: 1px solid red; 14 } 15 16 .right { 17 width: 550px; 18 float: right; 19 border: 1px solid green; 20 } 21 </style> 22 23 </head> 24 <body> 25 <div style="width: 800px; margin: 0 auto;"> 26 <div class="left"> 27 <ul> 28 <li>系统管理</li> 29 <li>系统管理</li> 30 <li>系统管理</li> 31 <li>系统管理</li> 32 </ul> 33 34 </div> 35 <div class="right"> 36 @RenderBody() @* 占位符将来被使用了此母版页的子页中的内容替换，每个母版页中只能出现一次 RenderBody()方法 *@ 37 38 </div> 39 </div> 40 @Scripts.Render("~/bundles/jquery") @*将具体的js以虚拟路径的形式输出到html中, 同时会压缩js文件 *@ 41 42 @*required: false 可以被子页重写的区域或不重写都正常， 43 required: true:在子页中必须重写 scripts111 44 *@ 45 46 @RenderSection("scripts111", required: false) 47 </body> 48 </html>
1 @{ 2 Layout = "~/Views/Shared/_Layout.cshtml"; 3 } 4 @*<link href="~/Content/Site.css" rel="stylesheet" />*@ 5 6 <div style="border: 1px solid red"> 7 _ViewStart.cshtml输出的内容 8 </div>
1.1 作用相当于asp.net中的用户自定义控件 .ascx,可以封装同一份逻辑在不同的页面调用return view() 会执行views文件夹下的_viewstart.cshtml页面return PartialView() 不会执行views文件夹下的_viewstart.cshtml页面
1.2 在视图中调用分部视图的使用：<hr />1.2.1 在正常视图上调用分部视图方式1<br />@Html.Partial("Index", new Pig() { ID = 100, name = "小猪" })<br /><hr />
1.2.2 在正常视图上调用分部视图方式2<br />@{Html.RenderPartial("Index", new Pig() { ID = 100, name = "小猪" });}<br /><hr />1.2.3 在正常视图上调用分部视图方式3<br />@{Html.RenderAction("Index");}@*@Html.RenderAction("Index", new {controller="Home" });*@
1.3 总结： 上面1.2.1 和1.2.2 的方式是直接通过 view 调用 view，<br />
将视图内容输出在调用视图的指定位置，不会进入控制器的action方法
1.4 通过view 调用 action再由action返回一个视图 ，将视图内容输出在调用视图的指定位置
1 public class C01PatrialViewController : Controller 2 { 3 // 4 // GET: /C01PatrialView/ 5 6 public ActionResult Index() 7 { 8 //return View(); :先运行_ViewStart.cshtml 再执行视图中的内容 9 return PartialView(); 10 } 11 12 public ActionResult CallPartialView() 13 { 14 return View(); 15 } 16 }
<!-- Index.cshtml (PartialView)-->
1 @model MVC知识点.Models.Pig 2 3 <div> 4 这是分部视图的内容<br /> 5 @if (Model == null) 6 { 7 @:Model为空 8 } 9 else 10 { 11 @:Model.Name = @Model.Name; 12 } 13 </div>
<!-- CallPartialView.cshtml (调用分布式视图)-->
1 @{ 2 Layout = null; 3 } 4 @using MVC知识点.Models 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>CallPartialView</title> 11 <script src="~/Scripts/jquery-1.7.1.js"></script> 12 </head> 13 <body> 14 <div> 15 1.0 调用分部视图的写法1 Partial() ((最多)) 16 @Html.Partial("Index", new Pig() { Name = "a" }) //相当于asp.net中的Server.Execute("index.aspx") 页面包含 17 18 <br /> 19 2.0 利用Html.RenderPartial() 20 @{Html.RenderPartial("Index");}//相当于asp.net中的Server.Execute("index.aspx") 页面包含 21 22 <br /> 23 3.0 利用RenderAction（）发起一个控制器中的index方法的请求， 24 // /C01PatrialView/Index/100 25 @{Html.RenderAction("Index", new { controller = "C01PatrialView", id = 100 });}//相当于asp.net中的Server.Execute("index.aspx") 页面包含 26 27 <br /> 28 4.0 发起一个控制器中的index方法的请求 29 @Html.Action("Index") //相当于asp.net中的Server.Execute("index.aspx") 页面包含 30 31 <br /> 32 5.0 利用jquery的ajax方法发起请求(最多) 33 <script type="text/javascript"> 34 $(function () { 35 //利用ajax请求分部视图的内容 36 $("#div1").load("/C01PatrialView/Index"); 37 }) 38 </script> 39 <div id="div1" style="border: 2px solid red"></div> 40 </div> 41 </body> 42 </html>