ASP.NET MVC4 Razor
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><script>alert('haacked!');</script></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> |
使用布局文件 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的更多相关文章
- ASP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值
SP.NET MVC4(Razor)从客户端中检测到有潜在危险的 Request.Form 值 “/”应用程序中的服务器错误. 从客户端(Content=" sdfdddd ..." ...
- 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 第二章
Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 第一章
Asp.Net MVC4 + Oracle + EasyUI 第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 序章
Asp.Net MVC4 + Oracle + EasyUI 序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1. 简 ...
- asp.net mvc4 学习笔记一(基本原理)
做了8年的asp.net webform,用过MVVM但还没用过MVC , 虽然项目不用MVC,但是还是想了解一下,今天第二天学习,以下是学习心得. VS2012默认带有asp.net mvc3和as ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- Asp.Net MVC4入门指南(1): 入门介绍
前言 本教程将为您讲解使用微软的Visual Studio Express 2012或Visual Web Developer 2010 Express Service Pack 1 来建立一个ASP ...
- ASP.NET MVC4 部分视图
ASP.NET MVC4 部分视图 2014-10-24 16:48 by 易code, 2662 阅读, 1 评论, 收藏, 编辑 [部分视图] ASP.NET MVC 里的部分视图,相当于 Web ...
随机推荐
- ISSCC 2017论文导读 Session 14:ENVISION: A 0.26-to-10 TOPS/W Subword-Parallel DVAFS CNN Processor in 28nm
ENVISION: A 0.26-to-10 TOPS/W Subword-Parallel Dynamic-Voltage-Accuracy-Frequency-Scalable CNN Proce ...
- HDU 2243 考研路茫茫——单词情结(AC自动机+矩阵快速幂)
http://acm.hdu.edu.cn/showproblem.php?pid=2243 题意: 给出m个模式串,求长度不超过n的且至少包含一个模式串的字符串个数. 思路: 如果做过poj2778 ...
- pyqt 调用颜色选择器
# -*- coding: utf- -*- from PyQt5.QtWidgets import QApplication, QPushButton, QColorDialog , QWidget ...
- c++ 容器元素遍历打印(for_each)
#include <iostream> // cout #include <algorithm> // for_each #include <vector> // ...
- Docker Container的概述
·通过Image创建(copy) ·在Image layer之上建立一个container layer(可读写) ·类比对象:类和实例(Image相当于抽象的一个类,Container相当于实例化的一 ...
- 《剑指offer》第十四题(剪绳子)
// 面试题:剪绳子 // 题目:给你一根长度为n绳子,请把绳子剪成m段(m.n都是整数,n>1并且m≥1). // 每段的绳子的长度记为k[0].k[1].…….k[m].k[0]*k[1]* ...
- c++ primer plus 第六章 课后题答案
#include <iostream> #include <cctype> using namespace std; int main() { char in_put; do ...
- 30分钟了解Shiro与Springboot的多Realm基础配置
写在前面的话: 我之前写过两篇与shiro安全框架有关的博文,居然能够广受欢迎实在令人意外.说明大家在互联网时代大伙对于安全和登录都非常重视,无论是大型项目还是中小型业务,普遍都至少需要登录与认证的逻 ...
- js中如何访问对象和数组
js中如何访问对象和数组 一.总结 一句话总结:js访问对象点和中括号,访问数组的话就是中括号 对象 . [] 数组 [] 1.js访问对象的两种方式? . [] 可以使用下面两种方式访问对象的属性和 ...
- Linux 虚拟内存和物理内存的理解
关于Linux 虚拟内存和物理内存的理解. 首先,让我们看下虚拟内存: 第一层理解 1. 每个进程都有自己独立的4G内存空间,各个进程的内存空间具有类似的结构 2. 一个新进程建立的时候,将会建立起自 ...