码迷，mamicode.com
首页 > 其他好文 > 详细

【Razor语法规则小手册....】

时间：2016-03-21 12:05:33      阅读：2563      评论：0      收藏：0      [点我收藏+]

标签：

     在前几篇文章中，我使用大量的篇幅来介绍T4在VisualStudio中如何使用。虽然在一定程度上可以提高我们的工作效率，但并没有实质上的改变。不过从另一方面来说，我们确实了解到了T4的强大。如何让这个强大的工具为我们所用呢？本章将讲解如何在自己的程序中使用T4。在原来的解决方案中新建一个窗体项目T4Generator。T4引擎被封装在了：

Microsoft.VisualStudio.TextTemplating.10.0.dll

Microsoft.VisualStudio.TextTemplating.Interfaces.10.0.dll

..............

地址：http://www.cnblogs.com/UltimateAvalon/p/4603062.html

http://www.cnblogs.com/hanzhaoxin/p/3790165.html

 

 

Razor模板引擎：cshtml 或者vbhtml

工具介绍：理解模板引擎Razor 的原理

 http://www.cnblogs.com/JamesLi2015/p/3213642.html

 

 

 

自己以前使用的基于Razor的验证C#代码工具 RazorPad---基于MVC3

技术分享

下载地址：http://pan.baidu.com/s/1eRxdt9S

 

 

 

 

【来源与网络】

1.开发工具

　　Razor是MVC3中的一个视图模板引擎，所以，我们只需要在VS2010中安装一个MVC3的工具，就可以使用Razor了。

　　如果你不想使用MVC3，还有另外一种选择，那便是WebMatrix + VS 2010；WebMatrix提供了Razor模板的网站，但它并不是一个优秀的IDE，没有像VS一样的智能感知和编辑时错误提醒功能。所以，在使用WebMatrix创建了Razor引擎的网站后，可以在VS2010中打开进行编辑。本文示例所使用的就是这种方式。

 

　　2.Razor的文件类型

　　Razor支持两种文件类型，分别是.cshtml 和.vbhtml，其中.cshtml 的服务器代码使用了c#的语法，.vbhtml 的服务器代码使用了vb.net的语法。

　　由此也可以看出，Razor其实是一种服务器代码和HTML代码混写的代码模板，类似于没有后置代码的.aspx文件。

 

　　3.Razor语法之@符号

　　@字符是Razor中的一个重要符号，它被定义为Razor服务器代码块的开始符号。如果我们希望在网页中输出一个变量，或者当前日期，我们可以使用如下代码：

    @{string productName = "台灯";}
    <span>@productName</span>
    <span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

　　当你在完成这段代码的时候，你会发现VS 2010为我们提供了代码着色和智能感知：

技术分享

运行这段代码，让我们看看浏览器的显示内容：

技术分享

 

有这个示例可以看出，@符号标记了一个HTML代码的输出，在其后的变量、方法返回值和表达式运算结果会进行输出。

 

　　4.Razor语法之代码块定义

　　你可以使用@{code}来定义一段代码块。

 
@{
    int num1 =10;
    int num2 =5;

    int sum = num1 + num2;
    @sum;
}
 

　　在代码块中，我们编写代码的方式和通常服务器端代码的方式是一样的。另外，如果需要输出，例如上面的在页面中输出结果，我们可以使用@sum完成输出

　　另外，@(code)可以输出一个表达式的运算结果，上面的代码我们也可以写成这样：

 
    @{
        int num1 =10;
        int num2 =5;

        int sum = num1 + num2;
        @(num1 +num2);
    }
 

　　

　　5.Razor语法之代码混写

　　Razor支持代码混写。在代码块中插入HTML、在HTML中插入Razor语句都是可以的。

 
@{
    int num1 =10;
    int num2 =5;

    int sum = num1 + num2;
    string color ="Red";
    <font color="@color">@sum</font>
}
 

　　值得称赞的是，即使我们这样混写，也不影响VS2010的智能感知功能。

 

　　6.Razor语法之注释

　　这里所说的注释是指服务器端的注释，在Razor代码块中，可以使用C#的注释方式来进行注释，分别是//:（单行注释）和/**/（多行注释）。

