MVC4相关Razor语法(1)

快来打我* 2022-08-23 11:56 250阅读 0赞

默认建的工程都自带的了一个\_ViewStart.cshtml文件，文件里面的代码如下：

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

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

**\[csharp\]**  [view plain][view plain 1] [copy][view plain 1] [print][view plain 1] [?][view plain 1] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

这里的 **@\{Layout="文件路径";\}  **代码块指定了整个项目默认所使用的布局文件（如图：）

![SouthEast][]

左边蓝色部分显示了MVC4提供的默认的布局文件，我们看看\_Layout.cshtml里面的内容：

![SouthEast 1][]

不难看出，\_Layout.cshtml里面就是html静态页面。对于里面的一些语法做简单的说明：

@RenderBody()对于所有的页面默认的情况下都会使用这个布局(WebForm的模板)

@RenderBody()相当于一个占位符其他页面的所有内容都会被引擎渲染在这个地方。

@RenderSecion()这个占位符表示：在这里会渲染页面里面的一个节（可以是html代码也可以是c\#代码和Html的结合体）。

**Note:假如你不想使用默认的布局，或者是你的web应用有多个页面布局文件怎么办呢？**

其实很简单，例如：你新建了一个view页面UserInfo.cshtml，你可以在UserInfo.cshtml文件里面写上

**@\{Layout = null;\}**

就可以了，这个时候就不会应用布局文件了，假如你想定义一个新的**布局**(依照惯例优先的原则)，我们在Views/Shared下面创建一个自己的布局\_MyLayout.cshtml文件，然后我们给我们创建的新页面指定如下的布局就行了：

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

对于上面的

@RenderSection("scripts", required: false)做一个补充说明，第一个参数指明：在子页面被渲染的节的名称，第二个参数：指定子页面这个节是否是必需的，如果指定了required:true;但是在子页面没有给这个名称的节的话，编译是通不过的。

如果我们想在母版页使用默认的节可以做如下的判断：

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @**if**(IsSectionDefined("sectionName"))   
2.  \{   
3.        @RenderSection("sectionName")   
4.  \}  
5.  **else**   
6.  \{   
7.        <span>默认节</span>   
8.  \}

假如子页面有这个节我们就渲染子页面的，没有的话就显示我们默认的Html块(例如：网站的头部，底部，侧边栏等等)。

Razor语法的分类

**基本语法**

1.  @**using** ：引入命名空间  
2.  @model：声明强类型的数据Model类型  
3.  @section：定义要实现母版页的节信息   
4.  @RenderBody()：当创建基于此布局页面的视图时，视图的内容会和布局页面合并，而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。  
5.  @RenderPage：呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下：          
6.                  @RenderPage("~/Views/Shared/\_Header.cshtml")  
7.  @RenderSection：布局页面还有节（Section）的概念,便于局部呈现

**1.行内(inline)C\#(服务器端代码)形式（行内代码**）

@变量例如：@User.Name，变量或属性结束后，任何形式文本或者标签都自动被解析为html，如遇结束判断有歧义，请加括号如下

@( 表达式 )  例如：@(i + 1) 或 @(User.Name)    **括号里面为：表达式，或者变量**

@方法调用  例如：@Html.TextBox("UserName").ToString()

**2. 代码块**

**第一种情况：**

@\{ 代码块 \}

@if (条件) \{ 代码块 \}

@switch (条件) \{ 分支匹配代码块 \}

@for (循环控制) \{ 代码块 \}

@foreach (循环控制) \{ 代码块 \}

@while (循环控制) \{ 代码块 \}

@do \{ 代码块 \} while (循环控制) 『 代码块里面的代码要严格按照c\#语法来，每行结束必需有分号』

**第二种情况：(代码块中的文本或者Html客户端标签)**

**单行文本**

@:行内文本 换行的话自动变成了C\#服务器端代码。

**多行文本 **

任何标签对 例如：<div>多行文字</div>

任何自闭合标签 例如：<img 多行属性 />

纯文字使用伪标签<text> 例如：<text>多行文字，两侧标签不会被输出</text>

**3.其他**

电子邮箱可以自动识别，例如：123456@qq.com

被误认为是电子邮箱的请加括号(),例如：123456(@UserName)

要输出商标版权等的，请用@字符转义，例如：@@ →会输出单个字符@

