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>

_BasicLayout.cshtml

@{
    Layout = "_BasicLayout.cshtml";
}

_ViewStart.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

Index（引用了布局文件的视图）

在项目中使用了布局页，在视图页中引入了脚本，当我执行脚本请求后台的时候发生了两次请求的状况。当我在布局页中引用脚本的时候，两次请求的状况就消失了。

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>

layout（布局页）代码

@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>

分视图——MyStronglyTypedPartial

@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);                   
                }
            });

ajax中中使用Razor

11、文件引用

<script src="@Url.Content("~JS/index.js")" type="text/javascript"></script>