　　另外，Razor还提供了一种新的服务器段代码注释，可以即注释C#代码，同时可以注释HTML代码，@**@，这种注释方式不受代码块的限制，在Razor代码中的任何位置都额可以。

    @*
    这是一个注释
    <b>这个是注释</b>
    *@

7.Razor布局

 

ASP.NET MVC3中新增的 Razor 视图引擎有很多的优势，关于使用 Razor 的优势从前几篇的文章中也能看出一些，我们的 Android 博客项目就采用了 Razor。本篇将简单的介绍下 MVC3 中 Razor 视图引擎中页面布局。

使用 Razor 视图引擎，我们会发现不同于 .ASPX 视图，它没有使用母板页。下边我们看看 Razor 布局技术，首先看看我们项目中的公共视图，如下：

技术分享

可见，我们分别定义了页面的页头、页脚等，Razor 中布局是非常简单的，类似我们以前使用的include加载方法。首先，我们看看"_layout.cshtml"中的代码，它类似于"ASPX"视图引擎中的母版页，如下：

技术分享

 

第4行中，使用了ViewBag.Title，这样我们可以在各视图页指定各页面标题的名称，同理第8行指定body 的 id。如在Home页中：

 

技术分享

 

第10行、21行使用了HtmlHelper.Partial()方法，分别将页头和页脚的局部视图加载进来，也没有太多可说的。16行中RenderBody()将各视图页的主体部分全部加载了进来，这样我们在"_layout.cshtml"页中完成了我们页面的布局，达到了复用的目的。最后在"_ViewStart.cshtml"中指定 Layout为我们定义的"_layout.cshtml"页，当然，我们还可以在"_ViewStart.cshtml"中根据需要加载不同的布局。

以上这些是 Razor 中基本的布局方法，很明显，如果复用的部分并不是静态的内容，想想我们在WebForm中使用的自定义控件。那么我们怎样在 Razor 视图中实现自定义控件一样的效果呢？在第18行中我们就实现了这个目的，下边就让我们看看，首先，我们在项目中添加了 App_Code 文件夹，并添加了名为“Latest.cshtml”的文件，如下：

 

技术分享

接下来，我们使用helper类来定义了一个名为“Lastest()”的方法(方法名没取好)，用来显示我们最近发表的文章，我这里并没有具体的实现，而是取出了所有的文章，下图为方法定义：

技术分享

 

最后，我们在需要显示的页面中调用这个方法即可。所以我在"_Layout.cshtml"页中调用了这个方法，如第18行。

好了，本篇关于 ASP.NET MVC3 中 Razor 布局的简单介绍就到这里，希望对学习 ASP.NET MVC3 的朋友能带来一些帮助。到此我们已经了解了 ASP.NET MVC3 三层结构以及数据的查询与显示、Razor 部局等，下一篇我们会看看 ASP.NET MVC3中的添加、修改和删除操作。

--------------------------------------------------

随笔- 20  文章- 0  评论- 25 

ScottGu:Razor视图引擎中的两个有用的语法功能：@:和<text>语法

 

Razor尽量减少编写一个视图模板需要敲入的字符数，实现快速流畅的编程工作流。与大部分模板的语法不同，你不必在HTML中为了明确地标记出服务模块的开始和结束而中断编程。Razor解析器足够聪明，能从你的代码中推断出来。这使其简洁，富有表现力的语法输入干净，快速，有趣。

 

使用标记来识别代码中的内容块——是使Razor在涉及HTML生成的情况下简洁高效的一个重要因素。

 

用@明确表示内容的起始

然而不是所有的内容块都是以标记元开始，在有些案例中，Razor解析器不能隐式检测出内容块。

这就需要Razor通过在代码块中使用“@：字符序列”来显式指明内容块的开始。@：序列表明该行后面的内容应该被视为内容块：

技术分享

 

在@：内容块中使用代码碎块(Code Nugget)

技术分享

 

另外 ，Razor允许你用一个<text>元素 来显式标识内容：

技术分享

 

<text>标签是一个 Razor 特殊处理的元素。Razor将<text>块的内部内容视为内容块，不呈现包含那些内容的<text>标签（这意味着只呈现<text>内部内容，不呈现标签本身）。这使呈现没有被HTML元素包装的多行内容块变得方便。

如果你想要更简洁的@: 序列，<text>元素也能根据需要用来标识单行内容.

 

总结

