• MVC之路随记2--Razor基础


    1.概述:Razor是mvc 3.0新扩展的内容,是默认的视图引擎,引擎一词可理解为Web Form中<% %>中的变形,但是Razor更加干净,轻量级,简单.使用了该引擎后,文件的后缀名将是cshtml(c#)或vbhtml(vb).

    2.基本使用方法

    @* 代码表达式 *@
    <h2>hello @ViewBag.Msg</h2>
    @* 显式方式输出 *@
    @{
        string str = "hello world";
    }
    <h1>@(str).model</h1>
    @*识别邮件地址*@
    <span>fang@163.com</span>
    @*有歧义时要用显式输出格式*@
    <span>stringLeng@(str.Length)</span>
    @*输出'@'符号时*@
    <span>@@孙猴子@@</span>
    
    @*遇上Html编码时,Razor会自动看为字符串,以此防止XSS攻击
    ,但是最好的方式是用'@Ajac.JavaScriptStringEncode'方法对用户输入进行编码来防止注入*@
    @{
        string str2 = "<script>alert('xss hack')</script>";
     }
     <h2>@str2</h2>
     @*若要当成HTML输出亦可*@
     <h1>@Html.Raw(str2)</h1>
     
     @*代码块自动识别结尾*@
    @foreach(LogOnModel l in Model)
    {
         <p>@l.UserName</p>
    }
    @*混合代码和纯文本*@
    @if (true)
    {
        <text>This a plain text</text> 
    }
    @if (true)
    {
        @:This is  a plain text! 
    }

    3.深入理解使用

    3.1布局

    Razor的布局方式使多个视图能够保持一样的外观

    MVC 3.0+会自动生成一个_ViewStart视图文件,他会先于所有视图运行,里面就定义了布局文件

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    

     打开布局文件可以看到

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    </head>
    
    <body>
        <div class="page">
    
            <div id="header">
                <div id="title">
                    <h1>我的 MVC 应用程序</h1>
                </div>
    
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
    
                <div id="menucontainer">
    
                    <ul id="menu">
                        <li>@Html.ActionLink("主页", "Index", "Home")</li>
                        <li>@Html.ActionLink("关于", "About", "Home")</li>
                    </ul>
    
                </div>
            </div>
    
            <div id="main">
                @RenderBody()
                <div id="footer">
                @if (IsSectionDefined("footer"))
                {
                    //渲染页脚
                    RenderSection("footer");
                }
                else {
                    <span>This is the default footer.</span>
                }
                </div>
            </div>
        </div>
    </body>
    </html>

    其中@RenderBody()放置视图文件中的内容,若是有页脚则放置在RenderSection("footer"),这两个方法说白了就是一个占位符,对于默认的视图是没有页脚的,我们可以为视图加上页脚,如下代码

     @RenderSection("Footer",false);

    其中false是指不一定非要加页脚不可.他有两个重载,若是没设置第二个参数,或者第二个参数设置为true,则在视图中必须设置对应的渲染内容@section

    视图中使用

    @section Footer{
        This is A <strong> Footer</strong>
    }

    说到布局,就还要说个@RenderPage("/url.."),他在布局文件中使用,可以指定渲染的页面到布局中来.

    @RenderPage("~/Views/Home/About.cshtml");
  • 相关阅读:
    echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
    从输入URL到页面加载的过程?由一道题完善自己的前端知识体系!
    浏览器多进程架构、浏览器内核多线程、js单线程、GUI 渲染线程 与 JavaScript引擎线程互斥 原理
    通过script src引入ElementUI时,使用语句:window.ELEMENT.MessageBox.alert(xxx) 调用弹出框
    计算2个日期之间的天数
    js 字符串转对象
    requestAnimationFrame 知识点
    vue项目权限控制
    css中权重与继承
    Flex Basis与Width的区别
  • 原文地址:https://www.cnblogs.com/fanglorry/p/4501294.html
Copyright © 2020-2023  润新知