[ASP.NET MVC Mavericks Road] 03 - Razor 구문

[ASP.NET
MVC Mavericks Road] 03 - Razor 구문

Razor는 MVC3에만 있는 새로운 뷰 엔진입니다. 우리는 ASP.NET에서 ASPX 뷰 엔진이 를 사용하여 C# 명령을 호출한다는 것을 알고 있습니다. MVC3 이후에는 @ 표시를 사용하는 새로운 Razor 구문 세트가 있는데, 이는 사용하기 더 유연하고 간결합니다. 다음은 Razor 구문 사용을 빠르게 익히는 데 도움이 되는 몇 가지 간단한 예입니다.

이 기사의 내용

준비 작업

Razor 구문 사용을 시연하기 전에 몇 가지 준비 작업을 수행해야 합니다.

1. VS를 열고 ASP.NET MVC 빈 프로젝트를 만듭니다. 매우 간단하므로 자세히 설명하지 않습니다.

2. 모델을 추가합니다. 프로젝트의 Models 폴더에 Product라는 클래스를 추가합니다. 여기서는 이전 C# 지식 포인트 요약에 사용된 Product 클래스를 살펴보겠습니다. 코드는 다음과 같습니다.

namespace MvcApplication1.Models {
    public class Product {
        public int ProductID { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
        public string Category { set; get; }
    }
}

3. 컨트롤러를 추가합니다. 프로젝트에서 Controllers 폴더를 마우스 오른쪽 버튼으로 클릭하고 Add Controller를 선택하고 아래와 같이 이름을 지정합니다.

Add를 클릭한 후 ProdcutController에서 다음과 같이 코드를 편집합니다.

using System.Web.Mvc;
using MvcApplication1.Models; 

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            Product myProduct = new Product {
                ProductID = 1,
                Name = "苹果",
                Description = "又大又红的苹果",
                Category = "水果",
                Price = 5.9M
            };
            return View(myProduct); 
        }
    }
}

4. 뷰를 추가합니다. Index 방법을 마우스 오른쪽 버튼으로 클릭하고 Add View를 선택한 후 팝업 창에서 다음을 구성합니다.

Add를 클릭하면 시스템이 자동으로 Product 폴더와 Index.cshtml 파일, Index.cshtml 내용은 다음과 같습니다.

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

5. 기본 경로를 수정합니다. 편의를 위해 애플리케이션 시작을 필요한 요청 처리(이 경우 제품/인덱스)로 지정해야 합니다. Global.asax 파일을 열고 RegisterRoutes 메서드 아래에서 Routes.MapRoute 메서드를 찾은 다음 아래와 같이 컨트롤러 값을 "Product"로 변경합니다.

routes.MapRoute(
    "Default", // 路由名称
    "{controller}/{action}/{id}", // 带有参数的 URL
    new { controller = "Product", action = "Index", id = UrlParameter.Optional } // 参数默认值
);

이것이 의미하는 바에 관계없이, 라우팅은 이후 문서에서 구체적으로 소개됩니다. 이 시점에서 F5 키를 누르면 프로그램이 정상적으로 실행되고 준비가 완료됩니다.

Model 개체 사용

Razor 구문을 소개하면서 Index.cshtml 파일의 첫 번째 줄부터 시작해 보겠습니다.

@model MvcApplication1.Models.Product

Razor 문은 모두 @로 시작합니다. 기호 . 각 뷰에는 고유한 Model 속성(@Model을 통해 호출됨)이 있습니다. 위 코드는 이 뷰의 Model 특성 유형을 강력한 유형 지정을 구현하는 MvcApplication1.Models.Product 유형으로 지정한다는 의미입니다. 강력한 유형 지정의 이점 중 하나는 유형 안전성입니다. Model 개체의 멤버 이름을 잘못 작성하면 컴파일러에서 오류를 보고합니다. 또 다른 이점은 VS의 코드 지능형 프롬프트를 사용하여 코드 작성을 자동으로 완료할 수 있다는 것입니다. 회원 통화를 입력합니다. 물론 이 코드는 프로그램 없이도 정상적으로 실행될 수 있지만 코드 작성 시 특정 어려움을 초래할 뿐입니다.

뷰의 Model 속성은 컨트롤러가 전달한 모델 인스턴스 객체를 저장하는 데 사용됩니다(이 예에서는 ProductController가 "return View(myProduct)"를 통해 Index 뷰로 전달됨). 다음 코드는 모델 객체를 호출하는 방법을 보여줍니다.

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
<!-- 调用Product实例的Name属性 -->
<h2>名称：@Model.Name</h2>

Model 속성 유형을 선언하는 데 사용된 코드의 첫 번째 줄은 @model (소문자 m), 호출 컨트롤러가 전달한 Model 객체는 @Model.(대문자 M)을 사용합니다. F5 키를 누르면 효과는 다음과 같습니다.

표현식을 사용하세요.

上面讲的使用Model对象是很常用的一种Razor代码。其实上面示例中的@Model.Name就是一个简单的表达式，表示向Web页面呈现Model.Name的文本值。Razor语法中的表达式除了可以使用Model对象，也可以使用几乎任何一个其他可访问权限范围内的对象，来向Web面面输出该对象成员的文本值。如下代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