Razor启用一种简洁的模式化语法，实现非常流畅的编码工作流。 Razor能灵活地通过检测<tag>元素来识别内容块的起始， 从而让Razor方法在有HTML生成的场景中很有效，也使你不用明显地标注95% 的 if/else 和foreach 场景中内容块的开始/结束.

在当你不想在一个代码容器块中使用HTML元素，却需要更精确地标明一个内容块的边界时，你可以使用Razor的@:和<text>句法。

-------------------------------------

 

1 常用 Html 标签

1.1 Label

Html 语法 ：<label for="UserName">用户名</label>

Razor语法：@Html.LabelFor(m => m.UserName)

1.2 <input type="text" />

Html 语法 ：

<input  id=" UserName " name=" UserName " type=" text " value="" />

Razor语法： 
@Html.TextBoxFor(m => m.UserName)

1.3 <input type="hidden" />

Html 语法 ：

<input id=" UserName " name=" UserName " type="hidden" value="" />

Razor语法： 
@Html.TextBoxFor(m => m.UserName)

1.4 <input type="password" />标签

Html 语法 ：

<input id="UserPass" name="UserPass" type="PasswordFor" value="" />

Razor语法： 
@Html.PasswordFor(m => m.UserPass)

1.5 <input type="radio" />标签

Html 语法 ：

<input id="Sex0" name="Sex" type="radio" value="0" /> 男
<input id="Sex1" name="Sex" type="radio" value="1" /> 女
<input id="Sex2" name="Sex" type="radio" value="2" /> 保密
Razor语法：

@ Html .RadioButtonFor(m=> m.Sex, 0, new { @id = "Sex0"}) 男

@ Html .RadioButtonFor(m=> m.Sex, 1, new { @id = "Sex1"}) 女

@ Html .RadioButtonFor(m=> m.Sex, 2, new { @id = "Sex2"}) 保密

1.6 <input type="checkbox" />标签

Html 语法 ：

<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
Razor语法： 
@Html.PasswordFor(m => m.UserPass)

2 链接地址

@Url.Content()

@Url.Action

2.1 引用CSS样式文件

Html 语法 ：

<link href="/Content/style.css" />
Razor语法： 
<link href="@Url.Content("~/Content/style.css")" />

2.2 引用Javascript文件

Html 语法 ：

<script src="/Content/jquery.js"></script>
Razor语法： 
<script src="@Url.Content("~/Content/jquery.js")"></script>

2.3 Image引用图片文件

Html 语法 ：

<img src="/Content/images/1.jpg" />
Razor语法： 
<script src="@Url.Content("~/Content/images/1.jpg")"></script>

2.4 超链接

Html 语法 ：

<a href="/Register">注册</a>
Razor语法： 
@Html.ActionLink("注册", "Register")
注：@Html.ActionLink有多个重载，具体参照MSDN API文档

3 表单

3.1 正常提交表单

@using( Html .BeginForm()){

//默认提交到本页面

<input type="submit" value="Button"/>

}

3.2 Ajax提交表单

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId="txtResult" }))  {          <input type="submit" value="Button"/>                      <span id="txtResult"/>  } 

 

----------------------------------------------------------

Razor文件类型

   Razor可以在vb.net和C#中使用。分别对应了两种文件类型，.vbhtml和.cshtml 

 

Razor的标识符

    @字符被定义为Razor服务器代码块的标识符，后面的表示是服务器代码了。web form中使用<%%>中写服务器代码一个道理。在vs工具里面提供了代码着色和智能感应的功能。如下面代码：

@{string userName= "邓星林";}
    <span>@userName</span>
    <span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

 

Razor的作用域

     在上面一个例子中都已经使用到了大括号{}，不错，大括号里面的就是表示作用域的范围，用形如@{code}来写一段代码块。

@{
    string userName= "邓星林";
    @userName
}

在作用域(代码块)中输出也是用@符号的。

 

用Razor和html代码混合编写

   在Razor中写html代码和html代码中写Razor语句都是可以的，并且还有智能提示。

   a.在作用域内如果是以html标签开始则视为文本输出

   b.如果要输出@，则使用@@

   c.如果要输出非html标签和非Razor语句的代码，则用@:，他的作用是相当于在处于html下面编写一样了，如在@：后面可以加上@就是表示Razor语句的变量

 如：

