[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 1. Creating the Project 创建项目

Creating the Project 创建项目

To demonstrate the key jQuery features, we have created a simple MVC Framework application that lists mountain summits and their heights. Given that jQuery is a client-side technology, we will focus on the Razor view and HTML that this application generates. Listing 20-1 shows the view.

为了展示JQuery的关键特性，我们创建了一个列出山顶高度的简单MVC框架应用，鉴于JQuery是一个客户端技术，我们将重点放在Razor视图以及这个应用所生成的HTML上。清单20-1 展示了该视图：

Listing 20-1. The Sample Application Index.cshtml View

@using MvcApp.Models; 
@model IEnumerable<Summit> 
@{ 
    ViewBag.Title = "List of Summits"; 
} 
 
<h4>Summits</h4> 
<table> 
    <thead> 
        <tr><th>Name</th><th>Height</th><th></th></tr> 
    </thead> 
    @foreach (Summit s in Model) { 
        <tr> 
            <td>@s.Name</td> 
            <td>@s.Height</td> 
            <td> 
                @using (Html.BeginForm("DeleteSummit", "Home")) { 
                    @Html.Hidden("name", @s.Name) 
                    <input type="submit" value="Delete" />    
                } 
            </td> 
        </tr> 
    } 
</table> 
 
@Html.ActionLink("Add", "AddSummit") 
@using (Html.BeginForm("ResetSummits", "Home")) { 
    <input type="submit" value="Reset" /> 
}

The view model for this view is a sequence of Summit objects, where the summit class has two properties: Name and Height. In the controller, we generate some example summits andpass them to the view, generating the HTML shown in Listing 20-2.

这个视图的View Model是一个Summit对象序列，Summit类包含两个属性：Name和Height。在控制器中，我们生成一些简单的summits对象并把他们传递给这个视图，列表20-2给出了生成的HTML代码。

Listing 20-2. The HTML Generated by the Sample Application

<!DOCTYPE html> 
<html> 
<head> 
   <title>List of Summits</title> 
   <link href="/Content/Site.css" rel="stylesheet" type="text/css" />   <script 
src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
</head> 
<body> 
   <h4>Summits</h4> 
   <table>      <thead>         <tr><th>Name</th><th>Height</th><th></th></tr> 
    </thead> 
        <tr>           <td>Everest</td> 
           <td>8848</td> 
           <td>           <form action="/Home/DeleteSummit" method="post"> 
               <input id="name" name="name" type="hidden" value="Everest" />                      
               <input type="submit" value="Delete" />    
           </form>             
        </td> 
     </tr> 
     <tr>        <td>Aconcagua</td>        <td>6962</td>        <td>        <form action="/Home/DeleteSummit" method="post"> 
           <input id="name" name="name" type="hidden" value="Aconcagua" />                     
           <input type="submit" value="Delete" />    
        </form>             
     </td>    </tr> 
    ...ommitted other summit tr elements... 
 
   </table> 
   <a href="/Home/AddSummit">Add</a>   <form action="/Home/ResetSummits" method="post">     
      <input type="submit" value="Reset" /> 
   </form> 
</body> 
</html>

We have omitted some of the table rows for clarity. Figure 20-1 shows how this HTML is displayed by the browser. We’ve switched away from the Visual Studio built-in browser for this chapter and used Internet Explorer 9 instead.

为了清晰起见，我们省略了表中的一些行。图20-1 展示了浏览器如何渲染这些HTML，在这章节，我们采用IE9替换VisualStudio内置的浏览器。

图20-1. The sample application HTML rendered by the browser

We know this looks pretty unpleasant, but bear with us. We’ll address some of the appearance issues as we explore the jQuery features.

我们可以看出这看起来让人相当不愉快，不过大家可以耐心等待，在我们探讨JQuery的特性的时候，我们会处理一些外观展示的问题。