Razor的使用
1、引用对象模型
public ActionResult Index()
{
Product p = new Product();
p.Name = "ball";
return View(p);
}
@model Razor.Models.Product
如果一个视图页是一个强类型视图，那么就会在该视图页的最上方对需要的视图模型进行引用
2、使用视图模型
<div> @Model.Name </div>
3、使用视图包
在控制器中，先给视图包赋值 public Action Index(){ ViewBag.ApplyDiscount=false; } 在视图页中使用 <div data-discount="@ViewBag.ApplyDiscount"> @ViewBag.ApplyDiscount </div>
4、使用布局页
在Views文件夹内创建 _BasicLayout.cshtml 和 _ViewStart.cshtml 文件
@{ 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>
@{
Layout = "_BasicLayout.cshtml";
}
如果Layout不做任何声明（不写），那么会默认调用_ViewStart.cshtml（试图起始文件）内的内容。
如果不想引用任何布局页，那么就设置为null。
@model Razor.Models.Product
@{
ViewBag.title = "Product Name";//为ViewBag.title赋值（可以在controller中的动作中进行赋值）
//Layout = "../_BasicLayout.cshtml";
//Layout = null;
}
Product Name:@Model.name
在项目中使用了布局页，在视图页中引入了脚本，当我执行脚本请求后台的时候发生了两次请求的状况。当我在布局页中引用脚本的时候，两次请求的状况就消失了。
5、使用条件语句
<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、使用枚举
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、使用分段
<!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>
@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辅助方法，在主视图中对分时图进行调用。分视图主要的目的就是在于对 数据、内容 进行显示
@model IEnumerable<string> <div> This is the message from the partial view. <ul> @foreach (var item in Model) { <li>@item</li> } </ul> </div>
@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> 上面的 @：后面就输出了一个字符串
10、在ajax请求的时候，可以使用razor指定控制器的url
$.ajax({ type: "POST", url: '@Url.Action("PartialViewDemo", "Home")', data: data, datatype: "html", success: function (data) { $('#content').html(data); } });
11、文件引用
<script src="@Url.Content("~JS/index.js")" type="text/javascript"></script>
