MVC3.0+knockout.js+Ajax 实现简单的增删改查 - Eric.Chen - 推酷
MVC3.0+knockout.js+Ajax 实现简单的增删改查 - Eric.Chen
&&& 自从到北京入职以来就再也没有接触MVC，很多都已经淡忘了，最近一直在看knockout.js 和webAPI，本来打算采用MVC+knockout.js+webAPI来实现这个小DEMO的，无奈公司用的开发环境是VS2010只安装了MVC3.0。那就先练习一下MVC和knockout吧。博客园里有很多这样的文章，但是觉得还是要自己亲自动手写一下。
&&& 本文不讲解knockout.js和webAPI ，不了解的同学可以百度一下。下一篇博文将采用webAPI和Redis缓存作为服务端重写该项目。
&&& 我们采用MVC和knockout.js实现一个简单的学生信息管理，实现学生信息的增删改查功能。通过knockout.js来进行数据的绑定，你会发现代码变得很优雅。在该项目中我们会用到razor视图以及Layout模板、RenderSection和Html.Partial等razor语法中的基本功能
项目需要添加knockout.js文件的引用，可以到官网上下载。
一、我们新建一个空的MVC项目
knockout.js在Script文件夹中，只用关注带黄色底纹的文件，其他没有用。
二、文件讲解
1、& 我们先来看看_Layout.cshtml文件
_Layout.cshtml作为模板页面，Home文件夹下的所有*.cshtml都会引用该模板页，
一个区块，那么我们就可以在引用的具体页面中在该区域内添加css和js脚本了。@Html.Partial(&FootPartialPage&)说明我们引用了FootPartialPage. Cshtml的视图。
下面我们来看一下具体的代码
&!DOCTYPE html&
&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&
&script src=&@Url.Content(&~/Scripts/knockout-2.3.0.js&)& type=&text/javascript&&&/script&
@RenderSection(&Header&,false)
&div class=&top&&
&div class=&content&&
@RenderBody()
&div class=&foot&&
@Html.Partial(&FootPartialPage&)
2、Models/Students.cs
Students为我们定义的一个学生类的实体，作为数据的传递。
using System.Collections.G
using System.L
using System.W
namespace MvcApplication1.Models
public class Students
public string Num { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Sex { get; set; }
public string Class { get; set; }
3、& HomeController.cs控制器
HomeController中我们定义了很多Action，实现增删改查功能，直接看代码吧，Action中的代码最好配合着View来看。
using System.Collections.G
using System.L
using System.W
using System.Web.M
using MvcApplication1.M
using System.Runtime.Serialization.J
using System.IO;
namespace MvcApplication1.Controllers
public class HomeController : Controller
// GET: /Home/
private static List&Students& listStu = new List&Students&()
new Students(){Num=&s0001&,Name=&张三&,Age=19,Sex=&man&,Class=&计算机1班&},
new Students(){Num=&s0002&,Name=&李四&,Age=20,Sex=&man&,Class=&计算机1班&},
new Students(){Num=&s0003&,Name=&王五&,Age=18,Sex=&man&,Class=&计算机1班&},
new Students(){Num=&s0004&,Name=&小红&,Age=17,Sex=&women&,Class=&计算机'\&1班&},
public ActionResult Index()
//序列化为json数据
DataContractJsonSerializer Serializer = new DataContractJsonSerializer(typeof(List&Students&));
using (MemoryStream ms = new MemoryStream())
Serializer.WriteObject(ms,listStu);
ms.Flush();
ms.Seek(0, SeekOrigin.Begin);
StreamReader sr = new StreamReader(ms);
ViewBag.Data = sr.ReadToEnd();
return View(ViewBag);
//新增页面
public ActionResult Add()
return View();
//新增事件
[HttpPost]
public JsonResult Add(FormCollection form)
listStu.Add(
new Students() { Num = form[&Num&], Name = form[&Name&], Age = Convert.ToInt32(form[&Age&]), Sex = form[&Sex&], Class = form[&Class&] }
return Json(new { type = &success& });
//编辑页面
public ActionResult edit(string id)
var item = listStu.Find(it =& it.Num == id);
//序列化为json数据
DataContractJsonSerializer Serializer = new DataContractJsonSerializer(typeof(Students));
using (MemoryStream ms = new MemoryStream())
Serializer.WriteObject(ms, item);
ms.Flush();
ms.Seek(0, SeekOrigin.Begin);
StreamReader sr = new StreamReader(ms);
ViewBag.Data = sr.ReadToEnd();
return View(&eidt&);
//编辑事件
[HttpPost]
public JsonResult edit(FormCollection form)
string Num = form[&Num&];
var item = listStu.Find(it =& it.Num == Num);
item. Name = form[&Name&];
item. Age = Convert.ToInt32(form[&Age&]);
item. Sex = form[&Sex&];
item. Class = form[&Class&];
return Json(new { type = &success& });
[HttpPost]
public JsonResult Del(string id)
var item = listStu.Find(it =& it.Num == id);
listStu.Remove(item);
return Json(new { type = &sucess& });
4、& Index.cshtml视图
Index.cshtm是我们的首页，接收一个@ViewBag.Data的jason数据(该json数据是list&student&序列化来的，查看源代码就可以看到该数据)，通过knockout.js把数据绑定到页面中。代码如下：
ViewBag.Title = &Index&;
Layout = &~/Views/Shared/_Layout.cshtml&;
@section Header{
&script type=&text/javascript&&
var data =@Html.Raw(@ViewBag.Data);
function ViewModel(){
var self=this;
self.students=ko.observableArray(data);//添加动态监视数组对象
self.remove=function(stu){
url:&/Home/Del/&+stu.Num,
type:&post&,
dataType:&json&,
success:function(json){
alert(json.type);
self.students.remove(stu);
self.edit=function(stu){
window.location.href='/Home/edit/'+stu.N
self.Count=ko.computed(function(){
return self.students().
$(document).ready(function(){
var vm=new ViewModel();
/* 新增元素
var obj=new Object();
obj.Num='s0002';
obj.Name='eric';
obj.Age='25';
obj.Sex='男';
obj.Class='计算机2班';
vm.students.push(obj);
ko.applyBindings(vm);
&div style=& margin-bottom:5&&
&a href=&/Home/Add/&&增加&/a&
&table cellpadding=&1& cellspacing=&1& border=&1& width=&100%&&
&th style=&width:auto&&姓名&/th&
&th style=&width:auto&&年龄&/th&
&th style=&width:auto&&性别&/th&
&th style=&width:auto&&班级&/th&
&th style=&width:auto&&操作&/th&
&tbody data-bind=&foreach:students&&
&td data-bind=&text:Name&&&/td&
&td data-bind=&text:Age&&&/td&
&td data-bind=&text:Sex&&&/td&
&td data-bind=&text:Class&&&/td&
&td & &a href=&javascript:& data-bind=&click:$root.remove&&删除&/a& &a href=&javascript:& data-bind=&click:$root.edit&&修改&/a&&/td&
&div data-bind=&text:Count&&&/div&
5、& eidt.cshtml视图
eidt.cshtml是编辑学生信息的页面，与Index.cshtm页面类似，该页面也是接收一个json数据，并通过knockout.js把数据绑定到页面中
ViewBag.Title = &eidt&;
Layout = &~/Views/Shared/_Layout.cshtml&;
@section Header{
&script type=&text/javascript&&
var data =@Html.Raw(@ViewBag.Data);
function ViewModel(){
var self=this;
self.Num=ko.observable(data.Num);
self.Name=ko.observable(data.Name);
self.Age=ko.observable(data.Age);
self.Sex=ko.observable(data.Sex);
self.Class=ko.observable(data.Class);
mit1=function(){
//alert(self.Num()+&,&+self.Name()+&,&+self.Age()+&,&+self.Sex()+&,&+self.Class());
type:&post&,
url:&/Home/edit&,
data:{Num:self.Num(),Name:self.Name,Age:self.Age,Sex:self.Sex,Class:self.Class},
success:function(json){
alert(json.type);
self.back=function(){
window.location.href='/Home/Index';
$(document).ready(function(){
var vm=new ViewModel();
ko.applyBindings(vm);
&h2&eidt&/h2&
&table cellpadding=&1& cellspacing=&1& border=&1& width=&100%&&
&td style=&width:100px&&姓名：&/td&
&td&&input type=&text& data-bind=&value:Name& /&&/td&
&td style=&width:100px&&年龄：&/td&
&td&&input type=&text& data-bind=&value:Age& /&&/td&
&td style=&width:100px&&性别：&/td&
&td&&input type=&text& data-bind=&value:Sex& /&&/td&
&td style=&width:100px&&班级：&/td&
&td&&input type=&text& data-bind=&value:Class& /&&/td&
&div style=& margin-top:5px&&
&input type=&button& data-bind=&click:$mit1& value=&提交&/& &&
&input type=&button& data-bind=&click:$root.back& value=&返回&/&
6、& Add.cshtml 视图
Add.cshtml是添加用户信息的页面与eidt.cshtml页面非常类似，直接上代码
ViewBag.Title = &Add&;
Layout = &~/Views/Shared/_Layout.cshtml&;
@section Header{
&script type=&text/javascript&&
function ViewModel(){
var self=this;
self.Num=ko.observable();
self.Name=ko.observable();
self.Age=ko.observable();
self.Sex=ko.observable();
self.Class=ko.observable();
mit1 = function () {
type: &post&,
url: &/Home/Add&,
data: { Num: self.Num(), Name: self.Name(), Age: self.Age(), Sex: self.Sex, Class: self.Class },
success: function (json) {
alert(json.type);
self.back=function(){
window.location.href='/Home/Index';
$(document).ready(function(){
var vm=new ViewModel();
ko.applyBindings(vm);
&h2&Add&/h2&
&table cellpadding=&1& cellspacing=&1& border=&1& width=&100%&&
&td style=&width:100px&&学号：&/td&
&td&&input type=&text& data-bind=&value:Num& /&&/td&
&td style=&width:100px&&姓名：&/td&
&td&&input type=&text& data-bind=&value:Name& /&&/td&
&td style=&width:100px&&年龄：&/td&
&td&&input type=&text& data-bind=&value:Age& /&&/td&
&td style=&width:100px&&性别：&/td&
&td&&input type=&text& data-bind=&value:Sex& /&&/td&
&td style=&width:100px&&班级：&/td&
&td&&input type=&text& data-bind=&value:Class& /&&/td&
&div style=& margin-top:5px&&
&input type=&button& data-bind=&click:$mit1& value=&提交&/& &&
&input type=&button& data-bind=&click:$root.back& value=&返回&/&
到此该列子已经讲解完毕，
此处下载源代码。
下一章中我们采用webAPI作为服务来实现该列子。
每天学习一点点，每天进步一点点。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致原来没注意到。。。。。。。
在编码过程中也遇到了一些问题，就是Razor的@标记，这个标记到底什么时候该加什么时候不该加呢？
　　先看一段代码（只是为了说明问题用，没任何意义）吧：
&1 &div& 2&&&& for(int i=0;i&3;i++) 3&&&& { 4&&&&&&&& &/div&i&div& 5&&&&&&&& for(int j=0;j&3;j++) 6&&&&&&&& { 7&&&&&&&&&&&& if(j==1) 8&&&&&&&&&&&& { 9&&&&&&&&&&&&&&&& &div&10&&&&&&&&&&&&&&&&&&&& for(int k=0;k&5;k++)11&&&&&&&&&&&&&&&&&&&& {12&&&&&&&&&&&&&& &&&&&&&&&&k++;13&&&&&&&&&&&&&&&& &&&&&&&&&span&14&&&&&&&&&&&&&&&&&&&&&&&&&&&& k15&&&&&&&&&&&&&&&&&&&&&&&& &/span&16&&&&&&&&&&&&&&&&&&&& }17&&&&&&&&&&&&&&&& &/div&18&&&&&&&&&&&&&&&&19&&&&&&&&&&&& }20&&&&&&&& }21&&&& }22 &/div&　　这一段代码没添加任何@标记，肯定是有问题的，你能准确地判断出这段代码中哪些地方要添加@标记吗？看到这里，停几分钟，填上你的答案吧：），然后把你的答案跟下面的参考答案做个对比吧，如果你很确定地完成了并且完全正确，那么恭喜你，这个知识点你已经掌握了，下面的内容你可以直接跳过了。
　　参考答案：
&1 &div& 2&&&& @for(int i=0;i&3;i++) 3&&&& { 4&&&&&&&& @:&/div&@i&div& 5&&&&&&&& for(int j=0;j&3;j++) 6&&&&&&&& { 7&&&&&&&&&&&& if(j==1) 8&&&&&&&&&&&& { 9&& &&&&&&&&&&&&&&&div&10&&&&&&&&&&&&&&&&&&&& @for(int k=0;k&5;k++)11&&&&&&&&&&&&&&&&&&&& {12&&&&&&&&& &&&&&&&&&&&&&&&k++;13&&&&&&&&&&&&&&&&&&&&&&&& &span&14&&&&&&&&&&&&&&&&&&&&&&&&&&&& @k15&&&&&&&&&&&&&&&&&&&&&&&& &/span&16&&&&&&&&&&&&&&&&&&&& }17&&&&&&&&&&& &&&&&&/div&18&&&&&&&&&&&&&&&&19&&&&&&&&&&&& }20&&&&&&&& }21&&&& }22 &/div&　　亲，做错的童鞋有木有，有木有。做错了也没什么关系啦，我之前也错了呢，这里给出一个小小的规则（自己定义的，不一定准确，如果已经有专用名词欢迎大家指出），掌握这个小规则后你就很容易做对了。
　　Razor语法中有block(块)的说法，这个大家应该都不陌生了，就是代码段，如我们可以把using(){}包起来的代码叫一个block(段/块)，block内部还可以有block，这个是可以嵌套的。比如上面的示例代码中我们可以把最外层的for循环内部的代码（第2行到第21行）是一个block，第4行是一个代码块，第二个for循环内部的代码（第5行到第20行）也可以叫一个block，划分不是固定的，粒度你可以自己定义。
　　block内部的代码分为两种，一种是HTML代码块，一种是C#（本例中为C#，也可以是其他.NET语言）代码块。有了block的概念后，Razor中@标记的规则就是：
如果同一种代码块（HTML代码块不需要加@，这里排除开）内部跟的是同类代码块，这时不需要加@标记，否则要加@标记
　　用这个规则逐一解析一下上面的代码，在解析之前我的block划分是这样的：
　　第1&22行，2&21行，第4行，5&20行，7&19行，9&17行，10&16行，12行，13&15行，14行
　　我们从里往外看，第14行外层block是HTML代码，所以第14行要加@，12行外层block也是C#代码块，因此不加，以此类推，直到第5行，这一行有点特殊，这个涉及到VS中的标签匹配。
　　我们知道VS能在编码时对HTML标签进行匹配，这个匹配只是给出警告，并不是强制的，用了Razor后，混在C#（也可以是其他语言）中的HTML标签也要进行匹配，只是这个匹配是在代码块内部进行的，同时也是野蛮的，如果不匹配就会出错，例如下面的代码是通不过的：
2&&&& &tr&
3&&&& @if(true)
5&&&&&&&& &/tr&
7 &/div&　　
错误页面：
　　改为这样就好了：
2&&&& &tr&
3&&&& @if(true)
5&&&&&&&& &tr&&/tr&
7 &/div&　　
那么如果遇到像最开始那段代码&/div&&div&这样进行拼接的HTML怎么办呢，Razor提供了两种方案，一是在前面加上&@：&，如@:&/div&&div&；一是用@Html.Raw，如：@Html.Raw("&/div&&div&");
　　了解了这点后代码一第4行就应该这样：@:&/div&@i&div&，第4行没问题了，最后只剩第5行了，这时直接把第4行忽略，按规则写就OK了，因为第2行是C#代码块，因此第5行不需要添加@。
　　好了，写到这里只剩最后一个点了，如果把代码一中第4行改为&div&i&/div&，那么第5行应该是什么样的呢？如果Razor内HTML标签是匹配的，Razor可以识别，这时可以忽略匹配的HTML标签对即可。
　　规则有时并不是万能的，极个别的还是要经过尝试，最后说个小小的技巧，可以把Razor代码背景颜色改一下，这样就能比较容易地识别了：
这是我正在写的博文系列中的另一篇,涵盖ASP.NET MVC 3的一些新功能：
&&&&&&&& Razor的@:和&syntax&语法（今天）
本文将讨论新版Razor里视图引擎中支持的两个有用的语法功能：@:和&text&语法。
用Razor实现流畅编程
ASP.NET MVC 3配有一个新的名为&Razor&的视图引擎选项(除了已有的.aspx视图引擎)。您可以在我发表的&的博客上了解更多关于Razor的信息，比如我们为什么要引进它以及 它所支持的语法。
Razor尽量减少编写一个视图模板需要敲入的字符数，实现快速流畅的编程工作流。与大部分模板的语法不同，你不必在HTML中为了明确地标记出服务模块的开始和结束而中断编程。Razor解析器足够聪明，能从你的代码中推断出来。这使其简洁，富有表现力的语法输入干净，快速，有趣。
例如下面的代码片段迭代一列商品(product)：
当运行时它产生的结果如下:
Razor用来隐式鉴别一个代码段什么时候结束的一个方法是寻找代表内容块开始的标记或元素内容。例如，在上面的代码段中Razor自动地把foreach循环里面的&li&&/li&模块当作一个HTML内容块，因为它看到开始的&li&标记序列并且知道这在C#中是无效的。
这个独特的技术&&使用标记来识别代码中的内容块&&是使Razor在涉及HTML生成的情况下简洁高效的一个重要因素。
用@明确表示内容的起始
然而不是所有的内容块都是以标记元开始，在有些案例中，Razor解析器不能隐式检测出内容块。
这就需要Razor通过在代码块中使用&@：字符序列&来显式指明内容块的开始。@：序列表明该行后面的内容应该被视为内容块：
举个更实际的例子。下面的代码段显示在商品脱销的时候，我们如何在商品名旁边输出信息&(已售完!)&：
由于我没有将消息&已售完！&嵌套在HTML标签元素内，Razor不能隐式判断@if块中的内容是否是一个内容块的开始。我们用&@：字符序列&来明确地指出我们代码段里的这行应被当作是内容块。
在@：内容块中使用代码碎块(Code Nugget)
除了输出静态内容，你也可以使代码碎块嵌入以@：字符序列开始的内容块中。
例如，在下面的代码段中我们有两个@：字符序列：
注意我们在第二个@:序列中如何发送内容块中的单品(Unit)数目的（例如&只剩下3了！&）。我们通过在内容行中嵌入一个@p.UnitsInStock代码碎块来实现。
Razor使在HTML元素中包装多行内容变得简单。例如，下面我们的@if容器中的内容块被包装在一个HTML&p&元素中，这会使得Razor把它当作内容：
对于在那些没有被外部HTML元素包装的多行内容情形，你可以使用多个@: 序列：
另外 ，Razor允许你用一个&text&元素 来显式标识内容：
&text&标签是一个 Razor 特殊处理的元素。Razor将&text&块的内部内容视为内容块，不呈现包含那些内容的&text&标签（这意味着只呈现&text&内部内容，不呈现标签本身）。这使呈现没有被HTML元素包装的多行内容块变得方便。
如果你想要更简洁的@: 序列，&text&元素也能根据需要用来标识单行内容：
上面的代码将呈现出和我们早期看过的@:版本相同的输出。Razor会自动地从输出结果中省略掉&text&包装部件，只是呈现出&text&里面的内容。
Razor启用一种简洁的模式化语法，实现非常流畅的编码工作流。 Razor能灵活地通过检测&tag&元素来识别内容块的起始， 从而让Razor方法在有HTML生成的场景中很有效，也使你不用明显地标注95% 的 if/else 和foreach 场景中内容块的开始/结束.
在当你不想在一个代码容器块中使用HTML元素，却需要更精确地标明一个内容块的边界时，你可以使用Razor的@:和&text&句法。
阅读(...) 评论()17316人阅读
MVC4相关Razor（4）

默认建的工程都自带的了一个_ViewStart.cshtml文件，文件里面的代码如下：
@{&Layout&=&&~/Views/Shared/_Layout.cshtml&;}&&
@{ Layout = &~/Views/Shared/_Layout.cshtml&;}
这里的 &@{Layout=&文件路径&;}&&代码块指定了整个项目默认所使用的布局文件（如图：）
左边蓝色部分显示了MVC4提供的默认的布局文件，我们看看_Layout.cshtml里面的内容：
不难看出，_Layout.cshtml里面就是html静态页面。对于里面的一些语法做简单的说明：
@RenderBody()对于所有的页面默认的情况下都会使用这个布局(WebForm的模板)
@RenderBody()相当于一个占位符其他页面的所有内容都会被引擎渲染在这个地方。
@RenderSecion()这个占位符表示：在这里会渲染页面里面的一个节（可以是html代码也可以是c#代码和Html的结合体）。
Note:假如你不想使用默认的布局，或者是你的web应用有多个页面布局文件怎么办呢？
其实很简单，例如：你新建了一个view页面UserInfo.cshtml，你可以在UserInfo.cshtml文件里面写上
@{Layout =}
就可以了，这个时候就不会应用布局文件了，假如你想定义一个新的布局(依照惯例优先的原则)，我们在Views/Shared下面创建一个自己的布局_MyLayout.cshtml文件，然后我们给我们创建的新页面指定如下的布局就行了：
@{ Layout = &~/Views/Shared/_MyLayout.cshtml&;}
对于上面的
@RenderSection(&scripts&, required: false)做一个补充说明，第一个参数指明：在子页面被渲染的节的名称，第二个参数：指定子页面这个节是否是必需的，如果指定了required:但是在子页面没有给这个名称的节的话，编译是通不过的。
如果我们想在母版页使用默认的节可以做如下的判断：
@if(IsSectionDefined(&sectionName&))&&&{&&&&&&&&&@RenderSection(&sectionName&)&&&}&&else&&&{&&&&&&&&&&span&默认节&/span&&&&}&&
@if(IsSectionDefined(&sectionName&))
@RenderSection(&sectionName&)
&span&默认节&/span&
假如子页面有这个节我们就渲染子页面的，没有的话就显示我们默认的Html块(例如：网站的头部，底部，侧边栏等等)。
Razor语法的分类
@using&：引入命名空间&&@model：声明强类型的数据Model类型&&@section：定义要实现母版页的节信息&&&@RenderBody()：当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。&&@RenderPage：呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下：&&&&&&&&&&&&&&&&&&&&&&&&&&@RenderPage(&~/Views/Shared/_Header.cshtml&)&&@RenderSection：布局页面还有节（Section）的概念,便于局部呈现&&
@using ：引入命名空间
@model：声明强类型的数据Model类型
@section：定义要实现母版页的节信息
@RenderBody()：当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。
@RenderPage：呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下：
@RenderPage(&~/Views/Shared/_Header.cshtml&)
@RenderSection：布局页面还有节（Section）的概念,便于局部呈现
1.行内(inline)C#(服务器端代码)形式（行内代码）
@变量例如：@User.Name，变量或属性结束后，任何形式文本或者标签都自动被解析为html，如遇结束判断有歧义，请加括号如下
@( 表达式 )& 例如：@(i + 1) 或 @(User.Name) & &括号里面为：表达式，或者变量
@方法调用&
例如：@Html.TextBox(&UserName&).ToString()
第一种情况：
@{ 代码块 }
@if (条件) { 代码块 }
@switch (条件) { 分支匹配代码块 }
@for (循环控制) { 代码块 }
@foreach (循环控制) { 代码块 }
@while (循环控制) { 代码块 }
@do { 代码块 } while (循环控制)
『 代码块里面的代码要严格按照c#语法来，每行结束必需有分号』
第二种情况：(代码块中的文本或者Html客户端标签)
@:行内文本 换行的话自动变成了C#服务器端代码。
任何标签对 例如：&div&多行文字&/div&
任何自闭合标签 例如：&img 多行属性 /&
纯文字使用伪标签&text& 例如：&text&多行文字，两侧标签不会被输出&/text&
电子邮箱可以自动识别，例如：
被误认为是电子邮箱的请加括号(),例如：123456(@UserName)
要输出商标版权等的，请用@字符转义，例如：@@ →会输出单个字符@
HtmlHelper和AjaxHelper
Html.BeginForm的两种写法：
第一种使用Using语句:
@using(Html.BeginForm())&&{&&&&&&&&}&&
@using(Html.BeginForm())
}第二种使用代码块闭合的形式(注意form是代码块形式的不是行内代码：所以结尾必需有分号)
@{Html.BeginForm();}&&&&@{Html.EndForm();}&&
@{Html.BeginForm();}
@{Html.EndForm();}Ajax.BeginForm()的写法只有一种：因为我并没有看到Ajax.EndForm()。呵呵估计是微软的开发团队开发Razor引擎的时候漏掉了
@using&(Ajax.BeginForm(new&AjaxOptions&{&UpdateTargetId=&&,OnSuccess=&&}))&&{&&&&}&&
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId=&&,OnSuccess=&&}))
}这里要想Ajax的Form有效的话我们必须在view页面引入支持Ajax的Js脚本。如下：
@Scripts.Render(&~/bundles/jqueryval&)&&
@Scripts.Render(&~/bundles/jqueryval&)这个是微软的脚本捆绑技术，实际上捆绑的就是（以下的JS代码）
不难看到其中就有ajax的Javascript脚本
对于AjaxForm的提交参数的指定：
当异步请求成功时，会去使用后端返回的内容局部更新UpdateTargetId所指定的客户端的html标签内容，然后调用OnSuccess指定的客户端的JS方法。
具体参数说明可以参照MSDN：
OnSuccess：
对于Razor智能感知的一点补充
在微软的cshtml页面，@后面跟一些对象的时候会自动出现智能感知
当我们自定义一个类，让后想让这个类在Razor引擎有只能感知能力的时候。我们可以找到
Views/Web.config文件，打开文件我们会发现如下的节点：
&&&&&factoryType=&System.Web.Mvc.MvcWebRazorHostFactory,&System.Web.Mvc,&Version=4.0.0.0,&Culture=neutral,&PublicKeyToken=31BF&&&&&&&pageBaseType=&System.Web.Mvc.WebViewPage&&&&&&&&&&&&&&&&namespace=&System.Web.Mvc&&&&&&&&&&&namespace=&System.Web.Mvc.Ajax&&&&&&&&&&&namespace=&System.Web.Mvc.Html&&&&&&&&&&&namespace=&System.Web.Optimization&&&&&&&&&&namespace=&System.Web.Routing&&&&&&&&&&&&&&&&
&system.web.webPages.razor&
&host factoryType=&System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF& /&
&pages pageBaseType=&System.Web.Mvc.WebViewPage&&
&namespaces&
&add namespace=&System.Web.Mvc& /&
&add namespace=&System.Web.Mvc.Ajax& /&
&add namespace=&System.Web.Mvc.Html& /&
&add namespace=&System.Web.Optimization&/&
&add namespace=&System.Web.Routing& /&
&/namespaces&
&/system.web.webPages.razor&我们只要把我们的类所在的命名空间添加进去就可以了。
Razor的一些实用功能（极大的灵活性）
Partial Page Output Caching（部分页输出缓存）
我们可以使用@Html.Action()来请求一个处理方法，并将放返回的Model或者ViewModel对象渲染到页面。
通过使用OutputCache特性，我们实现了对对象的缓存。因此当发生重复请求时，就可以自动输出缓存信息避免频繁查询数据库，减轻服务器负担和提高响应速度
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：383909次
积分：3668
积分：3668
排名：第8070名
原创：73篇
转载：41篇
译文：10篇
评论：37条
(2)(2)(1)(2)(4)(6)(9)(4)(1)(2)(2)(3)(3)(6)(9)(3)(5)(6)(6)(6)(4)(9)(13)(7)(2)(6)}