技术分享
@{

    var str = "abc";
        ////下面会输出：this is a mail：dxl0321@qq.com, this is var: abc,this is mail@str,this is @；
    @: this is a mail：dxl0321@qq.com, this is var: @str,this is  mail@str,this is @@；
    //下面输出abc
    @str
  
}
技术分享

Razor作用块注释

    razor作用块里面本身就是服务器代码了，因此可使用服务器代码的注释，注释有//和/**/分别是单行注释和多行注释。

   另外razor注释还可以使用自身特有的@* 注释的内容 *@，支持单行和多行的。

技术分享
@{
   @*
       多行注释
       多行注释
   *@
   var i = 10;  @* asdfasf *@
}
技术分享

Razor类型转换

         As系列扩展方法和Is系列扩展方法

          AsInt(), IsInt()

　    　AsBool(),IsBool()

    　　AsFloat(),IsFloat()

　   　AsDecimal(),IsDecimal()

　    　AsDateTime(),IsDateTime()

　  　ToString()

@{
    var i = “10”;
}
<p> i = @i.AsInt() </p> <!-- 输出 i = 10 -->

 

razor其它

  @Href("~/")//表示网站的根目录

  @Html.Raw(Module.Content)  输出HTML，如：@Html.Raw(‘<font color=‘red‘>红字</font>‘)，就会显示出红色的”红字“，不用的话会直接显示这段html字符串（<font color=‘red‘>红色文字</font>）

 

 

 

在实际中，比如一个网站，整过框架是一样的，而有的地方是很多相同的版块。因此我们需要复用。

 

布局（Layout）

   layout方式布局就是相当于一个模板一样的，我们在它地址地方去添加代码。相当于定义好了框架，作为一个母版页的，在它下面的页面需要修改不同代码的地方使用@RenderBody()方法

技术分享
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的网站 - @Page.Title</title>
    </head>
    <body>
        @RenderBody()
    </body>
</html>
技术分享
@{
    Layout = "/LayoutPage.cshtml";
    Page.Title = "测试页面哦";
}

<p>This is a layout test</p>

 

页面（Page）

 page是当需要在一个页面中，输出另外一个razor文件的内容时候用到，比如头部或者尾部这些公共的内容时候需要用到。输出就使用 @RenderPage()方法

如：A页面中也要把B页面的内容输出

A页面：

<p>
    @RenderPage("/b.cshtml")
</p>

b页面的代码如下：

<font color="red">这是一个子页面</font>

 

Section区域

    Section是定义在Layou的中使用的。在Layout的页面中用。在要Layout的父页面中使用@RenderSection("Section名称 ")

定义：

技术分享
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的网站 - @Page.Title</title>
    </head>
    <body>
     @RenderSection("SubMenu")
        @RenderBody()
    </body>
</html>
技术分享

在它的子页面中使用

@section SubMenu{
    Hello This is a section implement in About View.
 }

 如果在子页面中没有去实现了SubMenu了，则会抛出异常。我们可以它的重载@RenderSection("SubMenu", false)

技术分享
 @if (IsSectionDefined("SubMenu"))
        {
            @RenderSection("SubMenu", false)
        }
        else
        {
            <p>SubMenu Section is not defined!</p>
        }
技术分享

 

 Helper

   helper就是可以定义可重复使用的帮助器方法，不仅可以在同一个页面不同地方使用，还可以在不同的页面使用。

如在cshtml中那么写：

技术分享
@helper sum(int a,int b)
{  
   var result=a+b; 　　@result  

}
<div >
    <p>@@helper的语法</p>    <p>2+3=@sum(2,3)</p>      <p>5+9=@sum(5,9)</p> </div>
技术分享

我们通常会把一类Helper放在一个单独的cshtml文件中，而文件名就相当于一个类名。

我把sum放在HelpMath.cshtml文件中，则我们在那上面cshtml中的使用方法是:

<p>2+3=@HelpMath.sum(2,3)</p> 
<p>5+9=@HelpMath.sum(5,9)</p>

另外，系统还为我们提供了一些列的Helper，用来简化Html的书写。这些Helper放在@Html中，我们可以方便的使用：

<p>
    @Html.TextBox("txtName")
</p>

 

 

 

 

【Razor语法规则小手册....】

标签：

原文地址：http://www.cnblogs.com/micro-chen/p/5301088.html

踩
(0)
赞
(3)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！