Razor入门

    在学习MVC的时候,创建控制器总会看到默认的Razor:

 

       然后,我们就可以在创建的视图里面这样写:

 

   

 <!--创建用户名文本框,等同于<input type="text">-->
           @* @Html.TextBoxFor(model=>model.UserName)*@

         那么,这些带有@的看起来又不像html的但是放在视图上的东东是什么呢?我们还是从最头开始聊吧~~

        

一,什么是Razor?

 

       Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法。

       当网页被写入浏览器时,基于服务器的代码能够创建动态内容。在网页加载时,服务器在向浏览器返回页面之前,会执行页面内的基于服务器代码。由于是在服务器上运行,这种代码能执行复杂的任务,比如访问数据库。

Razor 基于 ASP.NET,它为 web 应用程序的创建而设计。它拥有传统 ASP.NET 标记的能力,但更易使用,也更易学习。

           对程序猿们来说,大家比较熟悉的语言还是偏向服务器端的这种语言,感觉它比html写起来更容易。。。而且功能更强大,也非常好学!(好处还在挖掘中。。)

 

 二,语法规则

        以C#为例,

      

       

Demo示例:

 <!--基础语法1:以@符号+{代码块},或以@符号开头。-->

        <!--在代码块中声明变量要以分好结束,使用变量时无需加分号-->
        <!--在@符号前面不能有任何html字符,否则变量将以字符串的形式原样输出-->
        <!--在C#在列中写变量的时候一样,Razor中也是区分大小写的-->
    <div>
        @{int id = 100;
          var ID = 101;
          string Name = "大写名称";
          string name = "变量区分大小写";

        }
    </div>

    <div>@id</div>
    <div>@ID</div>
    <div>@Name </div>
    <div>@name</div>
    <div>Hi@name</div>

    <!--基础语法2::::字符串拼接-->
    <div>
        字符串拼接: aa @name bb
    </div>

    <div>
        字符串拼接:Begin@{@Name}
        End
    </div>

    <!--基本语法3::::文本使用-->

    <div>
        @{
            <div>
                内部<br/>
                文本一

            </div>

            @:内部<br/>文本二

        }
    </div>

     <!--基本语法4::::注释用法-->

    <div>
        @{
            //注释一,单行注释
            @*
            注释二,多行注释
            *@

            }
    </div>

    <!--基本语法5::::循环语句用法-->
    <div>
        @{
            for(int i=0;i<10;i++)
            {
                @:@i
            }
            }
    </div>

     <!--基本语法6::::特殊符号用法-->

    <div>
        @{
            var password = @"""123456!@#$%^\""";

             @*
            注意,输出双引号时,前面要多加一对双引号转义
            *@

            }
    </div>

    <div>
        @password
    </div>

    <div>
        @@
    </div>
    

 运行后,结果如图:

我们在网页上查看源码,会看到纯HTML代码(部分如图):

可见,Razor最后被解析成了HTML形式显示出来。

三,工作原理解析

 

    Razor 网页可被描述为带有两种内容的HTML 页面:HTML 内容和 Razor 代码。

     当服务器读取这种页面后,在将 HTML页面发送到浏览器之前,会首先运行 Razor代码。这些在服务器上执行的代码能够完成浏览器中无法完成的任务,比如访问服务器数据库。服务器代码能够在页面被发送到浏览器之前创建动态的 HTML内容。从浏览器来看的话,由服务器代码生成的 HTML 与静态 HTML 内容没有区别,例如,咱们上面查看到的网页源码。

            

        

        

      

时间: 2024-10-29 12:48:21

Razor入门的相关文章

ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用

原文:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html  上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统 源码下载:点我下载

ASP.NET MVC3学习心得-----入门和控制器

之前有学过ASP.NET MVC 3,但那也只是浮光掠影般的看了看而已,这次专门接了本书,系统的学习下,这里只是摘录总结一些重点而已,并非详细的介绍,算是读书笔记吧,希望可以对大家有所帮助. 第一章入门 1.1.2MVC模式简介 MVC(Model-View-Contorller)模式是一种用户界面模式,将应用程序的用户界面分为三部分: l 模型:组类,描述要处理的数据以及修改和操作数据的业务规则 l 视图:定义应用程序用户界面的显示方式 l 控制器:一组类,用于处理来自用户.整个应用程序流程及

ASP.NET MVC 5 入门教程 (4) View和ViewBag

原文:ASP.NET MVC 5 入门教程 (4) View和ViewBag 文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html 上一节:ASP.NET MVC 5 入门教程 (3) 路由Route 下一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 源码下载:点我下载 View(视图)用来显示被controller处理好的数据.本节

ASP.NET MVC 入门介绍 (上)

参考文章 ASP.NET MVC Overview. 1. MVC模式 MVC模式是一种软件架构模式.它把软件系统分为三个部分:模型(Model),视图(View)和控制器(Controller).MVC模式最早由Trygve Reenskaug在1974年提出,是施乐帕罗奥多研究中心(Xerox PARC)在20世纪80年代为程序语言Smalltalk发明的一种软件设计模式.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能.除此之外,

ASP.NET MVC4入门教程(一):入门介绍_自学过程

前言 本教程将为您讲解使用微软的Visual Studio Express 2012或Visual Web Developer 2010 Express Service Pack 1 来建立一个ASP.NET MVC4 Web应用程序所需要的基础知识.建议您使用Visual Studio 2012,你将不再需要安装任何组件,来完成此教程.如果您使用的是Visual Studio 2010,您必须安装下面的组件.您可以通过点击下面的链接,来安装所需的所有组件: Visual Studio Web

ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework

原文:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html  上一节:ASP.NET MVC 5 入门教程 (4) View和ViewBag 下一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 一.创建Model MVC中

AngularJS入门教程中SQL实例详解_AngularJS

AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></s

Asp.Net MVC4入门指南(1): 入门介绍

前言 本教程将为您讲解使用微软的Visual Studio Express 2012或Visual Web Developer 2010 Express Service Pack 1 来建立一个ASP.NET MVC4 Web应用程序所需要的基础知识.建议您使用Visual Studio 2012,你将不再需要安装任何组件,来完成此教程.如果您使用的是Visual Studio 2010,您必须安装下面的组件.您可以通过点击下面的链接,来安装所需的所有组件: Visual Studio Web

Asp.Net MVC4入门指南(3):添加一个视图

在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML的过程. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎.Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML.用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程. 当前在控制器类中的Index方法返回了一个硬编码