博客园_牧童----舞动的code

[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 0.引言

2012-04-10T09:28:00Z

Write less, do more—that’s the core promise of jQuery, a free, open source JavaScript library first released in 2006. It has won kudos from web developers on all platforms because of the way it cuts out the pain of client-side coding. It provides an elegant CSS 3–based syntax for traversing your DOM, a fluent API for manipulating and animating DOM elements, and extremely concise wrappers for Ajax calls—all carefully abstracted to eliminate cross-browser differences.
写得少、做得多 — 这是jQuery的核心承诺，它是2006年发布的一个免费开源的JavaScript库。由于它彻底消除了客户端编码的痛苦，已经在所有平台的web开发者中赢利了很高的声望。jQuery提供了一个基于CSS 3的优雅语法来遍历DOM、一个流畅的API来操纵和活跃DOM元素、还有非常简练的封装程序进行Ajax调用 — 所有这些都作了精心提炼，以消除跨浏览器的差异。
Microsoft has embraced jQuery and integrated it into the MVC Framework. When we looked at unobtrusive client validation and Ajax, it was jQuery that was doing all the hard work behind the scenes.
微软已经采纳了jQuery，并将其集成到了MVC框架中。当我们不经意地看到客户端验证和Ajax效果时，其实正是jQuery在幕后辛勤劳作。
jQuery is extensible, has a rich ecosystem of free plug-ins, and encourages a coding style that retains basic functionality when JavaScript isn’t available. We won’t claim it makes all client-side coding easy, but it is usually far easier than raw JavaScript, and it works great with the MVC Framework. In this chapter, we’ll show you the basic theory of jQuery and how to use it to add some sparkle to an MVC Framework application.
jQuery是可扩展的、具有丰富的免费插件、而且在JavaScript失效时鼓励采用一种保留基本功能的编码风格。我们并非声称它会使所有客户端编码简易，但它确实比原先的JavaScript容易许多，而且它与MVC框架配合得很好。在本章中，我们将向你演示jQuery的基本理论，以及如何用它把一些闪光的东西添加到MVC框架的应用程序上。
In a book about the MVC Framework, there is a limit to how much detail we can provide about jQuery. If you want to go beyond the examples we provide in this chapter (and we suggest you do), then you can find a wealth of information about jQuery at www.jquery.com. We recommend the book jQuery in Action, by Bear Bibeault and Yehuda Katz, published by Manning.
在一本关于MVC框架的书中，我们不可能提供jQuery的很多细节。如果你想进入我们本章所提供的示例之外的领域（而且我们建议你这样做），那么你可以在www.jquery.com上找到jQuery的丰富信息。我们也推荐《jQuery in Action》这本书，由Bear Bibeault和Yehuda Katz所著，Manning出版。

此部分感谢r01cn提供。

本文链接

[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 4.Basic jQuery Theory --jQuery理论基础

2012-04-05T12:48:00Z

At the heart of jQuery is a powerful JavaScript function called jQuery (). We use it to query our HTML page’s document object model (DOM) for all elements that match a CSS selector.As a simple example, jQuery("DIV.MyClass") finds all the div elements in our DOM that have the CSS class MyClass.

jQuery功能强大的核心函数是jQuer()，用它我们可以查询匹配CSS选择器的HTML页面的所有DOM元素。一个简单的例子，jQuery(“DIV.MyClass”)函数的作用就是在我们的DOM的所有DIV元素中查找CSS类名叫MyClass的元素。
jQuery () returns a jQuery-wrapped set: an instance of a jQuery object that lists the results and has many extra methods you can call to operate on those results. Most of the jQuery API consists of such methods on wrapped sets. For example, jQuery("DIV.MyClass").hide() makes all the matching div elements suddenly vanish. For brevity, jQuery provides a shorthand syntax, $(), which is exactly the same as calling jQuery(). Table 20-1 contains some further examples.

jQuery()返回一个jQuery-wrapped集：一个jQuery对象的实例，它会列出返回的结果，还包含许多可以操作这些结果的扩展方法。大多数的jQuery API都是由这样封装过的方法集合构成的。例如：jQuery(“DIV.Class”).hide()函数会隐藏掉所有匹配到的div元素。jQuery提供一个简单的语法：$(),和调用jQuery()一样的效果。表格20-1给出进一步的例子：

表格20-1. jQuery简单示例

例子	描述
$("P SPAN").addClass("SuperBig")	Adds a CSS class called SuperBig to all <span> nodes that are contained inside a <p> node 在<p>节点中的所有<span>节点添加一个叫SuperBig的CSS类标识
$(".SuperBig").removeClass("SuperBig")	Removes the CSS class called SuperBig from all nodes that have it 从所有节点中移除CSS类标识为SuperBig的元素，包含它自身。
$("#options").toggle()	Toggles the visibility of the element with ID options (if the element is visible, it will be hidden; if it’s already hidden, it will be shown) 切换ID为options的元素的可见性(如果该原色当前是显示的，它将会被隐藏；如果它当前是隐藏，会被显示)
$("DIV:has(INPUT[type='checkbox']:disabled)").prepend("<i>Hey!</i>")	Inserts the HTML markup <i>Hey!</i> at the top of all div elements that contain a disabled checkbox 在所有div元素的顶部插入一个包含了一个未选中的复选框的HTML元素<i>Hey!</i>
$("#options A").css("color", "red").fadeOut()	Finds any hyperlink tags (i.e., <a> tags) contained within the element with ID options, sets their text color to red, and fades them out of view by slowly adjusting their opacity to zero 在所有的超链接标签(即<a>标签)中查找包含了ID为options的元素，把它们的文本颜色设置为红色，通过缓慢的调整它们的不透明度为零让它们淡出我们的视野

jQuery is extremely concise, and achieving the same effects as those produced by the examples in the table would take many lines of JavaScript. We picked the examples in the table to illustrate some of the key jQuery features, which we describe briefly in the following sections.

jQuery是极其简练的，如果要达到表中例子所要达成的效果，Javascript则会需要多行代码才能实现。在接下来的各节我们将会通过表中的例子来简要的说明jQuery的一些关键特性。

Understanding jQuery Selectors 理解jQuery选择器

One concept key to understanding jQuery is selectors. One kind of selector is the strings that we pass to the jQuery function to specify the set of elements that we want to operate on. Listing 20-6 highlights the selector in a jQuery statement.

一个理解jQuery的关键概念就是选择器。一种选择器就是我们通过jQuery函数传递字符串给我们想要操作的指定元素。清单20-6在jQuery语句中高亮显示了这个选择器。

Listing 20-6. A jQuery Selector 清单20-6 一个jQuery选择器

$("th").toggle()

The selector in this example is th, which selects all the th elements in the document. We then apply the toggle method to the selected elements. As we described in Table 20-1, the toggle method changes the visibility of elements. If we applied this jQuery statement to the HTML generated by our example project, the table headers will be hidden (and if we apply it again, they will reappear). The example in Listing 20-6 demonstrates one of the four basic selectors, which are described in Table 20-2.

在这个例子中，th是这个选择器，它在文档中选择了所有th元素，然后我们将这个切换方法应用到选中的元素。就像我们在表格20-1中描述的那样，这个切换方法(toggle())改变了这些元素的的可见性。如果我们将这些jQuery语句应用到我们示例项目生成的HTML中，标头将会被隐藏(如果我们再次应用它，它又会重新显示)。表格20-2描述了四种基础选择器，而这个例子正是其中一种。

表格20-2. jQuery基础选择器 The Basic jQuery Selectors

选择器 Selector	描述 Description
$('*')	Selects all the elements in the document 选择文档中的所有元素
$('.myclass')	Selects all the elements to which the CSS class myclass has been assigned 选择CSS class被赋值为myclass的所有元素
$('element')	Selects all the elements of the type element 选择类型为element的所有元素
$('#myid')	Selects the element with the ID of myid 选择ID为myid的元素

jQuery selectors are greedy, meaning they select as many elements as they can in the HTML DOM. One exception to this is the $('#id') selector, which selects the element with the specified ID; element IDs are expected to be unique. We can narrow our selections by providing a selection context, like this:

jQuery选择是非常贪心的，意味着他们会在HTML DOM中尽可能多的选中元素，但是$(‘#id’)这个选择器是一个例外，它是根据指定的标识ID选择元素，元素的标识ID一般都是独一无二的，我们可以通过提供一个选择上下文来缩小我们的选择范围，像这样：

$('td', myElement)

which will match td elements that are descendants of myElement. You can see a selection context in use in Listing 20-17.

这条语句会匹配myElement的子节点中的td元素。你可以在清单20-17中看到这个选择上下文的用法。

A QUICK NOTE ABOUT ELEMENT IDS 快速了解元素标识

If you’re using jQuery, or in fact writing any JavaScript code to work with your MVC Framework application, you ought to be aware of how the HTML helpers render ID attributes. If we call the text box helper as follows, for example:

如果你正在使用jQuery，或者你现行的MVC框架应用中使用了一些Javascript代码，你有必要了解HTML helper类如何渲染这些标准属性。例如，我们如下所示调用text box的助手类方法：

@Html.TextBox("pledge.Amount")

it will render the following:

它将被渲染成一下HTML代码：

<input id="pledge_Amount" name="pledge.Amount" type="text" value="" /> （备注：此文电子文档id=“pledge Amount” 少了中间的’_’此处纠正）

Notice that the element name is pledge.Amount (with a dot), but its ID is pledge_Amount (with an underscore). When rendering element IDs, the built-in helper methods replace dot characters with underscores. This makes it possible to reference the elements using a jQuery selector such as $("#pledge_Amount"). Note that it wouldn’t be valid to write $("#pledge.Amount"), because in jQuery (and in CSS) that would mean an element with ID pledge and CSS class Amount.

注意，这个元素的name是pledge.Amount(中间用一个‘.’连接),但是它的id标识是pledge_Amount(用一个下划线连接)，当渲染元素标识的时候，内置的helper类的方法将用下划线替换那个点，这将使它能用类似$(“#pledge_Amount”)这样的jQuery选择器来引用这个元素。这里需要注意，$(“#pledg.Amount”)这样写是无效的，因为在jQuery(和CSS)中，这代表一个ID标识为pledge和CSS的class为Amount的元素。

备注：这里的翻译与给出的代码有些出入，为了确保翻译准确，我亲自试验了这里的代码，原英文电子文档中渲染的HTML代码为“input id="pledge Amount…”中间是空格，而非“_”,但是经过的实际测试，正确的输出应该是“pledge_Amout”,这里需要大家注意，所以这里我将英文原文和译文部分都加上了下划线。

-------------------------------------------------------------------------------------------------------

We can combine the results of multiple selectors by separating each term with a comma, as shown in Listing 20-7.

我们可以通过组合多个以逗号分隔的选择器来获取结果，如清单20-7所示：

清单20-7. 组合选择器 Combining Selections

$('td, th')

This statement selects all the td and th elements in the DOM. We can apply selections sequentially by separating the terms with spaces, as shown in Listing 20-8.

这条语句选中了在DOM中的所有td和td元素。我们可以空格分隔来应用连续的选择器，如清单20-8所示：

清单20-8. 应用多个连续的选择器 Applying Multiple Selections Sequentially

$('td input')

In this case, we have selected all the input elements contained within td elements. In the case of our example project, this means we select the Delete buttons that are at the end of each table row but not the Reset button at the bottom of the page.

在这种情况下，我们选中了包含在td元素中的所有input元素。在我们的示例项目中，这意味着我们选择了在每行最后的删除按钮，而不是在页面底部的重置按钮。

Using Attribute Selectors 使用属性选择器

In addition to the basic selectors, there are also attribute selectors. As their name suggests, these selectors operate on attributes and their values. Table 20-3 describes the attribute selectors.

除了这些基本选择器，也有属性选择器，顾名思义，这些选择器通过属性和他们的值来操作。表20-3描述了这些选择器。

表20-3. jQuery属性选择器 The jQuery Attribute Selectors

Selector 选择器	Description 描述
$('[attr]')	Selects elements that have an attribute called attr, irrespective of the attribute value 选择属性名称叫attr的元素，不考虑属性的值
$('[attr]="val"')	Selects elements that have an attr attribute whose value is val 选择attr属性值为val的元素
$('[attr]!="val"')	Selects elements that have an attr attribute whose value is not val 选择attr属性值不是val的元素
$('[attr]^="val"')	Selects elements that have an attr attribute whose value starts with val 选择attr属性值以val开头的元素
$('[attr]~="val"')	Selects elements that have an attr attribute whose value contains val 选择attr属性值包含val的元素
$('[attr]$="val"')	Selects elements that have an attr attribute whose value ends with val 选择attr属性值以val结尾的元素
$('[attr]\|="val"')	Selects elements that have an attr attribute whose value is val or starts with val followed by a hyphen (val-) 选择一个attr属性值是val或者以val开头或者val后跟一个连接符(val-)的元素。

------------------------------------------------------------------

We can apply multiple attribute selectors together, in which case we select only those elements that match all of the conditions. Listing 20-9 contains an example.

我们也可以多个属性选择器一起应用，在这种情况下，我们仅仅能选中那些匹配了所有条件的元素。清单20-9包含了一个例子。

清单20-9. 组合属性选择器 Combining Attribute Selectors

$('[type][value="Delete"]')

The selects in this statement match those elements that have a type attribute (with any value) and a value attribute whose value is Delete. In the case of our example application’s HTML, this matches the Delete buttons at the end of each table row.

这个语句选中了匹配了含有一个type属性(包含多个value属性)，其中一个value属性的值为Delete的元素。在我们的HTML应用示例中，他匹配了每行最后的删除按钮。

Using jQuery Filters 使用jQuery过滤器

In addition to selectors, jQuery also supports filters, which are a convenient means for narrowing the range of elements that we select. Listing 20-10 shows an example of one of the basic filters.

除了选择器，jQuery也提供了过滤器，主要为了方便我们缩小我们选中的元素的范围。清单20-10给出了一个基本过滤器的示例。

清单20-10. 使用一个基本过滤器 Using a Basic Filter

$('td:eq(8)')

The filter in this example is :eq(8), which selects only the ninth item in the array of elements matched by the selector (because these filters are zero-based). Table 20-4 describes the basic filters.

在这个示例中，过滤器是eq(8)，它仅仅选中了根据选择器匹配出来的元素数组中的前8项（因为这些过滤器都是从零开始的）。表20-4描述了这些基本过滤器。

表20-4.jQuery基本过滤器 The jQuery Basic Filters

Filter 过滤器	Description 描述
:eq(n)	Selects the n-1th item in the selection 选择所选内容的第n-1项
:even :odd	Selects the even-numbered or odd-numbered elements 选择偶数或者奇数元素
:first :last	Selects the first or last element 选择第一个或者最后一个元素
:gt(n) :lt(n)	Selects all the elements whose index is greater or less than n 选择所有元素中索引大于或者小于n的元素
:header	Selects all elements that are headers (h1, h2, and so on) 选择所有header头元素(h1，h2等等)
:not(selector)	Selects all the elements that do not match the selector 选择所有不被选择器匹配中的元素

The filters can be used in conjunction with selectors, as shown in Listing 20-10, or on their own, as demonstrated in Listing 20-11.

过滤器可以和选择器组合使用，如清单20-10中所示，单独的使用方式见清单20-11.

清单20-11. 单独使用过滤器 Using a Filter Without a Selector

$(':header')

In this example, we have used the :header filter to select all the headers. When we do this, the universal selector (*) is implied. We could have achieved the same result by using a selector that combined all the header element types ($('h1 h2 h3')), but using the filter is simpler and easier. We can combine multiple filters by appending them together, as shown in Listing 20-12.

在这个示例中，我们使用:header过滤器选中了所有的header，当我们做这些的时候，选中所有的选择器(*)是隐式的，我们通过一个组合了所有header元素类型($(‘h1 h2 h3’))的选择器也可以达到同样的效果，但是显而易见，使用过滤器是更简单、更容易的。我们可以通过把更多的过滤器追加在一起组合使用，如清单20-12所示。

清单20-12. 应用多个过滤器 Applying Multiple Filters

$('td:odd:eq(1)')

This selects the td element, filters them so that only the odd-numbered items remain, and then selects the second element.

选中td元素，然后过滤它们，保留奇数项，然后选中其中的第二项元素。

Using Content Filters 使用内容过滤器

The next filters we will look at are content filters, which are described in Table 20-5. These filters are focused on the content of an element, both in terms of text and other elements.

我们一起看的下一个过滤器是内容过滤器，在表20-5中会看到对它的描述，这些过滤器的重点是元素的内容，无论是元素的文本还是其他元素。

表20-5. jQuery内容过滤器 The jQuery Content Filters

Filter 过滤器	Description 描述
:contains('text')	Selects elements that contain text or whose children contain text 选择包含text或者它们的子元素包含text的元素
:has('selector')	Selects elements that have at least one child element that matches selector 选择至少一个子元素匹配selector的元素
:empty	Selects elements that have no child elements 选择没有子元素的元素
:parent	Selects elements that have at least one other element 选择有至少一个其他元素的元素(就是父元素，下面要有子元素的意思。译者加)
:first-child	Selects elements that are the first child of their parent 选择父元素下的第一个子元素
:last-child	Selects elements that are the last child of their parents 选择父元素下的最后一个子元素
:nth-child(n)	Selects elements that are the nth child of their parent 选择父元素下的第n个子元素
:only-child	Selects elements that are the only child of their parent 选择父元素下唯一的子元素

A little caution is required when using the :contains filter because it matches elements that contain the specified text and elements whose children contain it. This means that if we use the filter on its own against the HTML generated by our example application, like this:

有一点需要我注意的是，在我们使用:contains过滤器的时候，它只会匹配那些它或者它的子元素包含了指定文本和元素的元素。这意味着，如果我们将这个过滤器用在我们示例应用生成的HTML上，像这样：

$(':contains("K2")')

then we select six elements: the td element that contains the text and all of this element’s parents (tr, tbody, table, body, and html elements).

那么，我们选择6个元素：包含了这个文本的td元素以及这个元素所有的父级元素(tr,tbody,table,body,和html元素)。

■ Caution：To preserve compatibility with CSS conventions, the nth-child filter is one-based. In other words, if you want to select elements that are the first child of their parent, use :nth-child(1) and not :nth-child(0).

■警告：与CSS约定保持兼容，第n个子过滤器是基于第一个的，换句话说，如果你想选择的元素是某个父级元素的首个子元素，可以使用:nth-child(1) 而不是:nth-child(0)。

Using Form Filters 使用表单过滤器

The final filters we will describe are the form filters, which are convenient for selecting elements related to HTML forms. Table 20-6 describes these elements.

我们最后要描述的过滤器是表单过滤器，它便于我们选择与HTML表单相关的元素，表20-6描述了这些元素。

表20-6. jQuery表达过滤器 The jQuery Form Filters

Filter过滤器	Description 描述
:button	Selects button elements and input elements whose type is button 选择input类型为button的按钮元素
:checkbox	Selects checkboxes 选择复选框(checkbox)
:checked	Selects checkboxes and radio button elements that are checked 选择状态是checked的复选框(checkbox)和单选(radio)按钮元素
:disabled :enabled	Selects items that are enabled or disabled, respectively 分别选择启用或禁用的项
:input	Selects input elements 选择input元素
:password	Selects password elements 选择密码(password)元素
:radio	Selects radio buttons 选择单选(radio)按钮
:reset	Selects input elements whose type is reset 选择input类型为reset的元素
:selected	Selects option elements that are selected 选择option项状态为selected的元素
:submit	Selects input elements whose type is submit 选择input类型为submit类型的元素
:text	Selects input elements whose type is text 选择input类型为text的元素

Understanding jQuery Methods 理解jQuery方法

Selectors and filters let us tell jQuery which elements we want to work with. Methods are how we tell jQuery what to do. We have shown a few jQuery methods so far, such as toggle, but jQuery is a very capable library, and many methods are available. In the sections that follow, we’ll show you some of the most useful methods and demonstrate their effect. For further details and a complete list of the methods that jQuery supports, see http://jquery.com.

选择器和过滤器让我们告诉jQuery哪些元素是我们需要处理的元素。方法则是我们告诉jQuery要做什么，到现在为止，我们已经展示过一些jQuery方法，像toggle，但是jQuery是个功能非常强大的库，它提供了很多方法供我们使用。在接下来的小节，我们会给你展示一些最常用的方法并且让你看到它们的效果。jQuery所提供的方法的完整列表和详细信息，请查看 http://jquery.com 。

Waiting for the DOM 等待DOM

We showed you the selectors and filters in isolation because a selector or filter on its own does nothing. Now that we are ready to combine our selections with methods, we can start to add jQuery scripts to our MVC Framework application’s view. Listing 20-13 shows the skeletal view into which we will add our jQuery statements.

我们向你分开展示选择器和过滤器，因为它们自身不做任何事情，现在我们准备好方法，结合我们的选择器，我们可以将jQuery脚本添加到我们的MVC框架应用视图。清单20-13展示了将要添加我们的jQuery榆木的skeletal视图。

清单20-13.Skeletal视图 The Skeletal View

@using MvcApp.Models;
@model IEnumerable<Summit>
@{
ViewBag.Title = "List of Summits";
}
@if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
<script type="text/javascript">
$(document).ready(function () {
// our jQuery code will go here
});
</script>
<h4>Summits</h4>
<table>
<thead>
<tr><th>Name</th><th>Height</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" />
}

We have added our script element to the view itself, which means the scripts that we add will take effect only when this view is rendered. If we want scripts that are performed for multiple views, then we can add them to a layout.

我们将我们的脚本元素加入到了视图本身，这意味着我们添加的脚本仅在渲染呈现这个视图时生效。如果我们想要脚本能够被多个视图执行，我们可以将它们添加到布局中。

■ Tip： We don’t need to reference the jQuery library file in our view because it is referenced in the layout instead, as shown in Listing 20-3. We have, however, added a reference to the vsdoc file so that we benefit from IntelliSense for jQuery.

■小提示：我们不需要在我们的视图中引用jQuery的库文件，因为它将在布局中被引用，就像清单20-3所展示的那样。不管怎么样，为了我们能够受益于jQuery的智能感知，我们已经添加了一个引用到vsdoc文件中。

We have added the $(document).ready() function to our script element. This is a useful feature that means our jQuery code won’t be executed until after the DOM is loaded but before any media (including images) are available. This is a matter of timing. We don’t want our code to be executed too soon, because not all of the elements that we want to work with will be known to the browser. We don’t want to wait for the media to load, because this can take a while, and the user may have already started interacting with the page. We will use the $(document).ready() function in all the examples in this chapter.

我们添加了$(document).ready()函数到我们的脚本元素中，这是一个有用的特性，这意味着我们的jQuery代码将会在DOM加载完毕之后加载，但是会在一些媒体文件(包含图片)加载完毕前加载。这是个时间顺序的问题，我们不希望我们的代码被过早的执行，因为此时并不是所有我们需要处理的元素都被加载到了浏览器，我们不想等待加载媒体文件，因为这需要一段时间，而我们的用户已经准备好和页面进行交互了。我们会在本章节所有的例子中使用$(document).ready()这个函数。

Using jQuery CSS Methods使用jQuery的CSS方法

The best place to start applying jQuery in our example application is in the area of CSS. Using the jQuery CSS-related methods, we can significantly improve the appearance of our content. Listing 20-14 shows an example of combining jQuery selectors and CSS methods to our HTML table.

在我们的示例应用中使用jQuery最好的地方就是在CSS区域。使用jQuery中与CSS有关的方法，我们可以大大的改善内容的外观显示。清单20-14展示了一个在HTML表格元素中加入结合jQuery选择器和CSS方法的示例。

清单20-14.使用一些jQuery的CSS方法 Using Some of the jQuery CSS Methods

@using MvcApp.Models;
@model IEnumerable<Summit>
@{
ViewBag.Title = "List of Summits";
}
@if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
<script type="text/javascript">
$(document).ready(function () {
$('table').addClass('summitTable');
$('tr:even').css('background-color', 'silver');
$(':submit[value="Reset"], a:contains("Add")')
.css('float', 'left')
.css('margin', '5px');
});
</script>
<h4>Summits</h4>
<table>
<thead>
<tr><th>Name</th><th>Height</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" />
}

This is the last time that we’ll show the entire view. From now on, we’ll just list the jQuery script, since the rest of the view won’t change from example to example.

这是我们最后一次展示整个视图的代码，从现在开始，我们仅列出jQuery脚本，因为在以后的例子中，视图的其余部分将不会改变。

The listing contains three CSS-related operations. The first is as follows:

清单包含了三个于CSS相关的操作，第一个是：

$('table').addClass('summitTable');

The addClass method adds a CSS class to the selected elements, in this case, the table element. We defined the summitTable class in the Site.css file, which is referenced in the layout, as follows:

addClass方法向选择的元素添加一个CSS类，这种情况下，我们在Site.css文件中定义这个在布局中被引用的summitTable类，如下所示：

.summitTable
{
border: thin solid black;
margin: 5px;
}

The addClass method doesn’t check to see that the summitTable class exists; it just manipulates the element so that the class attribute is added, like this:

addClass方法并不会去检查summitTable类是否存在，它只是操作该元素以使该类属性被添加，像这样：

The next statement performs what is known as zebra-striping. This is a popular effect that increases the readability of grids:

下一条待执行的语句被称为zebra-striping，这是非常流行的效果，提高了网格的可读性：

$('tr:even').css('background-color', 'silver');

The css method modifies the style attribute of the selected elements to set the value (silver) for a specified style property (background-color). The selector in this statement selects the even-numbered tr elements. Zero is an even number in zero-based counting systems, which means that the table rows with indexes 0, 2, 4, 6, and so on, are modified as follows:

这个css方法修改了被选择元素的样式属性，设置其指定的样式属性(background-color)的值为silver。这条语句中的选择器选择了偶数的tr元素，0在计数系统中是一个偶数，也就意味着索引是0,2,4,6等等的行会被选择，修改如下：

USING J QUERY METHOD OVERLOADS 使用jQuery方法重载

Many jQuery methods have several overloaded versions that take different numbers of arguments. For example, when the css method is used with one argument, like this:

很多jQuery方法都有提供了采用不同数目参数的重载版本，举个例子，当这个css方法是使用一个参数时，像这样：

$('tr:first').css('background-color')

then the method just returns the current value of the specified style element, in this case, the background-color value. This value can then be used as an argument to other methods, like this:

那么该方法只返回指定样式元素的当前值，在这种情况下，就是这个backgroud-color的值，而这个值可以随后用于作为其他方法的参数，像这样：

$('tr').css('background-color', $('tr:first').css('background-color'))

which sets the background-color for all tr elements to match that of the first tr element.

用来为所有tr元素匹配那首个tr元素设置背景颜色(backgroud-color)。

The final statement demonstrates that we can chain jQuery methods together, as follows:

将jQuery方法链接在一起作为我们最后一个演示语句，如下所示：

$(':submit[value="Reset"], a:contains("Add")')
.css('float', 'left')
.css('margin', '5px');

The selector in this example matches the two elements at the bottom of the page: the Add link and the Reset button. We set a value for two different styles by applying the css method to the results generated by a previous call to the css method. Method chaining is one of the key characteristics of a fluent API, which can make coding simpler and code easier to read. Most of the jQuery methods return a collection of jQuery elements on which further methods can be called. Our example showed only two CSS-related methods. Table 20-7 describes the most useful CSS-related methods that jQuery supports.

在我们这个例子中的选择器匹配了在页面底部的两个元素：一个添加(Add)链接和重置(Reset)按钮。我们通过由前一个调用CSS方法产生的结果应用到一个CSS方法中来为两个不同的样式设定值。方法连接是一个流畅的API的关键特征之一，它使编码变得简单，而且便于阅读。大部分jQuery方法都会返回一个可以进一步调用的jQuery元素集合，我们的示例中只展示了两个与CSS相关的方法。表20-7描述了jQuery支持的最有用的，与CSS相关的方法。

表20-7.jQuery的CSS方法 The jQuery CSS Methods

Method 方法	Description 描述
addClass('myClass')	Adds the specified class name to the class attribute of selected elements 给选择的元素的类属性添加指定的类名
hasClass('myClass')	Returns true if the any of the selected elements have been assigned the specified class 如果选择的元素含有指定的类则返回true
removeClass('myClass')	Removes the specified class name from the class attribute of selected elements 从选择的元素的类属性中移除指定的类名
toggleClass('myClass')	Adds the specified class if it isn’t present and removes it otherwise 如果指定的类不存在，则添加；否则，删除它。
css('property', 'value')	Adds the specified property and value to the style attribute of selected elements 给选择的元素的样式属性添加指定的属性和值

Although it can be useful to manipulate CSS when the DOC loads, these methods are often combined with jQuery events to change the appearance of HTML elements in response to an event occurring; see the “Using jQuery Events” section later in this chapter for more details of how jQuery handles events. Figure 20-6 shows the effect of the CSS changes performed by the script in Listing 20-14.

尽管它可以用于DOC加载时操作CSS，这些方法通常是结合jQuery事件在响应事件的发生时改变HTML元素的外观；在此章随后的“使用jQuery事件”部分会有更多详细介绍关于jQuery如何处理事件。图20-6展示了20-14脚本清单执行的CSS变化效果。

图：20-6 使用jQuery操作CSS Using jQuery to manipulate CSS

■ Tip ：In addition to these methods, there are others that can be used to read or write elements’ style properties directly, including height(), width(), and position(). See the jQuery API reference for further details.

■ 小提示 ：除了这些方法以外，也有一些可以直接读写元素样式属性的方法，包括 height(),width()和position()，查看jQuery API的定义可以获取更详细的信息。

Working with the DOM 使用DOM

jQuery’s support for manipulating the DOM is so comprehensive that we can only just scratch the surface in this book. We can add, remove, and change DOM elements, and we can even move elements from one part of the DOM to another. In this section, we’ll provide some basic examples, but a full appreciation of the jQuery DOM capabilities requires diligent perusal of the API reference and some careful experimentation. Listing 20-15 demonstrates creating new elements in the DOM and using jQuery to add a new column to the table to express the heights of the summits in feet.

jQuery对操作DOM的支持是非常全面的，在这本书书里，我们仅仅对它进行浅显的研究，我们可以添加、删除和修改DOM元素，甚至我们可以把元素从DOM的一部分移动到其他部分。在这部分，我们会提供一些基本的示例，但是要透彻理解jQuery DOM的功能需要认真阅读它的API文档，细心的做一些试验。清单20-15展示了在DOM中添加一个新的元素并且使用jQuery往表中添加一个新列用来描述从山脚到山峰的高度。

清单20-15. 给DOM添加一个新元素

There are only two new statements in this script, but because of the expressive nature of jQuery and the support for method chaining, there is a lot going on. Let’s start with the first statement:

在这个脚本里只有两条新语句，但是根据jQuery要表的本质和它支持的方法链，还有很多需要说明，让我们从第一条语句开始：

$('th:nth-child(2)').text('Height (m)').after('<th>Height (ft)</th>');

We start by selecting those th elements that are the second children of their parent. The only set of th elements in our sample HTML is in the table element, and the one that is the second child is the Height header. We use the text method to set the text context of the selected element to Height (m) to indicate that this column in the table contains the height of the summits expressed in meters. We then chain the after method that inserts a new element as a peer to the selected element. The parameter for the after method is the element we want to insert, which in this case is a new th element with the text content Height (ft).

我们开始选择的是任何父节点里的第二个th元素。在我们的示例中，仅仅是table元素中需要对th元素设置，而且匹配上第二个子元素的要求，就是高度的表头。我们使用text方法去设置选中元素的文本上下文，以Height (m) 来表示在表中包含了山峰高度的列，然后我们链接之后的方法，插入一个与选定元素同级的新元素.之后方法的参数是我们要插入的元素，在这种情况下，就是一个新的包含了Height (ft).文本的th元素。

When we use the after method, the new element is inserted after each selected element. We selected only one th element, so only one new element was created. With the second jQuery statement, however, we created several:

当我们使用之后的方法，会在每个选定的元素后插入新元素。我们只选择了一个th元素，所有也只有一个新的元素被创建。然而，用第二条语句，我们创建了好几个新的元素：

$('td:nth-child(2)')
.after('<td/>')
.each(function () {
...
});

The selector in this statement matches any td element that is the second child of its parent. We are selecting the td elements from the Height column (which has now been renamed Height (m), of course).

语句里的选择器匹配任何父节点里的第二个td元素，我们从高度列选择td元素(当然，现在已经被更名为Height(m)了)。
We then chain a call to the each method, which accepts as its parameter a function that will be executed for each selected element. Our function contains a single statement:

然后，我们链接一个对each方法的调用，函数作为参数被接收，对每个选中的元素执行该调用。我们的函数包含了一个单独的语句：

$(this).next().text((parseInt($(this).text()) * 3.28).toFixed(0));

We start with a special selector, $(this), which creates a selection that contains the element currently being processed. The function we pass to the each method is executed once for each selected element, and this refers to the element that the function is being called for. We need to pass this to the main jQuery function so that we can call methods on the element. In this case, the selector this will refer to each of the td elements that we queried for initially.

我们以一个特殊的选择器$(this)开始，它创建了一个包含当前被处理元素的选择。我们传递给each方法的函数为每个选中的元素执行一次，而且this涉及了被函数调用的元素。我们需要把this传递给jQuery的主函数，以便我们能够在元素上调用方法。this选择器会涉及我们最初查询的每个td元素

We call the next method to select the sibling immediately after the current element. This gives us the element we just created. We then use the text method to get the text content of one td element and to set the content of another. We calculate the height in feet in the client (1 meter is 3.28 feet).

我们调用next方法选择紧邻当前元素后面的同辈元素，正是我们刚刚创建的元素。然后，我们使用text方法获取一个td元素的文本内容并设置为我们在客户端所计算的山脚高度(1米=3.28英尺)。

Figure 20-7 shows the new column. 图20-7展示了新列

图 20-7. 用jQuery添加新内容 Adding new content using jQuery

We picked this example for two reasons. The first is it uses different types of jQuery DOM methods. We use after to create a new element and next to navigate through the DOM. The second reason is that there are several different ways of performing the task. This is not uncommon in jQuery, where we can combine different methods to similar effect. Listing 20-16 shows an alternative script that adds the new column.

我们采用这个例子主要有两个原因，第一个就是它使用不同类型的jQueryDOM方法，我们使用后创建的新元素，并在下一步浏览DOM。第二个原因就是可以有多个不同的方式去执行一个任务。结合不同的方法达到相似的效果，这在jQuery中是不常见的。清单20-16展示了一种另类的添加新列的脚本

清单20-16. An Alternative Approach to Adding Content to the Summits Table 一种给Summits表添加内容的另类方法

$('th:nth-child(2)').text('Height (m)').after('<th>Height (ft)</th>');
$('td:nth-child(2)').each(function () {
var height = (parseInt($(this).text()) * 3.28).toFixed(0);
$('<td/>').insertAfter($(this)).text(height).css('border', 'thin solid red');
});

The key difference is the statement shown in bold. In the previous example, we used the after method. The result of this method is the selected element, not the element we just created. Any method that we chain to after will be applied to the original element. The statement in Listing 20-16 uses the insertAfter method, which has the same effect as after but returns the newly created element, meaning that any chained methods are applied to the new element and not the existing one (you will also notice that we specify the new element in the main jQuery function and the existing element as the parameter to the insertAfter method). This means we can apply methods to the newly created elements without having to select them or navigate to them. As a demonstration, we added a CSS border, as shown in Figure 20-8.

关键区别在于黑体显示的部分，在前面的示例中，我们采用的是后面的那种方法，这个方法的结果是选中的元素并不是我们刚刚创建的那个元素。我们后面所链接的一些方法都会被直接作用于原始元素。清单20-16使用了insertAfter方法，执行效果和after一样，但是它会返回最新创建的元素，这意味这那些链接方法会被作用于新元素而不是已经存在的元素（你应该也会注意到我们在jQuery的主函数中指定的新元素和在insertAfter方法中作为参数的已经存在的元素）。这意味着我们可以将方法作用到最近创建的元素上，而不必选中它们或者导航到它们。作为示范，我我们添加了一个CSS 边框，如图20-8所示

图20-8. 利用不同的方法创建元素A different approach to creating elements

The point is that there are often different ways to achieve the same goal, and it is worth experimenting with varying approaches to find one that does what you need in a way that is robust and you are comfortable with. Table 20-8 shows some common jQuery DOM-related manipulation, but quite a number are available, and you should consult the jQuery API reference for the full set.

这一点就是说通常完成同一个目标可以用不同的方式、途径，表20-8列出了一些公用的，jQuery中与DOM操作相关的方法，如果你想获取更多，需要查阅jQueryAPI文档。
表20-8.挑选出来的一些和DOM操作相关的jQuery方法 Selected jQuery DOM Manipulation Methods

Method方法	Description描述
before('new') after('new')	Inserts the element new either before or after the selected elements. 在选中的元素前面或者后面插入元素new
insertBefore() insertAfter()	As for before and after, but the order of the new element and the selector is reversed, and these methods return the newly created elements. See Listing 20-16 for an example. 和before与after方法相比，new元素的顺序和选择器的位置是相反的，而且它们会返回最近创建的元素，清单20-16给出了一个示例
prepend('new') append('new')	Inserts the element new inside of the selected elements, either as the first or last child. 在选中的元素中插入一个元素new，或者作为它的第一个或者最后一个子元素
prependTo() appendTo()	As for prepend and append, but the order of the new element and the selector is reversed, and these methods return the newly created elements. 和prepend与append方法相比，new元素的顺序和选择器的位置是相反的，而且它们会返回最近创建的元素。
empty()	Removes all children from the selected elements. 清空选中元素的子元素
remove()	Removes the selected elements from the DOM. 从DOM中移除选中的元素
attr('name', 'val')	Sets the attribute name to value val on the selected elements; will create the attribute if it doesn’t already exist. 给选中的元素设置name属性的值为val；如果不存在name属性则创建它
removeAttr('name')	Removes the attribute name from the selected elements. 把选中元素的name属性移除

jQuery also defines a set of methods for navigating around the DOM. Table 20-9 shows some of the most commonly used of these.

jQuery 也定义了一组用于浏览DOM的方法集。表20-9列出了一些总常用的方法
表20-9. 挑选出来的用于浏览DOM的jQuery方法 Selected jQuery DOM Navigation Methods

Method方法	Description描述
children()	Gets the children of the selected elements 获取选中元素的子元素
next()	Gets the sibling elements that immediately follow the selected elements 获取紧邻选中元素的下一个元素
prev()	Gets the sibling elements that immediately precede the selected elements 获取紧邻选中元素的前一个元素
parent()	Returns the immediate parents of the selected elements 获取选中元素的父级元素
sibilings()	Returns the siblings of the selected elements 获取选中元素的兄弟元素

The navigation methods accept an optional selector parameter; only elements that match the selector will be returned as results.

这些方法接收一个可选的选择器作为参数；只有被选择器匹配到元素才会被返回。

《此小节完毕，有翻译不准确的地方，请回复或私信，因工作繁忙，下面的翻译不定期，有时间就翻译….》

本文链接

[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 3.Writing jQuery Code 编写jQuery代码

2012-04-01T02:55:00Z

A couple of tools and techniques make learning and working with jQuery simpler. The first is IntelliSense support for Visual Studio, which adds autocompletion for jQuery functions and variables; however, unlike IntelliSense for C#, we have a little work to do in order to enable this feature. In the ~/Scripts folder, you will find the file jquery-1.5.1-vsdoc.js. To enable jQuery IntelliSense, we have to add a script element that references this file to the layout or view we are working on, as shown in Listing 20-4.

一些工具和技术使学习和使用jQuery变得更加简单。首先就是Visual Studio的智能感知(对jQuery的)支持，添加了对jQuery函数和变量的自动完成的功能；然而，和C#的智能感知不同，我们需要做一些前期工作，才能开启这个特性：在“~/Scripts ”文件夹，你能找到“jquery-1.5.1-vsdoc.js”文件，要开启jQuery智能感知，我们需要在我们工作的视图的布局文件中添加对这个文件的脚本元素的引用，如同列表20-4所示：

列表20-4. Adding jQuery IntelliSense Support to a Layout

...
<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>
@if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
</head>
...

We don’t want the browser to actually download this file, because it contains information that is useful only to Visual Studio, so we use Razor to create an if block that always evaluates to false. This looks kind of odd—and it is, we guess—but it gives Visual Studio the information it needs to perform jQuery IntelliSense and stops our users from having to download an otherwise-unneeded file. Once we have added the script element, we can autocomplete jQuery terms just as we would when writing C#, as shown in Figure 20-2.

其实，我们不想让浏览器下载这个文件，因为它包含的信息仅对Visual Studio 有用，因此我们用Razor去创建一个if块会一直认为是false，这看起来有些奇怪-----我们猜它是，----但它提供给Visual Studio的信息时他需要去执行jQuery智能感知并让我们的用户无需下载其他那些无用的文件。一旦我们添加了脚本元素（到布局文件中）,我们就可以像写C#一样自动完成jQuery术语，如图20-2所示：

图20-2. Visual Studio 的jQuery智能感知（Visual Studio IntelliSense for jQuery）

Unfortunately, we have to add the script element shown in Listing 20-4 to every view or layout in which we want jQuery IntelliSense. It isn’t enough to put the reference in a layout, for example. We must also add it to individual views, which can be a little frustrating. That said, the benefits of IntelliSense, especially when learning jQuery, can be worth the inconvenience.

不幸的是，我们不得不如同列表20-4中所示将脚本元素添加到每一个我们需要jQuery智能感知的视图或者布局中。这还不够，例如，它也不能将引用放置到布局中，这让人有点沮丧，我们还必须将其添加到单个的视图中。也就是说，智能感知，尤其是当学习jQuery时，这点不便还是值得的。

Creating a jQuery Sandbox 创建一个jQuery沙箱

It is perfectly possible to learn jQuery using Visual Studio. We edit a view, save the file, reload the browser, and see what effect our script has. If you are new to jQuery, one of the best ways to experiment with jQuery is to use the developer tools available your browser. This approach lets you experiment with jQuery on the fly and see immediate results. The most useful browsers in this regard are Google Chrome and Mozilla Firefox. If you are a die-hard Internet Explorer user, you can use the developer tools in IE9, but they are not as good as those in Chrome or Firefox.

想要学好jQuery，最好使用Visual Studio。我们编辑一个视图，然后保存这个文件，重新加载到浏览器中，可以查看我们的脚本产生了什么效果。如果你是个学习jQuery的新人，一个实验jQuery最好的方法就是用开发工具提供的浏览器。这个方法让你在实验jQuery的时候可以飞快的看到即时结果。在这方面最有帮助的浏览器就是Google的Chrome和Mozilla的FireFox，如果你是个顽固的IE用户，你可以使用IE9中提供的开发者工具，但是它并没有Chome和FireFox那般好用。

Using Firefox 使用FireFox

One of the most popular combinations for writing JavaScript in general is Firefox with the free Firebug add-on. Firebug is an open source tool that neatly integrates into Firefox and provides an excellent set of features for HTML, CSS, and JavaScript development.

一个编写JavaScript的最流行的组合就是Firefox和免费的Firebug插件。Firebug是一个整合在Firefox的开发工具，它为HTML,CSS和Javascript开发提供了一组出色的工具集。

Of particular importance to us is the JavaScript command line, with which we can type and execute JavaScript code on the fly and see the effect it has on the web page immediately. This may not sounds like much, but this is a huge help when trying to get to grips with jQuery.

对我们尤其重要的是Javascript命令行，用它我们可以飞快的键入和执行Javascript代码并且在网页上立刻就可以看到效果。这不见得和听起来一样，但是当你试图掌握jQuery时，它会是一个巨大的帮助。

If you are a Firefox user, install Firebug (available from http://getfirebug.com), and load the HTML page you want to experiment with. This can be any page at all, including, of course, a page generated by an MVC Framework application. When the page is loaded, click the Firebug button at the top of the browser window, as shown in Figure 20-3

如果你是一个Firefox用户，安装Firebug（可以从http://getfirebug.com 获取），将你想试验的HTML页面载入进来。这可以是任意页面，当然，包括由MVC框架应用程序生成的页面。当页面加载进来后，单击浏览器顶部的Firebug按钮，如图20-3所示：

图20-3.使用Firefox浏览器中的Firebug （Using Firebug in the Firefox browser）

Switch to the Console tab and, if required, click the Enable link to switch on the command-line feature. If we are working with a web page that already loads the jQuery library, then we can just type jQuery statements into the console and see their effect immediately. If we are working with a page that doesn’t include jQuery, then we need to type the JavaScript statements shown in Listing 20-5 (as a single line).

切换到控制台选项卡，如果需要的话，单击激活命令行特性开关的链接，如果我们正在处理一个已经加载了jQuery库的Web页面，然后我们可以只键入jQuery命令就可以看到效果；如果我们正在处理的Web也卖弄没有加载jQuery库，然后我们就需要如列表20-5中那样键入jQuery命令(作为单行)：

列表20-5. 将jQuery载入一个Web页面（Loading jQuery into a Web Page）

var s=document.createElement('script'); s.setAttribute('src','http://jquery.com/src/jquery-
latest.js'); document.getElementsByTagName('body')[0].appendChild(s);

These statements create a new script element that references the jQuery library.

这些语句创建一个新的引用了jQuery库的脚本元素。

■ Tip You can save these statements as a bookmarklet or get one ready-made from www.learningjquery.com/2006/12/jquerify-bookmarklet.

■ 提醒：你可以把这些语句作为书签存储起来或者从www.learningjquery.com/2006/12/jquerify-bookmarklet 得到现成的。

The URL from which the jQuery library is obtained is shown in bold. We have taken the latest version of the library from the http://jquery.com web site, but you can change the URL to point to the Microsoft CDN or to the jQuery file contained within your MVC Framework project.

获取jQuery库的URL以粗体显示。我们已经从 http://jquery.com网站上获取到了库的最新版本，但是你可以更改指向微软CDM或者包含在你的MVC框架项目中的jQuery文件的URL。

Once we are set up, we can enter jQuery statements (or any other JavaScript statements, for that matter) into the console and see their effect immediately. In the figure, we have loaded the Microsoft home page, imported jQuery, and entered the statement jQuery('a').hide(). We’ll explain the basics of jQuery syntax later, but as soon as we press the Enter key, jQuery will find all the a elements in the web page and hide them, as shown in Figure 20-4.

一旦我们设置了，我们可以在控制台输入jQuery语句(在此处也可以是其他Javascript语句)，并且我们立即就能看到效果。在图中，我们载入了包含了jQuery的微软主页，并且输入语句“jQuery(‘a’).hide()”。我们后面会说明jQuery的基础语法，但是当我们按下Enter键，jQuery会找到网页中的所有页面元素并将它们隐藏掉，如图20-4所示：

图20-4. 隐藏微软主页的页面元素（Hiding the a elements in the Microsoft web page ）

Hiding the anchor elements is a trivial example, but it shows how we can use Firefox and Firebug to create a sandbox for playing around with jQuery.

隐藏锚元素是个微不足道的例子，但是它向我们展示了我们怎么如何通过FireFox和Firebug为玩转jQuery而建立一个沙箱。

Using Chrome 使用Chrome浏览器

If you are a Chrome user, as we both are, then you don’t need an add-on like Firebug. The built-in developer tools are pretty good and include a JavaScript console. There is a version of Firebug—called Firebug Lite—that adds many of the Firebug features that are available in the Firefox version, but using this is strictly optional.

如果你是一个Chrome用户，当然我们都是，那么你就不需要像Firebug这样的插件，它内置的开发工具非常好，还包含了一个Javascript控制台。Firebug有一个Firebug Lite版本--可以在Firefox中使用许多Firebug特性，但是它是可选的(插件)。

Once you have loaded a web page in Chrome, click the Customize and Control Google Chrome button (the one with the spanner icon), and select Tools ➤ JavaScript Console. Or as a shortcut, just press Ctrl+Shift+J on any web page. Figure 20-5 shows the result.

一旦你将一个Web页面载入到Chrome中，点击Google Chrome浏览器的自定义控制按钮（一个扳手图标），然后选择 Tools(工具)>Javascript 控制台(Console)，还有一个更快捷的方式，只需要在任意Web页面按下Ctrl+Shift+J组合键，图20-5显示了结果：

图20-5. 使用Chrome的Javascript控制台（Using the Chrome JavaScript console）

We can then enter jQuery statements into the console and see their effects immediately. If we want to experiment with web pages that do not use jQuery, then we must import the library using the statements shown in Listing 20-5.

这个时候我们在控制台键入jQuery语句，可以马上看到效果。如果我们想试验一下不用jQuery的Web页面效果的话，那么我们就必须使用列表20-5中的语句来导入库。

《小节完，下节--jQuery基础理论》

本文链接

[译]Pro ASP.NET MVC 3 Framework 3rd Edition 目录及说明

2012-03-31T07:19:00Z

英文原版下载地址：单击下载(无需积分)

备注：

在此之前，我也认真阅读了r01cn童鞋的译文，非常感谢r01cn童鞋的无私奉献，为我们这些学习MVC3的童鞋们提供了方便。对应一些词汇的翻译，这里翻译可能和r01cn童鞋不同，在下面我会列举出来，有更好的翻译方式大家可以跟帖提出，我会尽力更正，E文水平有限，希望大家拍砖轻些。

原词	翻译	说明
Createing	创建	r01cn 翻译为“生成”，在此我觉得“创建”更为准确
Mock	模拟	r01cn 翻译为“模仿”，在此我觉得“模拟”更容易理解
Build	编译	Building翻译为“建立”
Delegate	委托	有一些书籍和译文也被“委派”、“代表”，这里译为“委托”更大众化。
OverLoad	重载	重载是可使函数、运算符等处理不同类型数据或接受不同个数的参数的一种方法
reload	重新加载
override	重写	最熟悉的override就是对接口方法的实现，也可译为“覆盖”，这里采用重写译法

暂时先补充这么多，有新的有争议的翻译我会及时更新上来。

以下为目录部分：

Charpter 20：jQuery 第20章 jQuery

主章节标题	子章节标题	标题译著	翻译状态
Charpter 20：jQuery		第20章 jQuery
	0.引言	0.引言	已完毕(感谢r01cn)
	1.Creating the Project	1.新建项目	已完毕
	2.Referencing jQuery	2.引用jQuery	已完毕
	3.Writing jQuery Code	3.编写jQuery代码	已完毕
	4.Basic jQuery Theory	4.jQuery理论基础	已完毕
	5.Using jQuery Events	5.使用jQuery事件
	6.Using jQuery Visual Effects	6.使用jQuery可视化效果
	7.Using jQuery UI	7.使用jQuery UI
	8.Summary	8.小结

最新消息：

jQuery理论基础部分已经翻译完毕，鉴于最近工作开始忙了，还要准备5月份的考试，后面的翻译可能不会那么及时，抱歉。

2012-4-10 17:22

本文链接

[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 2.Referencing jQuery 引用jQuery

2012-03-31T06:57:00Z

Every new MVC Framework project that Visual Studio creates includes the jQuery library files, which can be found in the /Scripts folder. There are a number of jQuery files, and it is important to know what each of them does, as described in Table 20-1.

每一个通过Visual Studio新建的MVC框架项目会包含jQuery库文件，你可以在“/Scripts”文件夹中找到，这里有许多jQuery文件，弄明白它们每一个能做什么是非常重要的。表20-1描述了它们的作用。

表20-1. Visual Studio MVC框架项目包含的jQuery文件（jQuery Files Included in a Visual Studio MVC Framework Project）

Library File 库文件	Description 描述
jquery-1.5.1.js jquery-1.5.1.min.js	The regular and minimized versions of the core jQuery library.标准版、简化版的jQuery核心版本库
jquery-ui.js jquery-ui.min.js	The regular and minimized versions of the jQuery UI library. See the “Using jQuery UI” section of this chapter for more information. 标准版、简化版的jQuery UI版本库，查看“使用jQuery UI”章节部分获取更多信息。
jquery-unobtrusive-ajax.js jquery-unobtrusive-ajax.min.js	The regular and minimized versions of the library that supports unobtrusive Ajax, described in Chapter 19. 标准版、简化版的支持Unobtrusive Ajax的版本库，在章节19有被提及。
jquery-validate.js jquery-validate.min.js	The regular and minimized versions of the unobtrusive client-side validation feature, described in Chapter 18. 标准版、简化版的支持Unobtrusive（非强制）客户端验证特性的版本库，在章节18有被提及。
jQuery-1.5.1-vsdoc.js jQuery-validate-vsdoc.js	IntelliSense support for the core and validation libraries. See the “Writing jQuery Code” section of this chapter for details. 核心、验证库的智能感知支持，查看“编写jQuery 代码”章节获取详细信息。

Two versions of each file are available: the regular and minimized versions. The regular versions are human-readable and are useful during development. When we have a problem, we can use the JavaScript debugger in our browser and see what’s going on. They are also useful for simply learning about jQuery and JavaScript in general.

每一个文件都有两个版本可供选择：标准版和简化版。标准版是可读的，在开发期间非常有用，当我们遇到一个问题，我们可以使用Javascript 调试器在我们浏览器中查看发生了什么事情。他们还使学习jQuery和常规的JavaScript变得更简单。

■Tip ：There are also a set of files in the ~/Scripts folder whose names start with Microsoft, for example MicrosoftAjax.js. These are from version 2 of the MVC Framework and predate Microsoft fully embracing jQuery in ASP.NET MVC. We don’t discuss these files since they have been superseded and are included in MVC Framework just for compatibility with earlier versions.

■提醒：在“~/Scripts ”文件夹中也存在一组以“Microsoft”开头的文件，例如：“MicrosoftAjax.js”。这些文件来自MVC 框架的第二版，是微软早期包含在ASP.net中的jQuery。我们不讨论这些已经被取代的文件，他们的存在只是为了兼容早期的版本。

The minimized files contain the same JavaScript code but processed to reduce the size of the files that the browser has to download. Comments, long variable names, and unnecessary whitespace are all removed. It may not sound like much, but minimized files can be significantly smaller than their regular counterparts.

简化版的文件包含了相同的JavaScript代码，但是为了能方便浏览器下载而被缩小了文件的尺寸。注释、长变量名和一些空格被移除。这听起来不太可能，但最小化文件看起来明显小于标准文件。

MANAGING J QUERY VERSIONS 管理jQuery版本

As we write this, Visual Studio creates MVC Framework projects using jQuery 1.5.1. The MVC Framework is released on a different schedule than jQuery. The current version is 1.6.1, but it will almost certainly have changed again by the time you are reading this book. If you want to update the version of jQuery, simply open the Package Manager console (from the Tools ➤ Library Package Manager menu), and enter the following command: Update-Package jquery

当我们写到这里，Visual Studio创建的MVC框架项目采用的是jQuery1.5.1版本。MVC框架的发布计划不同于jQuery。jQuery的当前版本是1.6.1，但当你阅读这本书的时候，它几乎肯定已经改变了。如果你想升级jQuery的版本，最简单的方法就是打开Package Manager控制台(在“工具>Library Package Manager”菜单中)，然后输入以下的命令：Update-Package jquery

This will remove your project’s existing jQuery script files and replace them with the latest versions. You will then need to update /Views/Shared/ Layout.cshtml so that it references the newly added files, for example changing the following:

这将会移除项目中已经存在的jQuery脚本文件，用最新的版本替代。这个时候，你需要更新“/Views/Shared/ _Layout.cshtml ”文件使它引用新添加的文件，例如改变如下：

to this:

变更为:

We give more details on how to reference the jQuery libraries shortly.

不久我们就会给出如何引用jQuery库的更多细节.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

New ASP.NET MVC 3 projects include by default a reference to the jQuery library in the default layout file, ~/Views/Shared/ Layout.cshtml, as shown in Listing 20-3.

新的ASP.NET MVC3项目默认会在项目默认的布局文件”~/Views/Shared/ _Layout.cshtml”中引用jQuery库文件,如同列表20-3中显示:

列表20-3. jQuery在_Layout.cshtml中的引用（The jQuery Reference in _Layout.cshtml）

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

If we want to use jQuery in a view that does not use the default layout, then we need to make sure to copy the script element to the layout that the view does use, or directly into the view itself.

如果我们想在一个不使用默认布局方式的视图中使用jQuery的话，我们需要确定将这脚本元素拷贝到这个视图所使用的布局文件中，或者直接拷贝到视图本身。

■ Tip： For Internet applications, it can make sense to obtain the jQuery library from a content distribution network (CDN). See the “Using a CDN for JavaScript Libraries” sidebar in Chapter 18 for details.

■提醒：对于Internet应用，能从内容分布网络(CDN)得到jQuery库是很有意义的。在章节18中查看“为JavaScript库使用CDN”栏获取详细信息。

本文链接

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

2012-03-31T04:31:00Z

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的特性的时候，我们会处理一些外观展示的问题。

本文链接

发一个自己写的账号管理软件

2011-06-02T14:36:00Z

互联网产品是多了，但是随之带来的就是我们自己需要记录的账号也多了，我昨天就是把自己前两天用的淘宝账号给忘记了，那个纠结啊，最终没有办法，给淘宝客服打电话，验证了一堆一些信息，才给我想办法找回了密码，想想就像搞一个账号管理软件，在网上查找了一下，也没有找到好用的，就自己花了一些业余时间，简单写了一个，给大家发一下，简单个人用的。

一个就上面3个文件，双击打开“账号管理软件.exe”，

默认是没有任何用户的，当你输入用户名的时候会验证用户是否存在，

也会给出相应的提示，这里我们注册一个用户，

注册界面也比较简单，

仅仅用于登录，我还有一些想法，暂时还没有加进去，只是做了基本的功能。

用我们刚注册的用户登录，验证通过后打开主界面。

界面比较简单，上面工具栏一次是添加账号信息，修改账号信息，删除账号信息，账号分类管理4个选项。

添加账号界面，做了简单的验证，密码默认以星号显示。

单击信息，可出现查看界面，

选中信息，点修改账号信息按钮，可完成修改。

删除功能就不再介绍。

类别管理默认4个选项，可以根据自己的需要添加和移除，

注意，在移除的时候如果有账号信息引用类别信息，这个类别默认是不允许删除的。

程序可能还有些bug，我还有一些想改善的地方，不过还没有一一修正，不过一般功能已经实现。

这个程序没有使用数据库，采用序列化文件存储，每个用户一个文件存储，备份就不用说了，直接把data下的对应用户名的bin文件拷贝走就可以了。

源码地址：svn://www.oksvn.com/AccountManger

大家自己安装个svn客户端checkout一下，

~~源码现在缺了2个文件，明天我到公司提交一下。~~

源码我已经补全，大家可以下载，有问题留言交流。

方便自己，大家可以根据自己的需要随意更改。

码功水平一般，欢迎大家指正代码中的问题。

备注：因为程序的逻辑处理部分都被我写到了model的两个services中，所以如果你想采用WPF或者Winform做UI都可以，只需要把UI部分的代码处理一下即可。

本文链接

VS2010 SP1无法安装MVC3的解决方案

2011-05-06T08:42:00Z

这两天想学习一下MVC，查看了一下VS2010，自带的模板只有MVC2 的，

就到网上下载了MVC3的安装包，但是安装过程中始终安装不成功，

查看安装日志，提示vs10-kb2483190-x86.exe安装不成功，

在网上查找了相关问题，试了几种解决方案始终解决不了，

只好试着卸载了SP1，卸载完了以后VS2010也无法正确执行了，

提示某些组件无法正常工作，无奈之下只好把VS2010卸载重装了，

然后再没有安装SP1的情况下安装MVC3，

终于装上了，困扰了我一下午啊。

发来给大家参考一下。

本文链接

[翻译]在WCF 服务中共享DataContacts

2011-04-28T01:44:00Z

Sharing DataContracts between WCF Services

在WCF Services中共享DataContacts

在之前的文章《Multiple web service references sharing types》中，

我写到关于在引用web services时如何共享类型，

那篇文章使用了旧版的Asp.net web services技术，但是现在流行WCF，

在这篇文章中我会采用和之前文章类似的描述方式，

来讲述在WCF环境下如何来实现。

接下来我会描述一下实现方案，说明一下可能出现的问题以及如何来避免它。请大家也阅读一下前一篇文章，

解决方案大致比较相似，这里也将会提到。

如果你不熟悉WCF和DataContracts，

你可以阅读一下David Chappell写的《Introducing Windows Communication Foundation in .NET Framework 4》,

Aaron Skonnard曾经写过一篇更好的介绍WCF4的文章，在这里可以看到：

《A Developer’s Introduction to Windows Communication Foundation 4》.

具体方案:

下面我们就来说明这种方案：

一个WCF服务会暴露一些方法给用户使用，在这个例子中会有两个公开方法：
GetCustomer: int型参数,customer的ID,根据ID从库中返回对应的customer对象.
GetCustomerStatus:以customer作为参数，返回一个基于customer(客户)年龄的字符串，通知客户端这个customer（客户）是否允许下订单.

服务通过接口暴露给下方,在接口声明上需要加上[ServiceConcact]标记，在方法声明上加上[OperationContact]标记.

服务定义

这两个方法采用了相同的数据契约(DataContact),数据契约在WCF中是服务暴露的一种自定义类型，这个类可以包含很多属性，

方法和函数.属性通过标记为[DataMember]来暴露给用户.

这些属性可以在它们的get和set方法中包含一些逻辑处理.下面展示了Customer DataContact如何定义的，

方法作用请查看代码中注释部分。

数据契约定义21 using System;  
22 using System.Collections.Generic;  
23 using System.Linq;  
24 using System.Text;  
25 using System.Runtime.Serialization;  
26 
27 namespace ServicesDataContracts  
28 {  
29     [DataContract]  
30  public class Customer  
31     {  
32         [DataMember]  
33  public int ID { get; set; }  
34 
35         [DataMember]  
36  public string Name { get; set; }  
37 
38         [DataMember]  
39  public DateTime BirthDate { get; set; }  
40 
41  ///
42  /// True if the customer is 18+ years old, false otherwise.
43  /// 18岁以上返回true
44  public bool IsAllowedToShop  
45         {  
46  get
47             {  
48  if (DateTime.Now.Date.AddYears(-18) >= BirthDate.Date)  
49  return true;  
50 
51  return false;  
52             }  
53         }  
54 
55  ///
56  /// Returns a text based on the age of the customer.
57  /// 返回当前customer是否被预先下单
58  public string GetStatusMessage()  
59         {  
60  if (IsAllowedToShop)  
61  return string.Format(  
62  "[{0}] {1} is allowed to place orders",  
63  this.ID, this.Name);  
64 
65  return string.Format( 
66  "[{0}] {1} is NOT allowed to place orders. Reason: too young, born {2}.",  
67  this.ID, this.Name, this.BirthDate.ToShortDateString());  
68         }  
69     }  
70 } 
 
关于以上代码的部分注解：
我决定将Customer类放置到一个单独的类库中，命名空间为ServicesDataContracts。
在第5行，System.Runtime.Serialization 命名空间包含了DataContract特性的定义。
需要注意的是，使用它仍需要添加System.Runtime.Serialization的引用。
属性上添加DataMember特性标记表示它被暴露给服务。（备注：可以被客户端访问）
在这个例子中包含ID,Name和BirthDate属性被标记。
IsAllowedToShop属性没有被暴露。（不可被客户端访问）
GetStatusMessage 函数(方法)没有被暴露。
通过DataContract标记暴露的属性可以在get和set方法中包含逻辑处理，
但是在添加服务引导到客户端时候并不会把这些传递过去。（我理解为在客户只能看到属性而看不到逻辑处理）
一个客户端引用服务像以下使用：
演示代码71 CustomerService.HandlerClient customerClient = new CustomerService.HandlerClient();  
72 CustomerService.Customer customer1 = customerClient.GetCustomer(1);  
73 string statusText = customerClient.GetCustomerStatus(customer1);  

 
客户端通过CustomerService的命名空间保持一个服务的引用，
这个命名空间在添加服务引用的时候被定义。 
到目前为止这个服务接口是比较小的，而且功能比较薄弱的，但是它无疑会随着时间的推移慢慢壮大的。 
当服务汇集到一个点时它就很难维护，这个时候就有必要将它分拆成多个小型的服务。
（这句话我自己理解就是当服务比较庞大时，就有必要根据它实现的功能分拆成一个个的小服务，实现职责分离。）
看下面这幅图片，它可以把我想让WCF Service做的事情展示的更容易让人明白。
此服务客户端可以将对象通过一个服务传到其他的服务，而无需转换。
分离以及类型共享
由于这个服务接口是小规模的服务，以上所述的方案也显得比较零碎，但是，我们仍然坚持来看一下如何来分离它。
The same procedure when splitting is probably applicable on larger services with a lot of DataContracts. 
(这句不知道怎么翻译好，总觉得读着挺难过的)当为一个相同的程序拆分一个包含多个DataContract的大型服务的时候，
The following will be done:
将完成以下操作：
创建一个暴露GetCustomer方法的服务，这个服务持有Customer库，在这种情况下它是个虚拟的库。
创建一个暴露GetCustomerStatus方法的服务。
这两个服务会共用一个DataContract，就是上面提到的Customer类。
为客户端建立一个分布式的DataContract（下面我会讲为什么这么做）
建立一个客户端应用程序，引用这两个服务。
所以为什么这个DataContract被服务用户使用的时候要被声明成分布式的呢？
当添加这两个已经被创建的服务引用时，
这个Customer类会根据客户端使用不同的服务而被声明为两个不同的类型，(2个服务引用产生不同的命名空间，从而Customer类就变成了“两个”不同的类了)
这将导致很难从提供了GetCustomer方法的服务以及提供了GetCusomerStatus方法的服务中获取到Customer对象。(因为这个服务被解析到了两个不同的命名空间中)
第一个服务返回的Customer对象必定会忽略第二个服务返回的Customer类型对象。在这个例子中，Customer类是个比较小的类，
但是它依然可以比较好的通过对象传递给下一个服务。
在Visual Studio解决方案中，通过添加两个WCF服务应用，就可以很容易的解决上述列出的两件事情。 
在这个新的服务接口上添加方法，GetCustomer方法继承自第一个接口，GetCustomerStatus方法继承自第二个接口。
这两个服务需要引用一个相同的数据契约类库，做完这些，编译整个解决方案。
这些服务在客户端共享这个相同的数据契约类型的诀窍就是这个类库必须要在一个单独的类库中。
这样就使它可以使用Visual Studio的svcutil工具，用那个工具你可以在一个类库中提取数据契约的定义。
所以，让我们来这么做。
DataContract extraction
数据契约释放（这个不知道如何翻译好）
打开一个VisualStudio命令行工具，执行以下的命令，输出如下：
svcutil /dconly <path to the output DataContract class library dll>
这个命令会从.dll文件中提取数据契约，然后创建一些.xsd文件。
这些xsd文件可以被分发到各个服务的消费者队伍，这将耗尽这些数据契约。(怎么都感觉不太通顺)
在这个例子中，我会使用相同名称的数据契约dll类库的xsd文件，并在客户端生成一个类文件。
现在让我们这样做。注意，在我的实例中支持这个契约的被称作ServiceDataContracts.xsd的.xsd文件被称为 ServicesDataContracts 的类库。(也不是很通顺)
(以下命令)输入的参数让我们决定了产生的类文件名称，输入如下显示：
svcutil /dconly /language:CS ServicesDataContracts.xsd /out:CustomerDataContracts.cs
通过上面的命令行产生的类文件将被添加到客户端的类库项目中。
在我的这个实例中我决定调用这个ConsumerDataContracts项目。
添加服务引用
现在是时候添加我们以上创建的两个服务引用了。
但是在这之前，在ConsumerDataContracts类被添加之前，让客户端引用这个类库。
解决方案将会像这样：
这里你就可以看到这个数据契约类库和从ServiceConsumer项目添加的引用。
在我的这个实例中，我会使用一个一个windowsForms应用来使用这些服务。
现在是时候添加这些服务引用了。右键选择“添加服务引用”。
输入第一个服务的地址，给你选择的指定一个命名空间（我输入的是“CreatorService”）
单击高级按钮确定选择“重用指定类型”
在这之后选择ConsumerDataContracts引用。像这样：
单击确定。这个服务引用就会被添加到项目中。重复这个操作添加第二个Wcf服务引用。
我给第二个引用的服务命名为ControllerService。这个解决方案会像这样：
自此我们便添加了像我们设置的重复类型的服务。
这两个服务引用会使用ConsuumerDataContracts中的Customer数据契约。
到现在为止，我们就算完成了，现在就可以这样调用这些服务：
74 CreatorService.CreatorClient creatorServiceClient = 
75 new CreatorService.CreatorClient(); 
76 Customer customer1 = creatorServiceClient.GetCustomer(1); 
77 
78 ControllerService.ControllerClient controllerServiceClient = 
79 new ControllerService.ControllerClient(); 
80 string statusText = controllerServiceClient.GetCustomerStatus(customer1); 
关于以上代码的注解:
在第一行和第二行：客户端CreatorService被创建
在第三行：一个customer对象被CreatorSercie返回
在第五行和第六行：客户端ControllerService被创建
在第七行：这个customer对象被传递给ControllerService
第七行的服务调用方法是不可能的，它会产生一个编译错误。
如果我们不能更早的添加服务引用又应该如何重用这些类型呢，
这中间发生了什么？
我尝试总结一下我们刚刚所做的：
我们想将一个已经存在的WCF服务分拆成一些小的部分。
我们想在让这些服务在客户端共享类型。
我们创建了两个使用了相同数据契约类库的小型服务来代替那个大的服务。
我们提取这些数据契约添加他们到客户端类库项目中。
我们往客户端添加服务引用让他们重用客户端类库中我们添加的数据契约类型。
我们尝试让我们的服务从一个服务获取的customer对象作为一个参数传递到另外一个服务。
没有强制类型转换会使客户端代码非常干净整洁，服务端代码完全与拆分前相同。
唯一的区别是一半的代码添加到一个服务，另一半在其他服务中。
我已经在一篇文章中解决了这个问题，我将发表我用来尝试执行这个问题的解决方案。
这个解决方案包含这两个服务拆分之前和拆分后两种形式。这个服务被应用在两个form中，
一个使用了“大”的服务，一个使用两个较小的服务。
原文地址：
http://www.freddes.se/2010/05/02/sharing-datacontracts-between-wcf-services/
 
后记：
断断续续终于把这篇文章翻译完了，因为本人英文水平有限，翻译难免有不妥的地方，欢迎大家批评指正，如果有觉得不明白的地方，可以参考一下原文，
我也会根据大家的指正修正其中错误。其中蓝色部分不是翻译后的文字，只是加入了我个人的理解。
谢谢。

本文链接

资源下载（2011-6-09更新）

2011-03-04T03:25:00Z

软件资源下载
1：ExpressionStudio3中文版(含xx文件)
下载地址：http://u.115.com/file/f49284f4b8
备注说明：此下载包含xx文件
2：ExpressionStudio3(xx文件)
下载地址：http://u.115.com/file/f447cdc2ef
备注说明：此下载仅为xx文件
3：MyEclipse8.0M1+SVN插件+汉化
下载地址：http://u.115.com/file/f422239634
备注说明：此下载包含汉化文件集成了SVN插件
4：CamtasiaStudio6屏幕录制软件中文xx版
下载地址：http://u.115.com/file/f4e8d01859
备注说明：此下载包含xx文件
5：PowerDesigner12.5汉化xx版
下载地址：http://u.115.com/file/f499e2b297
备注说明：xx请根据内置说明操作
6：sqlitestudio-1.1.3(Sqlite管理工具)
下载地址：http://u.115.com/file/f43925b411
备注说明：绿色软件
7：Win7激活补丁
下载地址：http://u.115.com/file/f494f68ac2
下载地址：http://u.115.com/file/f4b0261489
备注：一个两个，哪个能用用哪个，2个补丁基本涵盖了所有win7版本的xx
8：ExpressionStudio4中文旗舰版
下载地址：

thunder://QUFodHRwOi8vZHgzLjk5ZC5jb20vMjAxMDExLzk5RC5DT01fRXhwcmVzc2lvbl9TdHVkaW80X1VsdGltYXRlLnJhclpa 备注：无xx包，经测试下载链接可用
9：Notepad++ v5.7绿色中文版
下载地址：http://u.115.com/file/f44b9cf450
备注：内含如何添加到右键菜单的方法，请查看说明文件
10：IconWorkShop6.5中文版
下载地址： http://u.115.com/file/f471356953
备注：一款强大的图标设计工具，可以将任意格式图片转换为ico或icl图标库,强烈推荐
11:AltovaXMLSpy2006
下载地址：http://u.115.com/file/f4a8e032ca
备注：XMLSpy是所有XML编辑器中做得非常好的一个软件，支持WYSWYG。
12:Svn客户端工具（AnkhSvn和 TortoiseSVN-1.6.10.1989）
下载地址：http://u.115.com/file/f468908086
备注说明：AnkhSvn安装完成后自动集成至Vs，支持2010. TortoiseSVN内含中文语言包，安装完毕后安装语言包，然后再设置中选择简体中文即可。
13:UIDesignerV1.0(C/S应用程序原型设计软件-腾讯出品)
下载地址：http://u.115.com/file/f4f316e563
备注说明：腾讯出品的C/S应用程序的原型设计软件，具体介绍可查看腾讯相关专题。（百度一下软件名即可）

WPF+Silerlight学习资源
1：OReilly.XAML.in.a.Nutshell.Mar.2006
下载地址：http://u.115.com/file/f4f2baaa04
备注：XAML学习文档
2：TeachYourselfWPFin24Hours（24小时自学WPF）
下载地址：http://u.115.com/file/f482e57e92
备注：如题所示
3：WPF+学习笔记
下载地址：http://u.115.com/file/f4f5e86dfd
备注：如题所示
4：WPF程序设计指南
下载地址：http://u.115.com/file/f46cdf1d68
备注：pdf文档
5：WPF——基础教程XAMl
下载地址：http://u.115.com/file/f41bde4cdb
备注：Word文档
6：XAML学习体会
下载地址：http://u.115.com/file/f4fc7621db
备注：word文档
7：Silverlight_3SDK文档中文版
下载地址：http://u.115.com/file/f4e0368868
备注：zip文件
8：WPF程序设计指南(中文版)
下载地址：http://u.115.com/file/f48c2ef843
备注：RAR文件

.NET代码学习
1：PetShop4.0(CSharp)详解一至八
下载地址：http://u.115.com/file/f422249f5b
备注：微软PetShop4.0架构详解，有助于学习微软的最新技术
2：PetShop4.0 中文版
下载地址：http://u.115.com/file/f42cad7281
备注：源码，中文注释版
3：MVPSimple
下载地址：http://u.115.com/file/f457c1651c
备注：C#实现简单MVP模式代码
4：NET开源图表控件
下载地址：http://u.115.com/file/f47539dded
备注：含Dll及源码和帮助文档
5：SourceGrid4_22(Grid 开源控件)
下载地址：http://u.115.com/file/f475161e2 （源码）
下载地址：http://u.115.com/file/f4bab86bc2 （函数说明(EN)）
备注：见下载备注
6：金质打印通全源码
下载地址：http://u.115.com/file/f4d0302354
备注：源码

.NET相关学习文档
1：c#高级编程第6版(含源码)
下载地址：http://u.115.com/file/f428b1eabc
备注：见题
2：通用权限管理概要设计说明书
下载地址：http://u.115.com/file/f48b0f564f
备注：doc文档
3：WinForm树控件开发说明书
下载地址：http://u.115.com/file/f4c5fe86d2
备注：pdf文档
4：开源信息系统开发平台之OpenExpressApp框架
下载地址：http://u.115.com/file/f4813eaff8
备注：pdf文档
5：程序员的SQL金典
下载地址：http://u.115.com/file/f41dafd769
备注：不完整版，如觉得本书写的好，请购买正版图书
6：ASP.NET_Web开发性能优化
下载地址：http://u.115.com/file/f41492e0f9
备注：pdf文档
7：C#与.NET_3.5高级程序设计(第4版)
下载地址：http://u.115.com/file/f46a6ae4f1
备注：RAR文件(PDF)
8：net设计规范-约定、惯用法与模式
下载地址：http://u.115.com/file/f473948b97
备注：RAR文件(PDF)
9： Visual.Csharp.NET.2008程序设计案例集锦
下载地址： http://u.115.com/file/f42789625e
备注： pdf文档
10： [程序员突击Visual.Csharp.2008原理与系统开发]扫描版
下载地址： http://u.115.com/file/f4323732eb
备注： pdf文档
11： WF本质论（中英文电子版+附书源码）
下载地址： http://u.115.com/file/f4863da780
备注： PDF文档
12： C#2010与.NET4.0高级程序设计英文高清版
下载地址：点击下载part1
下载地址：点击下载part2
备注： PDF文档共两个分卷

13：CLR via C# 英文高清第三版

下载地址：http://u.115.com/file/f4edfa74ad

备注：框架设计最新版，暂无中文版，增加了3.0,4.0的内容。

其他资源

1：WP7使用者界面设计与互操作指南

下载地址：http://u.115.com/file/aqbmryig

备注：WP7的使用指南向导

设计资源
1、等待状态图标

下载地址：115下载 CSDN分流下载

备注：全部为GIF动态图片。

2、登录界面UI设计图

下载地址：115下载 CSDN分流下载

备注：遗憾的是只有JPG图片，大家用的时候自己发挥自己的PS水平吧。

3、各种按钮图片PNG格式

下载地址：115下载 CSDN分流下载

备注：各种大小各有一套，16*16，24*24……128*128

说明：

1：资源均从网络上收集，如是破解版,请在下载后24小时内删除。

2：如果有哪个链接失效或链接错误，请留言说明，我会尽快更新下载地址。

更新记录：

2010-11-19

追加ExpressionStudio4中文旗舰版下载链接

追加Notepad++ v5.7绿色中文版下载链接

追加IconWorkShop6.5中文版下载链接

追加金质打印通全源码下载

2010-12-1

追加WPF程序设计指南(中文版)

追加C#与.NET_3.5高级程序设计

2010-12-22

追加net设计规范-约定、惯用法与模式

追加Visual.Csharp.NET.2008程序设计案例集锦

追加[程序员突击Visual.Csharp.2008原理与系统开发]扫描版

追加WF本质论（中英文电子版+附书源码）

2011-1-5

追加资源分类

追加状态图标一套

追加登录UI界面图一套

追加按钮图片PNG格式一套

追加C#2010与.NET4.0高级程序设计英文高清版

2011-3-4

删除一些破解文件下载

追加 Altova XMLSpy 企业版 2006下载

2011-3-11

软件下载部分追加SVN客户端工具AnkhSvn和 TortoiseSVN

软件下载部分追加UI-Designer1.0(腾讯出品的C/S应用程序原型设计工具)

2011-3-16

资料下载增加《CLR via C#》英文第三版

2011-6-09

增加其他资源分类

增加《WP7使用者界面设计与互操作指南》

本文链接