**HtmlHelper和AjaxHelper**

**Html.BeginForm的两种写法：**

第一种使用Using语句:

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @**using**(Html.BeginForm())  
2.  \{  
3.        
4.  \}

第二种使用代码块闭合的形式(注意form是代码块形式的不是行内代码：所以结尾必需有分号)

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @\{Html.BeginForm();\}  
2.    
3.  @\{Html.EndForm();\}

Ajax.BeginForm()的写法只有一种：因为我并没有看到Ajax.EndForm()。呵呵估计是微软的开发团队开发Razor引擎的时候漏掉了

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @**using** (Ajax.BeginForm(**new** AjaxOptions \{ UpdateTargetId="",OnSuccess=""\}))  
2.  \{  
3.    
4.  \}

这里要想Ajax的Form有效的话我们必须在view页面引入支持Ajax的Js脚本。如下：

**\[csharp\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  @Scripts.Render("~/bundles/jqueryval")

这个是微软的脚本捆绑技术，实际上捆绑的就是（以下的JS代码）

![SouthEast 2][]  
不难看到其中就有ajax的Javascript脚本

对于AjaxForm的提交参数的指定：

当异步请求成功时，会去使用后端返回的内容局部更新UpdateTargetId所指定的客户端的html标签内容，然后调用OnSuccess指定的客户端的JS方法。

具体参数说明可以参照MSDN：

OnSuccess：[http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajax.ajaxoptions.onsuccess(v=vs.108).aspx][http_msdn.microsoft.com_zh-cn_library_system.web.mvc.ajax.ajaxoptions.onsuccess_v_vs.108_.aspx]

**对于Razor智能感知的一点补充**

在微软的cshtml页面，@后面跟一些对象的时候会自动出现智能感知

![SouthEast 3][]

当我们自定义一个类，让后想让这个类在Razor引擎有只能感知能力的时候。我们可以找到

Views/Web.config文件，打开文件我们会发现如下的节点：

**\[html\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  **<****system.web.webPages.razor****>**  
2.    **<****host** factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" **/>**  
3.    **<****pages** pageBaseType="System.Web.Mvc.WebViewPage"**>**  
4.      **<****namespaces****>**  
5.        **<****add** namespace="System.Web.Mvc" **/>**  
6.        **<****add** namespace="System.Web.Mvc.Ajax" **/>**  
7.        **<****add** namespace="System.Web.Mvc.Html" **/>**  
8.        **<****add** namespace="System.Web.Optimization"**/>**  
9.        **<****add** namespace="System.Web.Routing" **/>**  
10.     **</****namespaces****>**  
11.   **</****pages****>**  
12. **</****system.web.webPages.razor****>**

我们只要把我们的类所在的命名空间添加进去就可以了。

**Razor的一些实用功能（极大的灵活性）**

Partial Page Output Caching（部分页输出缓存）

我们可以使用@Html.Action()来请求一个处理方法，并将放返回的Model或者ViewModel对象渲染到页面。

![SouthEast 4][]![SouthEast 5][]

通过使用OutputCache特性，我们实现了对对象的缓存。因此当发生重复请求时，就可以自动输出缓存信息避免频繁查询数据库，减轻服务器负担和提高响应速度

[view plain]: http://blog.csdn.net/applewangpai/article/details/14052239#
[view plain 1]: http://blog.csdn.net/hcf_force/article/details/18698751#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/167658
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/167658/fork
[SouthEast]: /images/20220823/793661eac7454e9f84356f26123ff5f4.png
[SouthEast 1]: /images/20220823/9084c7f2520b4629a352a32d932588d0.png
[SouthEast 2]: /images/20220823/ab7891dea2e24d769acb2b23c7b481cb.png
[http_msdn.microsoft.com_zh-cn_library_system.web.mvc.ajax.ajaxoptions.onsuccess_v_vs.108_.aspx]: http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajax.ajaxoptions.onsuccess%28v=vs.108%29.aspx
[SouthEast 3]: /images/20220823/91967b65da4d43f0a49bf5b6c6ad76cd.png
[SouthEast 4]: https://img-blog.csdn.net/20131102130722421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXBwbGV3YW5ncGFp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 5]: /images/20220823/3fce3c4f8ed5483699d4ff42f800d31f.png