现在的时间是: @DateTime.Now.ToShortTimeString()

运行效果如下：

这种使用对象的简单表达式（@DateTime.Now.ToShortTimeString()和@Model.Name），在这我们不防称之为对象表达式。

除了对象表达式，还可以是其他任意的有返回值的表达式，如条件表达式。如下面代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

现在的时间是: @DateTime.Now.ToShortTimeString()


@(DateTime.Now.Hour>22 ? "还早，再写一会吧！" : "该睡觉咯！")

运行效果如下：

注意，一般使用非对象表达式时都需要用小括号括起来。

使用代码块

和表达式的使用方式一样，Razor语法中也可以使用由{}括起来的单个C#过程控制代码块（如if、switch、for等）。使用方式如下：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

@if (Model.Price > 5M) {
    string test = "买不起！";
    <p>@Model.Name <b>太贵了！</b> @test </p>
}

效果如下：

由{}括起来的代码块内可以写任何C#代码，也可以使用任何HTML标签。但需注意的是，当控制语句内只有一句代码时不能像写C#后台代码一样省略大括号。

还有一种更常用的使用代码块的方式。你也可以通过以@{开始，以}闭合的方式来使用代码块，它可以把多个代码块放在一起，开成一个更大的代码块。如下代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
@{
    if(Model.Category=="水果"){
        string test="是一种水果。";
        @Model.Name @test
    }
    if (Model.Price > 5M) {
        string test = "买不起！";
        <p>@Model.Name <b>太贵了！</b> @test </p>
    } 
}

运行结果如下：

使用@:和text标签

我们注意到，在代码块中，要么是C#代码，要么是HTML标签，不能直接写纯文字，纯文字须包裹在HTML标签内。但如果需要在代码块中直接输出纯文字而不带HTML标签，则可以使用@:标签，在代码块中输出纯文本文字非常有用。如下代码所示：

...

@if (Model.Price > 5M) {
    @Model.Name@:太贵了 。
    <br />
    @: @@:后面可以是一行除@字符以外的任意文本,包括<、>和空格，怎么写的就怎么输出。
    <br />
    @: 如果要输出@符号，当@符号前后都有非敏感字符（如<、｛、和空格等）时，可以直接使用@符号，否则需要使用两个@符号。
}

注意@符号的使用。上面代码运行效果如下：

使用@:标签在代码块中输出一行不带html标签的文本非常方便，但如果需要在代码块中输出续或不连续的多行纯文本，则使用text标签较为方便，如下代码所示：

...

@if (Model.Price > 5M) {
    <text>

    名称：<b>@Model.Name</b><br />
    分类：<b>@Model.Description</b><br />
    价钱：<b>@Model.Price</b><br />
    
    <pre class="brush:php;toolbar:false">
        测试行一: <a>aaaa</a>
        测试行二: @@ fda@aaa
    

}

运行结果：

使用ViewBag

上面讲了通过Model对象来从Controller传递数据到View。和Model对象一样，ViewBag对象也可以用来从Controller传递数据到View。下面代码演示了如何在ProductController中使用ViewBag：

public ActionResult Index()
{
    Product myProduct = new Product {
        ProductID = 1,
        Name = "苹果",
        Description = "又大又红的苹果",
        Category = "水果",
        Price = 5.9M
    };
    ViewBag.TestString = "这是一行测试文字！";
    return View(myProduct); 
}

不一样的是，ViewBag是动态类型，其中TestString是自己定义的。ViewBag在View中的使用方式是和Model一样，如下：

...

动态表达式解析的时间是：@ViewBag.TestString

运行结果就不贴图了。

使用Layuot

前面我们创建一个视图的时候，我们勾选了使用布局和母版页，但没有告诉VS使用哪一个。请仔细看下图：

这个对话框告诉我们“如果在Razor _viewstart中设置了此选项，则留空”。在项目的Views文件夹中，我们可以看到一个_ViewStart.cshtml文件，里面的内容是：

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

MVC呈现视图的时候，默认情况下会自动查找_ViewStart.cshtml文件，以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的，这种以下划线（_）开头的视图文件，一般是不能直接返回给用户。

使用布局或母版页的好处是，我们不需要在每个视图中都设置一份相同的内容。按照_ViewStart.cshtml文件内容指示的路径，我们找到_Layout.cshtml文件，打开它会发现我们在Index视图中定义的 ViewBag.Title = "Index" 就是在这里调用的：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

类似于ASP.NET母版页中的ContentPlaceHolder服务器控件，在MVC中使用@RenderBody()来呈现子Web页面的内容，它可以省去我们在每个视图文件中写相同的html元素、JS和样式等的工作。

如果创建一个视图不想使用Layout，则可以在创建视图的对话框取消“使用布局和母版页”选项，创建后会生成如下代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>About</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

由于没有使用Layout，视图中必须包含用于呈现HTML页面每个基本元素，而且必须指定Layout=null。

 以上就是[ASP.NET MVC 小牛之路]03 - Razor语法的内容，更多相关内容请关注PHP中文网（www.php.cn）！