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

最新推荐文章于 2024-10-09 16:20:31 发布

angdian2335

最新推荐文章于 2024-10-09 16:20:31 发布

阅读量116

点赞数

文章标签：测试 javascript ViewUI

原文链接：http://www.cnblogs.com/boyliupan/archive/2012/03/31/2426760.html

版权

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内置的浏览器。