zoukankan      html  css  js  c++  java
  • Razor入门


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


     



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

     

       

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


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


            

    一。什么是Razor?


     

           Razor 是一种同意您向网页中嵌入基于server的代码(Visual Basic 和 C#)的标记语法。

           当网页被写入浏览器时,基于server的代码可以创建动态内容。在网页载入时。server在向浏览器返回页面之前,会运行页面内的基于server代码。

    因为是在server上运行,这样的代码能运行复杂的任务,比方訪问数据库。

    Razor 基于 ASP.NET,它为 web 应用程序的创建而设计。

    它拥有传统 ASP.NET 标记的能力,但更易使用,也更易学习。


               对程序员们来说,大家比較熟悉的语言还是偏向server端的这样的语言,感觉它比html写起来更easy。

    。。

    并且功能更强大,也很好学!(优点还在挖掘中。


     二,语法规则


            以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 代码。


         当server读取这样的页面后,在将 HTML页面发送到浏览器之前,会首先执行 Razor代码。这些在server上执行的代码可以完毕浏览器中无法完毕的任务,比方訪问server数据库。

    server代码可以在页面被发送到浏览器之前创建动态的 HTML内容。

    从浏览器来看的话,由server代码生成的 HTML 与静态 HTML 内容没有差别,比如,咱们上面查看到的网页源代码。



                

            

            

          


  • 相关阅读:
    vue 中的const {XXX } =this 的作用效果
    <a href="javascript:;">的用法说明
    iOS抓包工具Charles —— 破解、抓包入门
    iOS抓包工具Charles
    Android抓包方法(一)之Fiddler代理
    appium+python自动化24-滑动方法封装(swipe)
    Appium移动自动化测试(五)--app控件获取之uiautomatorviewer
    appium自动化框架项目实战1——app初次使用引导页
    一个完整的Appium手机自动化测试实例
    Appium提高脚本复用、可配置性
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/7079972.html
Copyright © 2011-2022 走看看