2014-09-18 14:06 by 易code, 2854 阅读, 0 评论, 收藏, 编辑

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('haacked!');&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的更多相关文章

  1. ASP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值

    SP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值 “/”应用程序中的服务器错误. 从客户端(Content=" sdfdddd ..." ...

  2. 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...

  3. Asp.Net MVC4 + Oracle + EasyUI 学习 第二章

    Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...

  4. Asp.Net MVC4 + Oracle + EasyUI 学习 第一章

    Asp.Net MVC4 + Oracle + EasyUI  第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...

  5. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  6. asp.net mvc4 学习笔记一（基本原理）

    做了8年的asp.net webform,用过MVVM但还没用过MVC , 虽然项目不用MVC,但是还是想了解一下,今天第二天学习,以下是学习心得. VS2012默认带有asp.net mvc3和as ...

  7. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  8. Asp.Net MVC4入门指南（1）： 入门介绍

    前言 本教程将为您讲解使用微软的Visual Studio Express 2012或Visual Web Developer 2010 Express Service Pack 1 来建立一个ASP ...

  9. ASP.NET MVC4 部分视图

    ASP.NET MVC4 部分视图 2014-10-24 16:48 by 易code, 2662 阅读, 1 评论, 收藏, 编辑 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web ...

随机推荐

  1. 数据结构-队列(3)-使用Java内置队列

    大多数流行语言都提供内置的队列库,因此您无需重新发明轮子. 如前所述,队列有两个重要的操作,入队 enqueue 和出队 dequeue. 此外,我们应该能够获得队列中的第一个元素,因为应该首先处理它 ...

  2. 本地连接VM virtualBox ubuntu16.04 中的Mysql数据库

    1.打开mysql配置文件vim /etc/mysql/mysql.conf.d/mysqld.cnf     将bind-address = 127.0.0.1注销 2.重启ubuntu数据库 3. ...

  3. 【前端】javascript+jquery实现手风琴式的滚动banner或产品展示图

    实现效果 实现步骤 // 鼠标放入到li中该盒子变宽,其他盒子变窄,鼠标移开大盒子,恢复原样 // 实现步骤 // 1. 给li添加背景 // 2. 绑定onmouseover事件,鼠标放入到li中, ...

  4. shell：遍历目录和子目录的所有文件及匹配文件内容到日志

    过滤文件内网 #!/bin/bash function getdir(){ ` do dir_or_file=$"/"$element if [ -d $dir_or_file ] ...

  5. 【分词器及自定义】Elasticsearch中文分词器及自定义分词器

    中文分词器 在lunix下执行下列命令,可以看到本来应该按照中文”北京大学”来查询结果es将其分拆为”北”,”京”,”大”,”学”四个汉字,这显然不符合我的预期.这是因为Es默认的是英文分词器我需要为 ...

  6. opencv-python 学习初探2 去图片水印

    我要去除的水印是红色的.网上已经有很不错的帖子,我就不贴自己的代码了.留个指路自己以后查资料. 大概的思路就是用颜色拾取工具,拾取水印颜色,分析了图片,找到规律.比如我的图片水印是红色的,红色差不多g ...

  7. gulp常用命令

    gulp 默认的执行的命名文件为gulpfile 换成其他命名就识别不了 因为需要安装两次gulp或者说其他插件,一个是全局-g安装一个是本地目录安装, 本地目录安装时目录移动或者名字被改变就会失效提 ...

  8. UVa 1660 电视网络（点连通度+最小割最大流+Dinic）

    https://vjudge.net/problem/UVA-1660 题意:给出一个无向图,求出点连通度.即最少删除多少个点,使得图不连通. 思路: 如果求线连通度的话,直接求个最大流就可以了.但这 ...

  9. python 集合的比较

    setx = set(["apple", "mango"]) sety = set(["mango", "orange" ...

  10. [源][osg][osgBullet]osgBullet例子介绍

    1.BasicDemo 基本样例 一个小玩具飞机坠落,一个立方体盒子在转圈 2.centerofmass 质心 3.collision 碰撞检测 这里有一个大神自己改的例子: http://blog. ...