MVC（二）--Razor视图引擎语法

MVC（二）--Razor视图引擎语法

转载▼

标签：  controller   view   mvc   razor语法

分类： 编程

一、概念：

    View视图职责是向用户提供界面。负责根据提供的模型数据，生成准备提供给用户的格式界面,支持多种视图引擎。Razor视图引擎通过理解标记的结构来实现代码和标记之间的顺畅切换。
    核心转换字符 @ ，是标记-代码 的转换字符串。

    razor语法识别 @ 和 尖括号 ,认为左右尖括号之间是Html代码。

二、用法：

1.向浏览器输出源html代码: @Html.Raw("<p>a</p>")

 

2.向浏览器输出JS字符串编码: @Ajax.JavaScriptStringEncode(Model.title)

3.@代码块，加大括号：
     @{ 

          string s ="Hi~";
          int age =11;
         }

 

4.注释：@* ............*@

 

5.调用泛型方法
     @(Html.SomeMethod<Dog>());

 

6.混合代码与文本
@if(1==1){
     <text>我要输出文本在这里！</text>
     @:我要输出文本在这里！
    }

7.导入命名空间
@using System.Text;

 

8.让C#输出语法和.字符串 连接显示，必须加()，否则razor认为是.对象的成员：
        @(strName).ToString();(正确)

        @strName.ToString();(错误！)

       

9.如果@符号前面有字符串，那么@符号会被当作字符串的一部分

        HelloWorld@strName.Length

       

  如果@符号前面用空格隔开，那么@符号会被当作C#语法开始标记执行C#语法
        HelloWorld @strName.Length

       

10.不转义控制器生成的 html 代码，否则尖括号会被转义成 &lt; &gt;
        @Html.Raw(ViewBag.strHtml)        
 
11.在页面上调用无返回值方法，使用 { }
        @sb.ToString()   (有返回值)
        @{dog.Shout();}  （无返回值）

 

12.@作用域与html标记混合使用：
     @{
          string dogName="dogR";
          <p>@dogName</p>
         }

       
13.在代码块中书写字符串

    方法一：   <text>hello world!</text>  

    方法二：  

    @{       
       @:hello world!

     }
       

14.在代码块中书写转义符@，
        @{
            @:@@
        }

   //浏览器输出：@

       

15.内置对象@response.Write 

   @{
          @:how are you?
          Response.Write("hello world!");
    }

   //浏览器输出：

    hello world!

    how are you?

   //可见，Response.Write()的输出内容优先显示。

        

16.数据类型转换As....()，如：@("211".AsInt())

17.数值类型判断IsInt()，如 @(strAge.IsInt()?"是":"否")

18.路径转换Href()，如： @Href("~/Home/Index");

 

19. HtmlHelper重用：相当于是在视图中定义 方法

（1）定义方法：

 @helper Print(string str){
        <ul>
            <li>@str</li>
        </ul>
        }

 

（2）调用方法：

@Print("hello world")

 

（3）输出结果：

 

• hello world
  
  

二、Razor 布局

1.整体视图模板

View模板显示页面的规则：先找对应的Controller文件夹，再找对应的Shared文件夹

(1) @RenderBody()  //模板页里主体内容的占位符

    @RenderSection（）是特殊内容，例如Js的占位符

 

(2) @{
   Layout = "~/Views/Shared/SiteLayout.cshtml";
   View.Title="Dog List";
}
<p>子页所有html代码都将替换到模板页的@RenderBody()处</p>

3.模板页多个节：
   <footer>@RenderSection("Footer")</footer>

 

   子页面定义节点：
    @section Footer{
           <b>我们也要加入了！</b>
     }

   模板页判断是否为布局节方法，IsSectionDeined
   @if(IsSectionDefined("Footer")){
         @RenderSection("Footer");
   }else
   {
         <b>“子页面”没有Footer~</b>
   }

 

4.ViewStart

     每个子页面都使用一个Layout指定布局。如果多个视图都用同一个布局就会产生冗余，修改维护麻烦。
_ViewStart.cshtml 可解决此问题,因为此文件代码优先于同目录及子目录下任何视图代码执行。

    Views目录下的 _ViewStart.cshtml  页面是所有视图的必须经过的一步，它为所有视图的Layout属性都赋值（指定了布局页），如果某个页面不想使用这个布局页_Layout.cshtml，则可以在某页面上通过 Layout=null 设置。

    View目录下自动添加的_ViewStart.cshtml
    @{
          Layout = "~/Views/Shared/_Layout.cshtml";
     }
    有了它，就可以为某个文件夹下所有的视图添加相同的视图布局了。

    因为这个文件代码优先于任何视图，所以任何一个视图都可以重写LayOut属性来指定自己想要的模板布局页面。

 

5.分布视图:

    Action方法可以通过 PartialView方法以 PartialViewResult形式返回分部视图, 一般用在Ajax请求部分代码。

    前台： $("#msgDiv").load("/home/msg");

       后台：

          public class HomeController：Contorller

         {

         public ActionResult Msg()

         {

           return PartialView();

         }

         }

 

相对路径，相对于应用程序所在根目录的路径

绝对路径，文件在磁盘上的真实路径

使用相对路径可以保证程序在不同文件夹间移动程序仍然能够找到所需的文件

~/代表程序根路径。 例子：

 

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript">
</script>