Razor入门

简介:     在学习MVC的时候,创建控制器总会看到默认的Razor:          然后,我们就可以在创建的视图里面这样写:       @* @Html.


    在学习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 内容没有区别,例如,咱们上面查看到的网页源码。



            

        

        

      


目录
相关文章
|
8月前
|
缓存 前端开发 PHP
【PHP开发专栏】Smarty模板引擎详解
【4月更文挑战第30天】Smarty是PHP流行的模板引擎,分离逻辑与UI,加速开发。本文分三部分解析其使用和特性:1)介绍及安装配置;2)基本使用和语法,如数据分配、模板继承、循环与条件判断;3)高级功能,包括缓存机制、插件体系和调试工具。通过学习,开发者能提升Web应用构建效率和可维护性。
140 3
|
前端开发 JavaScript C#
Blazor_WASM之2:Razor语法
Razor 是一种标记语法,用于将基于 .NET 的代码嵌入网页中。 Razor 语法由 Razor 标记、C# 和 HTML 组成。 Razor 可在 Razor 组件 文件 (.razor) 中找到。 Razor 语法类似于各种 JavaScript 单页应用程序 (SPA) 框架(如 Angular、React、VueJs 和 Svelte)的模板化引擎,本文针对Razor文件介绍Razor常用语法。
135 0
|
JavaScript 前端开发 Linux
.Net开发的跨平台Word模板引擎
项目采用类似Vue、React模板方式,在模板定义相应的变量,再结合数据,快速生成Word文件。比如模板定义{FullName{}},项目会自动匹配键值为FullName的对象,并替换。
304 0
.Net开发的跨平台Word模板引擎
symfony框架Twig模板语言的使用
symfony框架Twig模板语言的使用
166 0
symfony框架Twig模板语言的使用
|
JavaScript 前端开发 Java
javaweb入门4之javascript入门一
javascript入门一 简介 用法 输出 语法 变量和数据类型 数据类型 var和let的区别 循环和条件语句
183 0
javaweb入门4之javascript入门一
C#Razor小笔记和某些细节
C#Razor小笔记和某些细节
137 0
|
Web App开发 存储 JavaScript
【Web】JavaScript——基础语法入门篇(一)
JavaScript是什么 JavaScript 和 HTML 和 CSS 之间的关系 JavaScript 运行过程 JavaScript 的组成 JavaScript 的书写形式
【Web】JavaScript——基础语法入门篇(一)
|
存储 JavaScript 前端开发
【Web】JavaScript——基础语法入门篇(二)
JavaScript是什么 JavaScript 和 HTML 和 CSS 之间的关系 JavaScript 运行过程 JavaScript 的组成 JavaScript 的书写形式
【Web】JavaScript——基础语法入门篇(二)
|
SQL 开发框架 移动开发
只有20行Javascript代码!手把手教你写一个页面模板引擎
AbsurdJS 作者写的一篇教程,一步步教你怎样用 Javascript 实现一个纯客户端的模板引擎。整个引擎实现只有不到 20 行代码。如果你能从头看到尾的话,还能有不少收获的。你甚至可以跟随大牛的脚步也自己动手写一个引擎。以下是全文。
197 0
|
前端开发 JavaScript .NET
【ABP框架系列学习】介绍篇(1)
原文:【ABP框架系列学习】介绍篇(1)   0.引言 该系列博文主要在【官方文档】及【tkbSimplest】ABP框架理论研究系列博文的基础上进行总结的,或许大家会质问,别人都已经翻译过了,这不是多此一举吗?原因如下: 1.【tkbSimplest】的相关博文由于撰写得比较早的,在参照官方文档学习的过程中,发现部分知识未能及时同步(当前V4.0.2版本),如【EntityHistory】、【Multi-Lingual Engities】章节未涉及、【Caching】章节没有Entity Caching等内容。
1947 0