MVC中的视图

authour： chenboyi
updatetime： 2015-04-26 19:19:53
friendly link：  

 

 

 

 

目录：

　　1，思维导图

　　2，强类型视图和弱类型视图

　　3,Razor语法演示

　　4,ViewStart.cshtml

　　5,整体视图模板 Layout.cshtml

　　6,Razor 布局 – 分布视图 PartialView

　　7,视图引擎RazorViewEngine之 视图查找路径配置

　　8,视图引擎RazorViewEngine之 查找视图的方法

　　

 

1,思维导图

 

2，强类型视图和弱类型视图

　　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,Razor语法演示　

　　　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         ivanyb@qq.com<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>

　　　　

4.ViewStart.cshtml

   1、默认存放在Views文件目录下
   2、当前Views文件夹下的所有视图执行之前，会先执行Views文件跟目录下的_ViewStart.cshtml的内容写入 response对象
   3、如果Views文件夹的某个目录下有存在_ViewStart.cshtml ,那么会先执行Views文件跟目录下的_ViewStart.cshtml的内容写入 response对象，
        再将当前文件夹下的_ViewStart.cshtml的内容写入 response对象，，最后才能将视图的内容写入到response对象
   4、_ViewStart.cshtml 文件名不能随意更改

 

5,整体视图模板 Layout.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>

 

6,Razor 布局 – 分布视图 PartialView

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>

 



 

posted on 2015-04-26 19:20  两宝程序cboii  阅读(1090)  评论(0)  编辑  收藏  举报

导航