Razor視圖引擎 語法學習(一)


      ASP.NET MVC是一種構建web應用程序的框架,它將一般的MVC(Model-View-Controller)模式應用於ASP.NET框架;

       ASP.NET約定優於配置;基本分為模型(對實體數據的描述)、視圖(一個動態生成HTML頁面的模板)、控制器(協調用戶的請求返回模型實體或返回其他數據根據對應模板動態生成html返回給用戶)

       請求都是先經過Controller找到下面的Action(即返回值為ActionResult的方法);在默認路由的情況下,/Home/Index 則請求的是HomeController類下面的Index方法,返回視圖名稱為Index的視圖;HomeController名稱必須是整個MVC程序中唯一的類名稱,訪問HomeController不需要區分文件夾的嵌套;HomeController查找Index視圖模板(在不具體指定渲染哪個模板的時候)是先查找Views文件下面的Home文件下的index名稱的模板;如果沒有就會查找Views下面的Shared文件下的index名稱的模板;

       以下將從視圖、控制器、模型以及一些相關知識點講起;

       Razor視圖(模板):它本身不會被直接訪問,瀏覽器不能指向一個視圖並渲染它,然而,視圖總是被一個控制器渲染,該控制器向它提供了要渲染的數據;

       Razor視圖語法:

      1、  模板中定義代碼塊

View Code
復制代碼
<body>
    <div>
        @{
            string time = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
            }
        @time
    </div>
</body>
復制代碼

      即可以在頁面打印時間

      2、代碼與HTML標簽嵌套書寫@開始即為C#語義解釋    

View Code
復制代碼
@{
            List<string> strs = new List<string>() { "測試1", "測試2", "測試3" };
            }
        @foreach (var item in strs)
        {
            <li style="margin-left:30px;font-size:12.5px;">@item</li>
        }
復制代碼

      3、 當定義如下

@{
            string name = "name";
            }
        <li>@name.Model</li>

  我們想輸出name.Model的時候視圖解釋的時候就不會被編譯通過;此時就需要@(name).Model這樣才能輸出name.Model,括號是告訴解釋器括號內的東西需要進行編譯解釋;

  4、  現在我們想在視圖中打印出郵箱后綴@qq.com此時Razor會將@qq.com當作C#代碼來解釋執行,這時我們需要2個@來對一個@進行轉義,比如@@qq.com;但是如果我們輸入184057662@qq.com與184057662@@qq.com結果都是一樣的;因為在@前面有字符串連接,后面會自動當作字符串處理;而@@會被轉義成一個@所以兩個結果是一樣;(輸出@還可以使用&#64代替)

      5、 接上面,qq是一個C#代碼的變量,我們需要打印184057662@qq.com該如何?如何?

 @{
            string qq = "telnet";
            }
        184057662@qq.com

      現在視圖完全理解錯了我的意思;此時我們只要按照3中的解決辦法給@qq改為  @(qq)即可輸出184057662telnet.com

      6、  頁面中除了文本還會有js,我們定義如下:

 @{
            string mess = "<h1>Hello Razor</h1>";
            }
        @mess

      此時輸出的文本就是原來定義的字符串文本,會把Hello Razor變為H1標簽包裹;
      此時有兩種方法處理第一種是我們需要用到Html輔助方法進行處理@Html.Raw(mess)將mess進行html編碼后進行輸出

      另一種是在定義的時候創建MvcHtmlString

@{
            string mess = "<h1>Hello Razor</h1>";
            MvcHtmlString messHtml = new MvcHtmlString(mess);
        }
        @messHtml

     同樣也適用於定義mess=” <script>alert('Hello Razor');</script>”的腳本提示;

     7、  在代碼中定義如下

 @{
            bool showMess = true;
            }
        @if (showMess) { 
            this is TextAreaExtensions
        }

      我們在判斷完showMess的值后只想打印文本this is TextAreaExtensions,但razor卻還認為括號里面是表達式;此時我們需要在里面用<></>括號的標簽折斷if語義的繼續判斷一般嵌套一個<div></div>即可;

      或者按照如下

@if (showMess) { 
            @:this is TextAreaExtensions
        }

      8、  服務器端的注釋為@**@

      9、 視圖布局模板(母版頁)

復制代碼
<body>
    <div class="page">
        <div id="main">
            @RenderBody()
        </div>
    </div>
</body>
復制代碼

     在main div中有個@RenderBody();在需要用到母版頁的cshtml中如下即可

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<p>
     將內容放置在此處。
</p>

      在視圖中如果不主動指定Layout為具體母版或null則會默認尋找/Views/_ViewStart.cshtml頁面為母版頁;

  還可以在頁面中添加一些頁腳節點比如

復制代碼
<body>
    <div class="page">
        <div id="main">
            @RenderBody()
        </div>
<div id="footer">
              <footer>@RenderSection("Footer")
</footer>
        </div>
    </div>
</body>
復制代碼

  使人頁腳節點如下:

復制代碼
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<p>
     將內容放置在此處。
</p>
@section Footer{
        這是頁腳節點
    }
復制代碼

      Razor視圖只是MVC中視圖引擎中的一種,還有我們熟知的aspx視圖引擎,還有很多第三方的視圖引擎比如:Spark、NHaml、Brail等;所以至此,千萬不要把視圖當成普通的頁面來看待,視圖引擎可以根據Controller的控制編譯出頁面呈現給用戶;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM