ASP.NET MVC Unleashed (2) (续)

Creating the Views

An MVC view contains all of the HTML markup and view logic required to generate an HTML page. The set of views exposed by an ASP.NET MVC application is the public face of the application.

*** Begin Note ***

A view does not need to be HTML. For example, you can create Silverlight views. 

*** End Note ***

Our simple application needs two views: the Index and the Create view. We’ll use the Index view to displays the list of products and the Create view to display a form. for creating new products.

Adding the Index View

Let’s start by creating the Index view. Follow these steps:

1. Build your application by selecting the menu option Build, Build Solution.

2. Right-click the Index() action in the Code editor window and select the menu option Add View (see Figure 11).

3. In the Add View dialog, select the option Create a strongly-typed view.

4. In the Add View dialog, from the dropdown list labeled View data class, select the ToyStore.Models.Product class.

5. In the Add View dialog, from the dropdown list labeled View Content, select List.

6. Click the Add button to add the new view to your project (see Figure 12). 

创建视图

一个MVC视图包括了生成一个HTML页面所需要的所有HTML标记和视图逻辑。一个ASP.NET MVC应用程序所展示出的所有视图构成了该应用程序的公共界面。

【注意】一个视图并不需要是HTML页面，例如，您可以创建Silverlight视图。

我们这个简单的应用需要两个视图：Index和Create视图。我们将使用Index视图来显示一个产品的清单，使用Create视图来显示一个创建新产品的表单。

添加Index视图

我们开始创建Index视图。按照以下步骤做：

1. 选择Build菜单然后选择Build Solution（生成解决方案），生成您的应用程序；

2. 在代码编辑器窗口，用鼠标右击Index()行为，在弹出的上下文菜单中选择Add View菜单项（见图11）。

3. 在Add View对话框中，勾上Create a strongly-typed view选项；

4. 在Add View对话框中，从View data class标记的下拉列表框中，选择ToyStore.Models.Product类。

5. 在Add View对话框中，从View Content标记的下拉列表框中，选择List。

6. 点击Add按钮将这个新视图添加到您的项目里（见图12）。

Figure 11 – Adding a view

Figure 12 – The Add View dialog

*** Begin Note ***

You need to build your ASP.NET MVC application before adding a view with the Add View dialog in order to build the classes displayed by the View data class dropdown list. If your application has build errors then this list will be blank.

*** End Note ***

Views are added to the Views folder. Views follow a particular naming convention. A view returned by the Index() action exposed by the Home controller class is located at the following path:

\Views\Home\Index.aspx

In general, views follow the naming convention: 

\Views\Controller Name\Action Name.aspx

The contents of the Index view are contained in Listing 3. This view loops through all of the products and displays the products in an HTML table (see Figure 13).

【注意】您需要生成您的ASP.NET MVC应用程序后，才能够使用Add View对话框添加一个视图，生成应用程序后，View data class下拉列表框中才会显示您的数据类。如果您在生成应用时发生错误，下拉列表将是空白的。

添加的视图存放在Views文件夹下，视图使用一种特定的命名规范。Home控制器类的Index()行为所返回的视图位于如下的路径：

\Views\Home\Index.aspx

一般而言，视图按照如下的规范命名：

\Views\Controller Name\Action Name.aspx

Index视图的内容如Listing 3所示，该视图遍历所有的产品，并将这些产品显示为HTML表（table）（见图13）。

