1、引用对象模型
@model Razor.Models.Product
如果一个视图页是一个强类型视图,那么就会在该视图页的最上方对需要的视图模型进行引用
2、使用视图包
在控制器中,先给视图包赋值 public Action Index(){ ViewBag.ApplyDiscount=false; } 在视图页中使用 <div data-discount="@ViewBag.ApplyDiscount"> @ViewBag.ApplyDiscount </div>
3、使用视图模型
<div> @Model.Name </div> 在视图页中使用视图模型
4、使用布局页
在Views文件夹内创建 _BasicLayout.cshtml 和 _ViewStart.cshtml 文件
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.title</title> </head> <body> <h1> Product Information </h1> <div style="padding: 20px; border: 1px solid black; font-size: 20pt;"> @RenderBody() @*引用该布局页的视图都会填充在这个div标签内*@ </div> <div> <h2> Visit<a href="http://apress.com">Apress</a> </h2> </div> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@{
Layout = "_BasicLayout.cshtml";
}
如果Layout不做任何声明(不写),那么会默认调用_ViewStart.cshtml(试图起始文件)内的内容。
如果不想引用任何布局页,那么就设置为null。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@model Razor.Models.Product
@{
ViewBag.title = "Product Name";//为ViewBag.title赋值(可以在controller中的动作中进行赋值)
//Layout = "../_BasicLayout.cshtml";
//Layout = null;
}
Product Name:@Model.name
在项目中使用了布局页,在视图页中引入了脚本,当我执行脚本请求后台的时候发生了两次请求的状况。当我在布局页中引用脚本的时候,两次请求的状况就消失了。
5、使用条件语句
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<tr> <td>Stock Level</td> <td> @switch ((int)@ViewBag.ProductCount) { case 0://如果不想被razor翻译成C#语言,可以使用@: @:Out of Stock break; case 1: <b>Low Stock(@ViewBag.ProductCount)</b> break; default: @ViewBag.ProductCount break; } </td> </tr>
6、使用枚举
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
model Razor.Models.Product【】 @if(Model.Length>0){ <table> <th>Product</th><th>Price</th> @foreach (var item in Model){ <tr> <td>@item.Name</td> <td>@item.Price</td> </tr> } </table> } else { <h2>No product data</h2> }
7、处理命名空间
@using Razor.Models
@model Product[]
一个页面中可以使用多个using
8、使用分段
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div.layout { background-color: #86DEF5; } div.view { border: thin solid black; margin: 10px 0; } </style> @*在布局页中加载一次jquery,在后面的页面中,只要引用了该布局页的视图页就不需要再次引用Jquery了。*@ <script src="~/Scripts/jquery-1.10.2.min.js"></script> <title>布局页</title> </head> <body> @RenderSection("Header") <div class="layout"> 这里是布局页中生成的内容</div> @RenderSection("Body") <div class="layout"> 这里是布局页中生成的内容</div> @*@RenderSection("Footer",false)如果没有默认要显示的内容,可以传入第二个参数,这样就可以检测布局页中是否需要渲染footer区域的内容了*@ @if (IsSectionDefined("Footer")) { @RenderSection("Footer") } else { <h5>如果视图页中有分段内容,那么就用分段内容,如果没有分段内容,那么就使用此处的内容</h5> } <div class="layout"> 这里是布局页中生成的内容</div> <script src="~/Scripts/bootstrap.min.js"></script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@model string[] @{ ViewBag.Title = "Index"; } @section Header{ This is a list of fruit: @foreach (var item in Model) { <p>@item</p> } } @section Body{ <button id="btn">按钮</button> } @*@section Footer{ <label>这里显示的是布局页中,footer区域的内容</label> }*@ <script> $(function () { $("#btn").click(function () { alert("你好"); }); }); </script>
9、善于使用HTML辅助方法,在主视图中对分时图进行调用。分视图主要的目的就是在于对 数据、内容 进行显示
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@model IEnumerable<string> <div> This is the message from the partial view. <ul> @foreach (var item in Model) { <li>@item</li> } </ul> </div>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@Html.Partial("MyStronglyTypedPartial", new[] { "Apple", "Orange", "Pear" }); Razor视图引擎会在 ~/Views/<controller>或者在~/View/Shared文件夹里面对分视图进行查找。
在分视图中使用了html辅助方法生成了链接。如果在A控制器对应的主视图中对该分视图进行调用,那么该链接会指向A控制器,如果在B控制器的主视图里调用,那么就会指向B控制器(假定A和B控制器中都有相同名称的ActionResult)
在Razor语句块中输出一个字符串
<tr> <td>Stock Level</td> <td> @if(ViewBag.ProductCount==0){ @:Out of Stock }else{ @ViewBag.ProductCount } </td> </tr> 上面的 @:后面就输出了一个字符串
在ajax请求的时候,可以使用razor指定控制器的url
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$.ajax({ type: "POST", url: '@Url.Action("PartialViewDemo", "Home")', data: data, datatype: "html", success: function (data) { $('#content').html(data); } });