码迷,mamicode.com
首页 > Web开发 > 详细

ASP.NET MVC4 Razor

时间:2014-09-18 14:46:34      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:http   io   os   使用   java   ar   strong   for   文件   

1 Code Expressions  代码表达式

   @表达式  or  @(Expressions )

例如1: <h1>Listing @stuff.Length items.</h1   

Razor peeks at the next character and sees an angle bracket, which isn’t a valid identifier and transitions back into markup mode

例如2:

@{
string rootNamespace = "MyApp";
}
<span>@rootNamespace.Models</span>

What hope to output was  :

<span>MyApp.Models</span>

必须这样写:<span>@(rootNamespace).Models</span> ,通过括号来标记语法结束。

 

example 3:

How to show an e-mail address:

<span>support@megacorp.com</span>                      Razor 语法能智能识别 一个 正确的e-mail 地址

但是像微博这种,@名字    ,则需要转义输出:

<p>
You should follow
@haacked, @jongalloway, @bradwilson, @odetocode
</p>

You can do so by using @@ sing ,just like that:

<p>
You should follow
@@haacked, @@jongalloway, @@bradwilson, @@odetocode
</p>

 

2 HTML Encoding

为了跨站点的脚本攻击,Razor 语法会直接将脚本代码编码输出。

@{
string message = "<script>alert(‘haacked!‘);</script>";
}
<span>@message</span>

输出:

<span>&lt;script&gt;alert(&#39;haacked!&#39;);&lt;/script&gt;</span>

此条实际测试时(chrome版本 37.0.2062.120 m,IE11)均显示为: <span><script>alert(‘haacked!‘);</script></span>

如果需要原样输出 代码文本 需要使用 @Html.Raw():

@{
string message = "<strong>This is bold!</strong>";
}
<span>@Html.Raw(message)</span>
输出:
<span><strong>This is bold!</strong></span>

实际测试: 显示为:This is bold!     当作html标记执行了!!!

如果 message ="<script>alert(‘haacked!‘);</script>"; 那么 

<span>@Html.Raw(message)</span>  会弹出一个 haacked!  对话框,执行js脚本!

 

可以在 Jquery 语法中使用 Razor语法:

<script type="text/javascript">
        $(function () {
            var message = ‘Hello @ViewBag.Title‘;
    $("#message").html(message).show(‘slow‘);
});
</script>


结果: Hello My Sample title

可以使用 @Ajax.JavaScriptStringEncode(string value)   对 字符内容进行编码

 

3  Code Block  代码块

  @{ }                           代码块

例如:

@{
string s = "One line of code.";
ViewBag.Title "Another line of code";
}

  @foreach(){}   , @while() {} ;@for(){}             循环代码块

@if(){} ;  条件块

@*      *@     注释块

例如:

@foreach (Mvc4App.Models.LoginModel login in ViewBag.LoginModels)
          {
               UserName:<li>@login.UserName</li>
          }

4 Layouts

用来呈现布局设计。@RenderBody()

例如: 主布局:SiteLayout.cshtml 文件

<!DOCTYPE html>
<html>
<head><title>@ViewBag.Title</title></head>
<body>
The Razor View Engine x 67
<h1>@ViewBag.Title</h1>
<div id="main-content">@RenderBody()</div>
</body>
</html>

使用布局文件 index.cshtml

@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
View.Title = "The Index!";
}
<p>This is the main content!</p>

---------------------------------------------

呈现 布局段   @RenderSection()

<!DOCTYPE html>
<html>
<head><title>@ViewBag.Title</title></head>
<body>
<h1>@ViewBag.Title</h1>
<div id="main-content">@RenderBody()</div>
<footer>@RenderSection("Footer")</footer>
</body>
</html>

更新index.cshtml

@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
View.Title = "The Index!";
}
<p>This is the main content!</p>
@section Footer {
This is the <strong>footer</strong>.
}

-------------------------------------------------------

如果有些需要呈现,有些不需要,可以使用RenderSection 的重载方法:

<footer>@RenderSection("Footer", required: false)</footer>

还可以判断段是否存在

<footer>
@if (IsSectionDefined("Footer")) {
RenderSection("Footer");
}
else {
<span>This is the default footer.</span>
}
</footer>

------------------------------------------------------------

5  分布视图 partial view

在HomeControl 中添加Action 

public ActionResult Partial()
      {
          ViewBag.Part = "this is partial view";
          return PartialView();
      }

右键添加视图partial.cshtml,分布视图不能使用Layout 属性。

<div>
    <p>Hello @ViewBag.Part</p>
</div>

分布视图与一般视图可以一样的方式浏览  http://localhost:46918/home/partial

分布视图可以同Ajax 配合,直接加载:

  <input type="button" value="click me to load partial view" onclick="loadPartil()" />
    <div id="result"></div>
<script type="text/javascript">
    function loadPartil() {
        $(‘#result‘).load(‘/home/partial‘);
    }
</script>

ASP.NET MVC4 Razor

标签:http   io   os   使用   java   ar   strong   for   文件   

原文地址:http://www.cnblogs.com/iampkm/p/3979130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!