Listing 3 – Views\Home\Index.aspx [C#]

1. >" %>  

2.  

3.  

4.    Index  

5.  

6.  

7.  

8.  

9.    

Index

 

10.  

11.    

12.          

13.              

14.              

15.                Id   

16.            

 

17.              

18.                Name   

19.            

 

20.              

21.                Description   

22.            

 

23.              

24.                Price   

25.            

 

26.        

 

27.  

28.      

29.       

30.          

31.              

32.                 |   

33.                  

34.            

 

35.              

36.                  

37.            

 

38.              

39.                  

40.            

 

41.              

42.                  

43.            

 

44.              

45.                  

46.            

 

47.        

 

48.       

49.      

50.  

51.    

 

52.  

53.    

 

54.          

55.      

56.  

57.  

Figure 13 – The Index view

Notice that the Index view includes a link labeled Create New that appears at the bottom of the view. We add the Create view in the next section.

Adding the Create View

The Create view displays the HTML form. for adding a new product. We can follow a similar set of steps to add the Create view:

1. Right-click the first Create() action in the Code editor window and select the menu option Add View.

2. In the Add View dialog, select the option Create a strongly-typed view.

3. In the Add View dialog, from the dropdown list labeled View data class, select the ToyStore.Models.Product class.

4. In the Add View dialog, from the dropdown list labeled View Content, select Create.

5. Click the Add button to add the new view to your project (see Figure 14). 

The Create view is added to your project at the following location: 

\Views\Home\Create.aspx

The contents of the Create view are contained in Listing 4.

添加Create视图

Create视图显示一个HTML表单，用来添加新的产品。我们可以用类似步骤添加Create视图：

1. 在代码编辑器窗口中用鼠标右击第一个Create()行为，在弹出的上下文菜单中选择Add View菜单项。

2. 在Add View对话框中，勾上Create a strongly-typed view选项。

3. 在Add View对话框中，在View data class标记的下拉列表框里，选择ToyStore.Models.Product类。

4. 在Add View对话框中，在View Content标记的下拉列表框里，选择Create。

5. 点击Add按钮将这个新的视图添加到工程中（见图14）。

Figure 14 – Adding the Create view

Create视图被添加到您工程的以下路径：

\Views\Home\Create.aspx

Create视图的内容在Listing 4中显示。

Listing 4 – Views\Home\Create.aspx [C#]

1. " %>  

2.  

3.  

4.    Create  

5.  

6.  

7.  

8.  

9.    

Create

 

10.  

11.      

12.  

13.      

14.  

15.          

16.            Fields  

17.            

 

18.                Id:  

19.                  

20.                  

21.              

22.            

 

23.                Name:  

24.                  

25.                  

26.              

27.            

 

28.                Description:  

29.                  

30.                  

31.              

32.            

 

33.                Price:  

34.                  

35.                  

36.              

37.            

 

38.                  

39.              

40.          

41.  

42.      

43.  

44.    

 

45.          

46.    

 

47.  

48.  

The Create view displays an HTML form. for creating new products (see Figure 15). The Add View dialog generates HTML form. fields that correspond to each of the properties of the Product class. If you complete the HTML form. and submit it, a new product will be created in the database.

*** Begin Warning ***

Our Create form. does not perform. any validation. For example, if you enter the string “apple” for the Price field, the new product will be created in the database with the value 0 in its Price column.

*** End Warning ***

Summary

In this chapter, we used the ASP.NET MVC framework to build a simple database-driven web application. We created models, views, and controllers.

First, we created a database and a database model. We used Microsoft SQL Server Express for our database. We created our database model classes by taking advantage of the Microsoft Entity Framework. 

Next, we created the Home controller. We used Visual Studio to generate the actions for our Home controller automatically. We added a few lines of data access logic to interact with our database.

Finally, we created two views. We created an Index view that displays a list of all of the products in an HTML table. We also added a Create view that displays an HTML form. for adding a new product to the database.

Create视图显示一个HTML表单，用来创建新的产品（见图15）。Add View对话框会生成HTML表单元素，对应Product类的每一个属性。如果您填写好这个HTML表单并提交，将会在数据库中创建一个新的产品。

Figure 15 – The Create view

  小结

在本章里，我们用ASP.NET MVC框架创建了一个简单的数据驱动的Web应用，我们创建了模型，视图，以及控制器。

首先，我们创建了一个数据库和数据库模型，数据库我们采用了Microsoft SQL Server Express，我们利用了Microsoft实体框架创建了我们的数据库模型类。

接下来，我们创建了Home控制器，我们用Visual Studio为我们的Home控制器自动生成了一些行为，我们在其中添加了几行数据访问代码，与数据库交互。

最后，我们创建了两个视图。我们创建了Index视图，将产品清单在一张HTML表中显示出来。我们还创建了一个Create视图，显示一个HTML表单，可以往数据库中添加新的产品。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/740297/viewspace-559836/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/740297/viewspace-559836/