ASPDotNet 二、使用 jQuery 选择器与 ASP.NET 控制器

二、使用 jQuery 选择器与 ASP.NET 控制器

本章将向你介绍各种类型的选择器，它们可以用于 ASP.NET 控制。本章将介绍以下食谱:

选择使用 ID 的控件并显示其值
选择一个使用 CSS 类的控件
选择使用 HTML 标记的控件
根据控件的属性选择控件
根据元素在 DOM 中的位置选择元素
启用/禁用 web 表单上的控件
在 MVC 应用中使用选择器

注意事项

本书提供的源代码将每个菜谱作为一个独立的项目编写，并命名为Recipe1、Recipe2、Recipe3，等等。

简介

一个网页是由各种 HTML 元素组成的，如表单、div、span、段落、超链接、表格、输入、选择等。在编写客户机脚本时，通常需要操作这些元素。在 JavaScript 中，可以通过document.getElementById()语句使用这些元素的唯一 id 访问它们。

但是，在实际的应用中，可能需要基于属性而不是 id 来检索元素。或者一些应用可能需要检索和操作多个元素。这是通过使用 jQuery 中的选择器实现的。

选择器是一个 jQuery 构造，它根据指定的条件来检索页面上的元素。它可以用来返回单个或多个元素。使用 jQuery 选择器,它可以匹配元素使用他们的ID,CSS 类,标签名称【显示】和位置的文档对象模型(DOM)或其他属性。****

**当一个 ASP。在浏览器中查看。NET 页面时，控件呈现为 HTML 元素。这使得选择 ASP 成为可能.NET 控件使用标准 jQuery 选择器。下表总结了一些常见的 ASP。 . NET 控件到其呈现的 HTML 对等物:

ASP.NET 控制

呈现的 HTML 元素

呈现的 HTML 标记

| | --- | --- | --- | | BulletedList | ul,他们 | <ul><li></li>``<li></li></ul> | | 按钮 | 输入 | <input type= "submit"/> | | 复选框 | 输入 | <input type= "checkbox"/> | | CheckBoxList | 输入 | <input type= "checkbox" name="CheckBoxList1"/>``<input type= "checkbox" name="CheckBoxList1"/> | | DropDownList | 选择,选项 | <select><option></option>``<option></option></select> | | 超链接 | 一个 | <a> | | 图像 | img | <img> | | ImageButton | 输入 | <input type= "image"/> | | 标签 | 跨度 | <span> | | LinkButton | 一个 | <a> | | 列表框 | 选择,选项 | <select><option></option>``<option></option></select> | | 面板 | div | <div> | | RadioButton | 输入 | <input type= "radio"/> | | RadioButtonList | 输入 | <input type= "radio" name="RadioButtonList1"/>``<input type= "radio" name="RadioButtonList1"/> | | 文本框 | 输入 | <input type="text"> | | 显示数据表格 | 表格 | <table> |

标准 jQuery 选择器也可以和 ASP 一起使用。因为 MVC 应用使用原始 HTML 标记或 HTML 类的内置扩展方法来呈现内容。

jQuery 选择器可以大致分为以下几种类型:

: These selectors are similar to CSS selectors that are used in style sheets to apply styles to selected elements. Basic selectors can be used to retrieve elements based on the HTML tag, CSS class, element ID, or a combination of all these. The examples of basic selectors are as follows:

|
Example

|

Description

| | $("*") | This will select all elements on the page | | $("div") | This will select all the <div> elements on the page | | $(".highlight") | This will use CSS class highlight to select all elements on the page. | | $("#footer") | This will select the element whose ID is equal to footer | | $("div, p, .highlight, #footer") | This will select all <div> and <p> elements, all CSS highlight elements, And the element whose ID is T11. |
Hierarchy selectors : These selectors are also similar to CSS selectors and are used to select child elements in the DOM tree. The examples of hierarchy selectors are listed as follows: that are direct children of the <div> element. that follow <div> and have the same parent element as <div> elements. adjacent to <div> elements.

|
Example

|

Description

| | --- | --- | | $("div p") | This will select all the <p> elements in the <div> element | | $("#footer p") | This will select all descendants of the element whose ID is equal to footer. | | $("div > p") | This selects all the <p> elements | | $("div ~ p") | This will select all <p> elements | | $("div + p") | This will select all <p> elements |
Attribute selectors : These selectors retrieve elements based on the attributes they have. The examples of attribute selectors are listed as follows: .

|
Example

|

Description

| | --- | --- | | $("a[href]") | This will select all the <a> elements with the href attribute | | $("a[href= 'http://www.google.com']") | This will select all <a> elementsthat href are exactly equal to 'http://www.google.com'. | | $("a[href*= 'google.com']") | This will select all <a> elements that href contain 'google.com'. | | $("a[href^= 'https']") | This will select all the <a> elements whose href begins with 'https'. | | $("a[href$= '.org']") | This will select all <a> elements ending in href. | | $("a[hreflang|= 'en']") | This will select hreflang equal to 'en' or all <a> beginning with 'en-'. Elements. |
: These selectors are used to work with various form elements, such as an input, checkbox, radio, and so on. The examples of form selectors are as follows:

$(":selected")

$(":enabled")

|
Example

|

Description

| | $(":button"), $(":submit"), $(":reset"), $(":text"), $(":radio"), $(":checkbox"), $(":password"), $(":image"), $(":file") | This will select a specific type of input element | | $(":input") | This will select all form elements | | $(":checked") | This will select all selected check boxes and radio buttons | | This will return all selected <option> elements | | This will return all enabled form elements | | $(":disabled") | this will return all disabled elements form Element |
Position filters : These selectors retrieve elements based on their position in a collection. The examples of position selectors are listed as follows:

|
Example

|

Description

| | $(".highlight :first") | This selects the first element of the CSS class highlight. | | $(".highlight :last") | This select the last element of CSS class highlight | | $(".highlight :odd") | It selects an odd number of elements from all elements of the CSS class highlight. When the index is zero, It selects even elements from all elements of CSS class highlight. When the index is zero, Select element | | $(".highlight :lt(3)") | from all elements of CSS class highlight with index 3. It selects elements with an index less than 3 from all elements of the CSS class highlight | | $(".highlight :gt(3)") | When index is zero, select the element with index greater than 3 from all elements of CSS class |

注意事项

在http://api.jquery.com/category/selectors可以找到更多关于不同类型的 jQuery 选择器的信息。

在编写 jQuery 代码时，经常使用匿名函数。匿名函数是一个没有命名标识符的函数。它通常用作其他函数的参数。

假设我们有一个onDocumentReady()函数。这个函数作为参数传递给$(document).ready()函数，如下所示:

function onDocumentReady(){…}

$(document).ready(onDocumentReady);

匿名函数可以作为参数直接传递给$(document).ready()，如下所示:

$(document).ready(function(){ …} );

但是，请注意，匿名函数一旦创建就不能访问。

使用 ID 选择控件并显示其值

这个配方演示了如何访问基本的 ASP.NET 控件，例如CheckBoxList，TextBox和RadioButtonList，使用 jQuery 的#identifier选择器。本例中使用的结构如下:

构造

类型

描述

| | --- | --- | --- | | $(#identifier) | jQuery 选择器 | 此基于其ID选择元素 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | :checked | jQuery 选择器 | 这将选择选中的输入元素 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数 | | .find() | jQuery 方法 | 这将查找与筛选器匹配的所有元素 | | .html() | jQuery 方法 | 这将返回第一个匹配元素的 HTML 内容，或者设置每个匹配元素的 HTML 内容 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值 | | .next() | jQuery 方法 | 这将获取元素的直接兄弟元素 | | :selected | jQuery 选择器 | 这将检索选定的输入元素 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值 |

准备

下面是使用基本 ASP 创建表单的步骤.NET 控件:

In this example, we will create a simple User Registration form, as shown in the following screenshot:
创建一个ASP.NET Web 应用项目使用空模板和名称项目Recipe1(或任何其他合适的名称)。
添加一个Web 窗体到项目中，并添加名称其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用<script>块或ScriptManager控件将 jQuery 库包含在窗体中，如第一章，中所述。 。
现在，拖放 ASP。 . NET 控件通过导航到工具箱|Standard控件来创建窗体，如上图所示。
表单的 HTML 标记如下:

<table> <tr> <td> <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> </td> <td> <asp:TextBox ID="txtName" runat="server" Width="223px"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblGender" runat="server" Text="Gender"></asp:Label> </td> <td> <asp:RadioButtonList ID="rblGender" runat="server"> <asp:ListItem Text="Male" Value="Male"></asp:ListItem> <asp:ListItem Text="Female" Value="Female"></asp:ListItem> </asp:RadioButtonList> </td> </tr> <tr> <td> <asp:Label ID="lblEducation" runat="server" Text="Highest Education"></asp:Label> </td> <td> <asp:DropDownList ID="ddlEducation" runat="server" Height="16px" Width="231px"> <asp:ListItem Text="--Select--" Value=""></asp:ListItem> <asp:ListItem Text="Post Graduate" Value="PG"></asp:ListItem> <asp:ListItem Text="Degree" Value="DG"></asp:ListItem> <asp:ListItem Text="Diploma" Value="DP"></asp:ListItem> <asp:ListItem Text="A-Levels" Value="AL"></asp:ListItem> <asp:ListItem Text="O-Levels" Value="OL"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> <asp:Label ID="lblInterest" runat="server" Text="Interest Areas"></asp:Label> </td> <td> <asp:CheckBoxList ID="chkInterest" runat="server"> <asp:ListItem Text="ASP.NET" Value="ASP.NET"></asp:ListItem> <asp:ListItem Text="Java" Value="Java"></asp:ListItem> <asp:ListItem Text="Android" Value="Android"></asp:ListItem> <asp:ListItem Text="HTML5" Value="HTML5"></asp:ListItem> <asp:ListItem Text="XML" Value="XML"></asp:ListItem> </asp:CheckBoxList> </td> </tr> <tr> <td colspan="2">   <asp:CheckBox ID="chkSubscribe" runat="server" Text="Subscribe to newsletter" /> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> </td> </tr> </table>

怎么做……

在 jQuery 库被包含在<script>块中后，在中包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function() {
    $("#<%=btnSubmit.ClientID%>").click(function() {
      var strName = $("#<%=txtName.ClientID%>").val();
      var strGender =
        $("#<%=rblGender.ClientID%> input:checked").val();
      var strEducation = $("#<%=ddlEducation.ClientID%>").find(":selected").text();
      var strInterest = "";
      $("#<%=chkInterest.ClientID%> input:checked").each(
        function() {
          strInterest += " " + $(this).val();
        });
      var strSubscribe = "";
      if ($("#<%=chkSubscribe.ClientID%>").is(":checked")) {
        strSubscribe = $("#<%=chkSubscribe.ClientID%>").next().html();
      }
      var strDisplayMsg = "You are about to submit the following data: \r\n\r\n" +
        "Name: " + strName + "\r\n" +
        "Gender: " + strGender + "\r\n" +
        "Highest Education: " + strEducation + "\r\n" +
        "Interest Areas: " + strInterest + "\r\n" +
        strSubscribe + "\r\n\r\n" +
        "Click OK to proceed"
      window.confirm(strDisplayMsg);
    });
  });
</script>

注意事项

前面的<script>块可以包含在<head>或<form>元素中，这取决于 jQuery 库如何包含在页面中。

How it works…

让我们看看是如何工作的:

Save the application using Ctrl + S, and run it by pressing F5. This will launch the User Registration page. Enter some test values in the controls, and click on the Submit button. A confirmation prompt is displayed that summarizes the values of the controls as follows:

注意事项

请注意，没有对控件进行验证，并且该页面还允许您提交空白表单。验证将在后续章节中描述。
In the jQuery <script> block, every ASP.NET control is retrieved using the #identifier selector on the equivalent rendered HTML tag. The code is executed when the click event of the Submit button is raised, as shown in the following code:

$("#<%=btnSubmit.ClientID%>").click(function () {…});

注意事项

ClientID为 ASP 分配的值.NET 到服务器控件在运行时生成的等效 HTML 标记的ID中。 ASP.NET 为生成客户端提供了各种算法，如 AutoID、Static、Predictable 和 Inherit。
在运行时，TextBox控件呈现为以下 HTMLinput元素(右键单击浏览器中的页面，并单击View Source以查看呈现的 HTML):
因此，在 jQuery 代码中，TextBox控件的值带有ID等于txtName可以通过以下代码访问:

var strName = $("#<%=txtName.ClientID%>").val();
The RadioButtonList control is rendered as the following HTML code:

<table id="rblGender"> <tr> <td><input id="rblGender_0" type="radio" name="rblGender" value="Male" /><label for="rblGender_0">Male</label></td> </tr> <tr> <td><input id="rblGender_1" type="radio" name="rblGender" value="Female" /><label for="rblGender_1">Female</label></td> </tr> </table>

在 jQuery 代码中，可以使用选中的过滤器访问列表中选中的单选按钮，如下所示:

var strGender = $("#<%=rblGender.ClientID%> input:checked").val();
The DropDownList control is rendered as the following HTML code:

<select name="ddlEducation" id="ddlEducation" style="height:16px;width:231px;"> <option value="">--Select--</option> <option value="PG">Post Graduate</option> <option value="DG">Degree</option> <option value="DP">Diploma</option> <option value="AL">A-Levels</option> <option value="OL">O-Levels</option> </select>

jQuery 代码使用selected过滤器从DropDownList控件中找到选中的项目，并返回其text值，如下所示:

var strEducation = $("#<%=ddlEducation.ClientID%>").find(":selected").text();
The CheckBoxList control is rendered as the following HTML code:

<table id="chkInterest"> <tr> <td><input id="chkInterest_0" type="checkbox" name="chkInterest$0" value="ASP.NET" /><label for="chkInterest_0">ASP.NET</label></td> </tr> <tr> <td><input id="chkInterest_1" type="checkbox" name="chkInterest$1" value="Java" /><label for="chkInterest_1">Java</label></td> </tr> <tr> <td><input id="chkInterest_2" type="checkbox" name="chkInterest$2" value="Android" /><label for="chkInterest_2">Android</label></td> </tr> <tr> <td><input id="chkInterest_3" type="checkbox" name="chkInterest$3" value="HTML5" /><label for="chkInterest_3">HTML5</label></td> </tr> <tr> <td><input id="chkInterest_4" type="checkbox" name="chkInterest$4" value="XML" /><label for="chkInterest_4">XML</label></td> </tr> <table>

jQuery 代码使用.each()方法循环遍历每个checked元素，并将其值附加到strInterest字符串中，如下所示:

var strInterest = ""; $("#<%=chkInterest.ClientID%> input:checked").each(function () { strInterest += " " + $(this).val(); });
The subscribe CheckBox control renders two sibling HTML tags: <input> and <label>, as follows:

<input id="chkSubscribe" type="checkbox" name="chkSubscribe" /><label for="chkSubscribe">Subscribe to newsletter</label>

因此，jQuery 代码使用.next().html()来确定CheckBox控件的文本值，如下所示:

var strSubscribe = ""; if ($("#<%=chkSubscribe.ClientID%>").is(":checked")) { strSubscribe = $("#<%=chkSubscribe.ClientID%>").next().html(); }

如果复选框未选中，strSubscribe为空字符串。
最后，将控件检索到的所有值附加到strDisplayMsg字符串，脚本使用 JavaScript 的window.confirm()命令向用户显示确认对话框。如果用户单击OK，表单就会被提交。点击取消将阻止表单提交:

var strDisplayMsg = "You are about to submit the following data: \r\n\r\n" + "Name: " + strName + "\r\n" + "Gender: " + strGender + "\r\n" + "Highest Education: " + strEducation + "\r\n" + "Interest Areas: " + strInterest + "\r\n" + strSubscribe + "\r\n\r\n" + "Click OK to proceed" window.confirm(strDisplayMsg);

参见 also

使用 CSS 类配方选择控件

选择一个使用 CSS 类的控件

本食谱将演示如何访问 ASP.NET 控件，如Image、Panel和BulletedList，基于分配给它们的CSSClass。本例中使用的结构如下:

构造

类型

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | .attr("name") OR``.attr("name", "value") | jQuery 方法 | 这将返回一个字符串，其中包含第一个匹配元素所需的属性值。它还可以用于将属性设置为所需的值。 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值。 | | .next() | jQuery 方法 | 这将获取元素的直接兄弟元素。 | | .show() | jQuery 方法 | 这会显示匹配的元素。 | | .toggle() | jQuery 方法 | 显示或隐藏匹配的元素。 |

准备

让我们通过访问 ASP.NET 控件使用CssClass:

To demonstrate the CSS selector in jQuery, we will build a simple application that displays a List of Questions. The answers can be seen by clicking on the respective plus + icon next to the question:

页的顶部也有一个复选框。点击此复选框，将显示所有的答案，如下图所示:
通过点击负-图标，相应的答案可以折叠。
首先，创建一个ASP.NET Web 应用项目使用空模板，且名称项目Recipe2(或任何其他合适的名称)。
添加一个Web 窗体到项目中，并添加名称其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用<script>块或ScriptManager控件将 jQuery 库包含在窗体中，如第一章，中所述。 。
在项目中创建一个images文件夹，并包含加号和减号图标的图像。
现在，拖放 ASP。 . NET 控件通过导航到工具箱|Standard控件来创建所需的表单，如上图所示。
表单的 HTML 标记如下:
添加以下 CSS 样式到页面:

怎么做……

在引用 jQuery 库之后创建一个<script>块，并添加以下代码:

<script type="text/javascript">
$(document).ready(function() {
  $(".answer").hide();
  $("#<%=chkShowAll.ClientID%>").click(function() {
    if ($("#<%=chkShowAll.ClientID%>").is(":checked")) {
      $(".answer").show();
      $(".image").attr("src", "images/minus.png");
    } else {
      $(".answer").hide();
      $(".image").attr("src", "images/plus.png");
    }
  });
  $(".image").click(function(evt) {
    $(this).next(".answer").toggle();
    var src = ($(this).attr("src") === "images/plus.png") ? "images/minus.png" : "images/plus.png";
    $(this).("src", src);
    evt.preventDefault();
  });
});
</script>

How it works…

使用CssClass选择 ASP.NET 控件可以在以下步骤中完成:

On running the application by pressing F5, all page elements with the answer CssClass are hidden by executing the following statement:

$(".answer").hide();

注意事项

注意:因此，一旦页面加载，只有问题是可见的。
当您单击页面顶部的复选框时，它的click事件将被触发。事件处理程序绑定到click事件，如下所示:
In the preceding click event handler, firstly, the status of the checkbox is determined using the checked filter. If the checkbox is checked, then the answers are shown and the plus icons are changed to minus icons:

if ($("#<%=chkShowAll.ClientID%>").is(":checked")) { $(".answer").show(); $(".image").attr("src", "images/minus.png"); }

如果复选框未选中，答案将被隐藏，减号图标将更新为加号图标:

else { $(".answer").hide(); $(".image").attr("src", "images/plus.png"); }

因此，在answer和image元素上使用 CSS 选择器，可以显示或隐藏所需的内容。
In addition to this, the user can click on the plus and minus icons to expand or collapse the answers, respectively. Hence, a click event is tied to the image elements using the CSS selector for the images, as follows:

$(".image").click(function (evt) {…});

在前面的事件处理程序中，图像后面的answer元素被切换为显示或隐藏，如下所示:

$(this).next(".answer").toggle();

最后，图像也被切换——即，使用.attr()方法，从加减或从减到加:

var src = ($(this).attr("src") === "images/plus.png") ? "images/minus.png" : "images/plus.png"; $(this).attr("src", src);

最后，为了防止图像click事件提交表单，执行evt.preventDefault()。

参见 also

根据元素在 DOM 配方中的位置选择元素

选择一个使用 HTML 标记的控件

这个配方演示了如何访问 ASP.NET 控件使用在运行时生成的相应 HTML 标记。我们将演示如何使用生成tableHTML 标记的GridView控件。 GridView的每一行呈现trHTML 标记。这个示例使用了以下结构:

构造

类型

描述

| | --- | --- | --- | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中 | | [attribute$="value"] | jQuery 选择器 | 这将选择具有指定属性的元素，以字符串"value"结尾 | | :checkbox | jQuery 选择器 | 这只从匹配的元素中选择复选框元素 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件 | | .find() | jQuery 方法 | 这将查找匹配筛选器的所有元素 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值 | | .parents() | jQuery 方法 | 这将选择 DOM 树中匹配元素的祖先 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类 |

准备

让我们选择 ASP.NET 控件使用 HTML 标记:

In this example, we will create a web page to display a List of Suppliers from the Northwind database in a GridView control, as shown in the following screenshot:
Each row in the GridView has a CheckBox control in the first column. By selecting the checkbox, the respective row is highlighted, as shown in the following screenshot:

注意事项

同样地，通过取消选中复选框，高亮显示将被删除。
要开始，创建一个ASP.NET Web 应用项目使用空模板，名称项目Recipe3(或任何其他合适的名称)。
添加一个Web 窗体到项目中，并添加名称其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用<script>块或ScriptManager控件将 jQuery 库包含在窗体中，如第一章，中所述。 。
在Design模式中打开Default.aspx，通过导航到Toolbox|Data，拖放GridView控件。
Populate the gridview with the Suppliers data from the Northwind database using LINQ by following Steps 9 to 15. If you are familiar with using LINQ, proceed to Step 16 to add the checkbox field and required columns to the gridview markup.

提示

安装北风数据库

Northwind 是一个开源数据库，可以从https://northwinddatabase.codeplex.com下载。

阅读更多关于:如何从 MSDN 页面安装示例数据库:https://msdn.microsoft.com/en-us/library/8b6y4c7s.aspx。
将App_Code文件夹添加到项目中，右键单击项目，并导航到Add|Add ASP。 |App_Code。
Right-click on the App_Code folder, and go to Add | Add New Item. From the dialog box, select LINQ to SQL Classes, and name the file Northwind.dbml, as shown in the following screenshot. Click on the Add button to proceed:
Open Northwind.dbml in the designer. Connect to the Northwind database, running on MS SQL Server using Server Explorer. Drag and drop the Suppliers table onto the designer, as shown in the following screenshot:
Now, open the Default.aspx web form in the Design mode, and click on the GridView control. A small arrow icon appears in the top-right corner of the GridView control, and when you click on it, the GridView Tasks submenu opens up, as shown in the following screenshot:
In the GridView Tasks submenu, go to Choose Data Source | . From the Data Source Configuration Wizard, select LINQ, and click on OK.
This will launch the Configure Data Source dialog box. From the drop-down menu, select the Recipe3.App_Code.NorthwindDataContext option, and click on Next.

提示

注意，如果下拉菜单中没有出现NorthwindDataContext，则将System.Data.Linq添加到web.config中的system.web/compilation/assemblies元素中，如下所示:

<system.web> <compilation debug="true"> <assemblies> <add assembly="System.Data.Linq, Version=4.0.30319.17929, Culture=neutral, PublicKeyToken=b77a5c561934e089" /> </assemblies> </compilation> </system.web>
Check the columns from the Suppliers table that need to be displayed in the GridView, or select * to retrieve all columns, and click on Finish**:
在Source模式中打开Default.aspx，按照的方法更新网格视图的标记，在第一列中添加CheckBox控件作为TemplateField。我们还将将显示限制为几个重要的列。另外，将GridView中的ID改为gvSupplierList:

<asp:GridView ID="gvSupplierList" runat="server" AutoGenerateColumns="False" DataKeyNames="SupplierID" DataSourceID="LinqDataSource1"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" InsertVisible="False" ReadOnly="True" SortExpression="SupplierID" /> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" /> <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" /> <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" /> <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" /> <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" /> </Columns> </asp:GridView>
To enable paging and sorting on the GridView (optional), from the GridView Tasks submenu, check the Enable Paging and Enable Sorting options as shown in the following screenshot:
在 web 表单的<head>元素中添加以下<style>:

<style> .highlight{ background-color:darkgrey; } </style>

由于我们使用的是集成安全，windows 帐户应该被授予访问 Northwind 数据库的权限，如下步骤所示:

In the SQL Server Object Explorer dialog box, go to Databases | Northwind | Security | Users. Right-click on Users and click on New User, as shown in the following screenshot:
This will launch the User-New dialog box. From the drop-down menu, change User type to Windows user. Go the User name option, and select the windows account that you have used to log in to the system, as shown in the following screenshot:
In the same dialog box, in the left-hand side panel, click on the Owned Schemas tab. Check db_owner, as shown in the following screenshot:
Next, in the left-hand side panel, click on the Membership tab. Check db_owner, as shown in the following screenshot:
点击OK保存。

怎么做……

在页面中包含 jQuery 库后，将以下 jQuery 代码添加到<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $("table[id$=<%=gvSupplierList.ClientID%>").find("input:checkbox").click(
    function() {
      if ($(this).is(":checked"))
        $(this).parents("tr").addClass("highlight");
      else
        $(this).parents("tr").removeClass("highlight");
    });
});
</script>

How it works…

选择 ASP。使用 HTML 标记的 NET 控件可以通过以下步骤完成:

In this example, the gridview is selected using the <table> HTML tag that it generates at runtime. Each row of the GridView control is rendered as a tr HTML tag. This can be seen by viewing the source at runtime:
由于页面上可能有多个<table>元素，所以使用id过滤表元素。一旦选择了所需的<table>元素(即GridView控件)，就使用.find("input:checkbox")选择器匹配第一列中的CheckBox控件。 click事件处理程序绑定到CheckBox控件，如下所示:
在click事件处理程序绑定到CheckBox元素之后，下一个任务是使用:checked选择器确定复选框是否被选中，如下所示:

if ($(this).is(":checked"))
如果选中了复选框，则使用.parents("tr")选择器选择其父表行。接下来，将highlightCSS 类绑定到这个表行，如下所示:
但是，如果复选框未选中，则需要删除突出显示。这可以在相应的表行上使用.removeClass()方法完成，如下所示:

参见 also

选择一个使用 ID 的控件并显示其值 recipe

根据控件的属性选择控件

在这个配方中，我们将选择 ASP.NET 控件基于它们所具有的特定属性。该演示使用了 ASP 的NavigateUrl属性.NET 超链接控件，该控件作为anchor标记的href属性呈现。使用的结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将基于其ID选择一个元素。 | | .addClass() | jQuery 选择器 | 这会将指定的 CSS 类添加到每个匹配的元素中 | | [attribute*="value"] | jQuery 选择器 | 这将选择一个具有指定属性的元素，该属性包含字符串"value" | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作 | | .focus() | jQuery 事件绑定 | 这将触发元素的focus事件，或者将事件处理程序绑定到focusJavaScript 事件 | | .removeClass() | jQuery 方法 | 这个将从每个匹配的元素中删除指定的 CSS 类 | | .toLowerCase() | JavaScript 函数 | 将字符串转换为小写字符 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值 |

准备

让我们创建一个网页，在其中我们将检索使用其属性的控件:

Consider the web page in the following screenshot:
The web page consists of a list of Hyperlink controls. The Search textbox on the top of the page allows you to search the URLs set in the NavigateUrl property of the Hyperlink controls by a keyword. If a particular keyword is present in the URL link, the corresponding link is highlighted, as shown in the following screenshot:
If another keyword is searched, a new set of links matching the new search keyword are highlighted, as follows:
首先，创建一个ASP.NET Web 应用项目使用空模板，且名称项目Recipe4(或任何其他合适的名称)。
添加一个Web 窗体到项目中，并添加名称其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用<script>块或ScriptManager控件将 jQuery 库包含在窗体中，如第一章，中所述。 。
在Design模式中打开Default.aspx，通过导航到工具箱|Standard中拖放所需的控件，创建带有以下标记的窗体:
在页面的<head>元素中，添加以下样式:

怎么做……

在包含 jQuery 库之后，在页面中以<script>块的形式包含以下 jQuery 代码:

<script type="text/javascript">
  $(document).ready(function() {
    $("table[id$=<%=gvSupplierList.ClientID%>").find("input:checkbox").click(
      function() {
        if ($(this).is(":checked"))
          $(this).parents("tr").addClass("highlight");
        else
          $(this).parents("tr").removeClass("highlight");
      });
  });
</script>

How it works…

按属性选择控件的工作方式如下:

当页面启动时，搜索文本框通过调用其focus事件来接收焦点，使用以下代码:

$("#<%=txtKeyword.ClientID%>").focus();
同时，一个事件处理程序附加到Search按钮的click事件:

$("#<%=btnSearch.ClientID %>").click(function (evt) {…}
事件处理程序从文本框中读取搜索的关键字并将其转换为小写字符串:

var strKeyword = $("#<%=txtKeyword.ClientID%>").val().toLowerCase();
在高亮显示匹配的anchor标签之前，页面上所有anchor标签的 CSS 类使用$("a")选择器重置:

$("a").removeClass("highlight");
A search by its attribute is done on all anchor tags using their href attributes. If the href attribute contains the search keyword, the link is highlighted by attaching the respective CSS class:

$('a[href*= "' + strKeyword + '"]').addClass("highlight");

最后，由于按钮click事件，evt.preventDefault()阻止页面提交。

参见 also

使用 HTML 标记选择控件

根据元素在 DOM 中的位置选择元素

这个配方演示了当您在 DOM 树中访问元素时，如何使用其相对于其父元素的位置。我们将使用 ASP.NETListBox控件用于此目的。本例中使用的结构如下:

构造

类型

描述

| | --- | --- | --- | | $("#id > *") | jQuery 选择器 | 这将选择具有指定 ID 的控件的所有后代元素。 | | $("#id :first-child") | jQuery 选择器 | 这将选择具有指定 ID 的控件的第一个子元素。 | | $("#id :last-child") | jQuery 选择器 | 这将选择具有指定 ID 的控件的最后一个子元素。 | | $("#id :lt(i)") | jQuery 选择器 | 这将选择具有指定 ID 且索引小于i的控件的所有子元素。注意，索引从 0 开始。 | | $("#id :gt(i)") | jQuery 选择器 | 这将选择具有指定 ID 且索引大于i的控件的所有子元素。注意，索引从 0 开始。 | | $("#id :nth-child(i)") | jQuery 选择器 | 这个选择具有指定 ID 且索引为i的控件的子元素。注意，第 n 个子节点的索引从 1 开始。 | | $("#id :nth-child(even)") | jQuery 选择器 | 这将选择具有指定 ID 且具有偶数索引的控件的所有子元素。 | | $("#id :nth-child(odd)") | jQuery 选择器 | 这将选择具有指定 ID 且索引为奇数的控件的所有子元素。 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中。 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 |

准备

让我们创建一个网页，根据元素的位置选择元素:

Consider the following web page that consists of a list box populated with data from the Suppliers table from the Northwind database, as follows:
There is a dropdown list at the top of the page that allows you to select items in the list box, depending on their position in the DOM tree. The dropdown list has options to select the first, last, items less than or greater than a particular index, the nth item, as well as odd or even items, as shown in the following screenshot:

注意事项

注意，我们将在这个配方中使用硬编码索引。在实际的场景中，最好提供一个文本框或一个下拉列表，让用户能够输入或选择所需的索引。
To demonstrate the working of the form, consider the scenario in which Odd Items is selected from the dropdown list. In this case, only odd indexed items from the list box are highlighted, as shown here:
首先，创建一个ASP.NET Web 应用项目使用空模板，且名称项目Recipe5(或任何其他合适的名称)。
添加一个Web 窗体到项目中，并添加名称其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用<script>块或ScriptManager控件将 jQuery 库包含在窗体中，如第一章，中所述。 。
在Design模式下打开Default.aspxweb 窗体，通过导航到工具箱|Standard，拖放ListBox控件。
按照步骤 10 到 18，使用 LINQ 使用来自 Northwind 数据库的供应商数据填充列表框。如果您熟悉使用 LINQ，请继续步骤 19。
将App_Code文件夹添加到项目中，右键单击项目并导航到添加|添加 ASP。 |App_Code。
右键单击App_Code文件夹，然后转到Add|Add New Item。在对话框中，选择LINQ to SQL Classes，并选择命名文件Northwind.dbml。
Open Northwind.dbml in the designer. Connect to the Northwind database running on MS SQL Server using Server Explorer. Drag and drop the Suppliers table on the designer, as shown here:
Now, open the Default.aspx web form in the Design mode, and click on the ListBox control. A small arrow icon appears in the top-right corner of the ListBox control, and when you click on it, the ListBox Tasks submenu opens up, as shown in the following screenshot:
From the ListBox Tasks submenu, select Choose Data Source. This launches the Data Source Configuration Wizard, as shown in the following screenshot. Select from the first drop-down menu:
This will prompt you to select Choose a Data Source Type. Select LINQ, and click on OK:
On being prompted to select Choose a Context Object, choose Recipe5.App_Code.NorthwindDataContext from the drop-down menu, and click on Next:

提示

注意，如果下拉菜单中没有出现NorthwindDataContext，将System.Data.Linq添加到web.config中的system.web/compilation/assemblies元素，如下所示:

<system.web> <compilation debug="true"> <assemblies> <add assembly="System.Data.Linq, Version=4.0.30319.17929, Culture=neutral, PublicKeyToken=b77a5c561934e089" /> </assemblies> </compilation> </system.web>
Check the SupplierID and CompanyName columns from the Suppliers table, and click on Finish:
Set the display field of the list box to CompanyName and the value field to SupplierID, as shown in the following screenshot, and click on OK:
下面的代码是完成前面的步骤后页面的完整标记:
在页面的<head>元素中，包含以下样式以突出显示所选的子项目:

怎么做……

将下面的 jQuery 代码添加到页面中包含库后的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $("#<%=btnSelect.ClientID%>").click(function(evt) {
    $("#<%=lstSuppliers.ClientID%> > *").removeClass("highlight");
    var iType = $("#<%=ddlType.ClientID%>").val();
    switch (iType) {
      case "1":
        $("#<%=lstSuppliers.ClientID%> :first-child").addClass("highlight");
        break;
      case "2":
        $("#<%=lstSuppliers.ClientID%> :last-child").addClass("highlight");
        break;
      case "3":
        $("#<%=lstSuppliers.ClientID%> :lt(4)").addClass("highlight");
        break;
      case "4":
        $("#<%=lstSuppliers.ClientID%> :gt(7)").addClass("highlight");
        break;
      case "5":
        $("#<%=lstSuppliers.ClientID%> :nth-child(5)").addClass("highlight");
        break;
      case "6":
        $("#<%=lstSuppliers.ClientID%> :nth-child(even)").addClass("highlight");
        break;
      case "7":
        $("#<%=lstSuppliers.ClientID%> :nth-child(odd)").addClass("highlight");
        break;
      default:
        alert("Please select the type of element");
    }
    evt.preventDefault();
  });
});
</script>

How it works…

web 页面工作原理如下:

Run the application and right-click on the page in the browser to go to View Source. At runtime, the ListBox control will be rendered as the select and option HTML elements, as shown here:
The entire action of the page lies in the event handler for the click event of the Select Items button:

$("#<%=btnSelect.ClientID%>").click(function (evt) {…});

当您单击此按钮时，首先，ListBox控件(option元素)的所有子元素的 CSS 样式将使用removeClass函数重置:

$("#<%=lstSuppliers.ClientID%> > *").removeClass("highlight");
检索DropDownList控件的选定值以查找所需的选择类型:

var iType = $("#<%=ddlType.ClientID%>").val();
switch-case 语句帮助您根据下拉列表中所选的项目选择子元素的不同选择:
1. 如果在下拉列表中选择的项目是First，那么第一个选项元素将使用以下代码高亮显示:
  
  $("#<%=lstSuppliers.ClientID%> :first-child").addClass("highlight");
2. 如果选中的项目是最后，最后一个选项元素将使用以下代码突出显示:
  
  $("#<%=lstSuppliers.ClientID%> :last-child").addClass("highlight");
3. If the item selected is Less Than, all option elements that are less than index 4—that is, items with indices 0 to 3, are highlighted using the following code:
  
  $("#<%=lstSuppliers.ClientID%> :lt(4)").addClass("highlight");
  
  注意事项
  
  为了简单起见，这里对索引进行了硬编码。
4. If the item selected is Greater Than, all option elements that are greater than index 7—that is, items excluding those with indices 0 to 7, are highlighted using this code:
  
  $("#<%=lstSuppliers.ClientID%> :gt(7)").addClass("highlight");
  
  注意事项
  
  为了简单起见，这里对索引进行了硬编码。
5. If the item selected is Nth Item, the fifth option element is highlighted using the following code:
  
  $("#<%=lstSuppliers.ClientID%> :nth-child(5)").addClass("highlight");
  
  注意事项
  
  为了简单起见，这里对索引进行了硬编码。
6. 如果选中的项目是偶数项目，则所有具有偶数索引的选项元素将使用以下代码高亮显示:
  
  $("#<%=lstSuppliers.ClientID%> :nth-child(even)").addClass("highlight");
7. 如果选中的项目是奇数项，所有带有奇数索引的选项元素将使用以下代码突出显示:
  
  $("#<%=lstSuppliers.ClientID%> :nth-child(odd)").addClass("highlight");
最后，由于按钮click事件，执行evt.preventDefault()将阻止页面的提交。

参见 also

选择一个使用 ID 的控件并显示其值 recipe

启用/禁用 web 窗体上的控件

这个配方演示了如何在 web 窗体上动态启用/禁用控件，以响应窗体上其他控件触发的事件。本例中使用的结构如下:

构造

类型

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将基于其ID选择一个元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | :checked | jQuery 选择器 | 这将选择选中的输入元素 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件 | | .find() | jQuery 方法 | 这将查找匹配筛选器的所有元素 | | .is() | jQuery 方法 | 如果匹配的元素满足给定条件，则返回一个布尔值 | | prop(propertyName) or``.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值 |

准备

让我们创建一个作业应用表单来显示 ASP 的启用和禁用.NET 控件:

We will build a simple job application form for a company, as shown here:
Clicking on certain controls disables other controls on the form, as shown in the following screenshot:
首先，创建一个ASP.NET Web 应用项目使用空模板，且名称项目Recipe6(或任何其他合适的名称)。
添加一个Web 表单到项目中，并将命名其Default.aspx。
创建一个Scripts文件夹，并添加 jQuery 文件(库的调试和发布版本)。
使用或者<script>块或者ScriptManager控件的形式包含 jQuery 库，如第一章，中所述.NET。
打开Default.aspx的 web 表单设计模式,和所需的控件拖放到导航到工具箱|标准创建 web 表单,如前面的屏幕截图所示。网页表单的标记如下:

<table> <tr> <td> <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> </td> <td> <asp:TextBox ID="txtName" runat="server" Width="220px"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblPermAddr" runat="server" Text="Permanent Address"></asp:Label> </td> <td> <asp:TextBox ID="txtPermAddr" runat="server" Width="220px" TextMode="MultiLine"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblMailingAddr" runat="server" Text="Mailing Address" /> </td> <td> <asp:CheckBox ID="chkMailingAddr" runat="server" Text="Same as above" /> <br /> <asp:TextBox ID="txtMailingAddr" runat="server" Width="220px" TextMode="MultiLine"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblTravel" runat="server" Text="Willing to travel?" /> </td> <td> <asp:RadioButtonList ID="rdTravel" runat="server"> <asp:ListItem Text="Yes" Value="Yes"></asp:ListItem> <asp:ListItem Text="No" Value="No"></asp:ListItem> </asp:RadioButtonList> <br /> <asp:DropDownList ID="ddlTravel" runat="server"> <asp:ListItem Text="10%"></asp:ListItem> <asp:ListItem Text="25%"></asp:ListItem> <asp:ListItem Text="50%"></asp:ListItem> <asp:ListItem Text="75%"></asp:ListItem> </asp:DropDownList> <br /> </td> </tr> <tr> <td> <asp:Label ID="lblMode" runat="server" Text="Mode of Contact" /> </td> <td> <asp:CheckBox ID="chkEmail" runat="server" Text="Email" Value="Email" Checked="true" /> <asp:CheckBox ID="chkPhone" runat="server" Text="Phone" Value="Phone" Checked="true" /> </td> </tr> <tr> <td> <asp:Label ID="lblEmail" runat="server" Text="Email" /> </td> <td> <asp:TextBox ID="txtEmail" runat="server" Width="220px"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblPhone" runat="server" Text="Phone" /> </td> <td> <asp:TextBox ID="txtPhone" runat="server" Width="220px"></asp:TextBox> </td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <asp:Button ID="btnReset" runat="server" Text="Reset" /> </td> </tr> </table>

怎么做……

在页面中包含库后的<script>块中包含和的 jQuery 代码:

<script type="text/javascript">
$(document).ready(function() {
  $("#<%=chkMailingAddr.ClientID%>").click(function() {
    if ($(this).is(":checked"))
      $("#<%=txtMailingAddr.ClientID%>").prop("disabled", true);
    else
      $("#<%=txtMailingAddr.ClientID%>").prop("disabled", false);
  });
  $("#<%=rdTravel.ClientID%>").click(function() {
    var strTravel = $(this).find(":checked").val();
    if (strTravel == "No")
      $("#<%=ddlTravel.ClientID%>").prop("disabled", true);
    else
      $("#<%=ddlTravel.ClientID%>").prop("disabled", false);
  });
  $("#<%=chkEmail.ClientID%>").click(function() {
    if (!$(this).is(":checked"))
      $("#<%=txtEmail.ClientID%>").prop("disabled", true);
    else
      $("#<%=txtEmail.ClientID%>").prop("disabled", false);
  });
  $("#<%=chkPhone.ClientID%>").click(function() {
    if (!$(this).is(":checked"))
      $("#<%=txtPhone.ClientID%>").prop("disabled", true);
    else
      $("#<%=txtPhone.ClientID%>").prop("disabled", false);
  });
});
</script>

How it works…

网页的工作原理如下:

Save the application and launch it using F5. In the Mailing Address section, on checking the Same as above field, the Mailing Address textbox is disabled as follows:

注意事项

类似地，取消选中该字段时，将启用邮寄地址文本框。
这是通过为CheckBox控件的click事件编写事件处理程序实现的。当复选框被选中或未选中时，将触发click事件:
In the preceding event handler, firstly, it is determined whether the field is checked using the following code:

if ($(this).is(":checked"))

如果上述条件为true，为了禁用邮寄地址文本框，使用prop()方法为其disabled属性赋值true，如下所示:

$("#<%=txtMailingAddr.ClientID%>").prop("disabled", true);

类似地，如果复选框未选中，则通过为其disabled属性分配false值来启用邮寄地址文本框，如下所示:

$("#<%=txtMailingAddr.ClientID%>").prop("disabled", false);
For the Willing to Travel radio button, when the No option is selected, the dropdown list below the field is disabled, as shown in the following figure:
这可以通过将事件处理程序附加到RadioButtonList:

$("#<%=rdTravel.ClientID%>").click(function () {…});

的click事件来实现。 6. When the preceding event handler is invoked, the selected value is first determined using this code:

var strTravel = $(this).find(":checked").val();

如果选择的值为不为，则通过将true值附加到其disabled属性上禁用下拉列表，如下所示:

if (strTravel == "No") $("#<%=ddlTravel.ClientID%>").prop("disabled", true);

否则，通过在其disabled属性上附加false值来启用下拉列表，如下所示:

else $("#<%=ddlTravel.ClientID%>").prop("disabled", false);
When the two checkbox controls in the Mode of Contact field are unchecked, the corresponding textbox field is disabled, that is, unchecking the Email checkbox disables the Email textbox. Similarly, unchecking the Phone checkbox disables the Phone textbox as follows:
这可以通过将各自的事件处理程序附加到Email和Phone复选框控件上，如下所示:
In the preceding event handlers, it is first required to determine whether the respective CheckBox control is unchecked using the following code:

if (!$(this).is(":checked"))

如果相应的复选框未选中，则通过将true值附加到TextBox控件的disabled属性来禁用TextBox控件，如下所示:
- Email字段:
  
  $("#<%=txtEmail.ClientID%>").prop("disabled", true);
- Phone字段:
  
  $("#<%=txtPhone.ClientID%>").prop("disabled", true);
否则，通过将false值附加到disabled属性来启用相应的TextBox控件，如下所示:
- Email字段:
  
  $("#<%=txtEmail.ClientID%>").prop("disabled", false);
- Phone字段:
  
  $("#<%=txtPhone.ClientID%>").prop("disabled", false);

参见 also

通过属性配方选择控件

在 MVC 应用中使用选择器

所以到目前为止，所有的菜谱都是基于使用选择器和 ASP。净 web 表单。接下来，我们介绍一个示例来演示在 ASP 中使用选择器。净 MVC 应用。本例中使用的结构如下:

构造

类型

描述

| | --- | --- | --- | | $(#identifier) | jQuery 选择器 | 这将基于其ID选择一个元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | :checked | jQuery 选择器 | 这将选择选中的输入元素 | | .click() | jQuery 事件绑定 | 这将处理程序绑定到元素的click事件 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 CSS 属性，或者为每个匹配元素设置一个或多个 CSS 属性 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作 | | .html() | jQuery 方法 | 这将返回第一个匹配元素的 HTML 内容，或者设置每个匹配元素的 HTML 内容 | | .prop(propertyName) or``.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值 | | :radio | jQuery 选择器 | 这将选择 radio 类型的输入元素 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值 |

准备

要在 MVC 应用中使用选择器，请遵循以下步骤:

Let's create a simple MVC application for a Feedback Form to be completed by a user, as shown in the following screenshot:
When you click on the Submit button, the validation of the form fields is done using jQuery, and the page will throw an error message giving the details of the fields that are required to be completed, as shown here:
If all the fields are completed, the validation will go through, and the user will see a confirmation screen, as shown here:
要开始，在 Visual Studio 中通过导航到文件|new|project创建一个新项目。从对话框中选择ASP.NET Web 应用，并键入Recipe7(或任何其他合适的名称)作为应用的名称。
From the following dialog box, select the Empty template and the MVC checkbox, as shown in the following screenshot, and click on the OK button:
We need to add a model to the feedback form, two views (corresponding to the two screens in the application) and a controller. Let's start by adding a model by right-clicking on the Models folder in Solution Explorer and navigating to New | Class. name the class FeedbackForm.vb (VB) or FeedbackForm.cs (C#), and add the following properties that correspond to the fields on the feedback form:

对于 VB，代码如下:

Public Class FeedbackForm Public Property Name As String Public Property Email As String Public Property ImprovementArea As String Public Property Rating As String End Class

对于 c#，代码如下:

public class FeedbackForm { public string Name { get; set; } public string Email { get; set; } public string ImprovementArea { get; set; } public string Rating { get; set; } }
Now, add a controller by right-clicking on the Controllers folder in Solution Explorer and navigating to New | Controller. From the dialog box, select MVC 5 Controller – Empty, and click on the Add button:
In the following dialog box, enter DefaultController in the Controller name field, and click on the Add button:
Add the following Action method in DefaultController.vb (VB) or DefaultController.cs (C#):

对于 VB，代码如下:

Function Index() As ActionResult Return View() End Function Function HandleForm(ByVal formData As FeedbackForm) As ActionResult ViewData("Name") = formData.Name ViewData("Email") = formData.Email ViewData("ImprovementArea") = formData.ImprovementArea ViewData("Rating") = formData.Rating Return View() End Function

对于 c#，代码如下:

public ActionResult Index() { return View(); } public ActionResult HandleForm(FeedbackForm formData) { ViewData["Name"] = formData.Name; ViewData["Email"] = formData.Email; ViewData["ImprovementArea"] = formData.ImprovementArea; ViewData["Rating"] = formData.Rating; return View(); }
To add a view, right-click by navigating to the Views | Default folder in Solution Explorer, and go to Add | View. In the dialog box that is launched, enter Index for the View name, and click on the Add button:
类似地，通过导航到视图|默认文件夹添加一个视图，并将视图命名为HandleForm。这个视图是确认页面，一旦用户提交了反馈表单，就会启动这个页面。
在项目中创建一个Scripts文件夹，并在此文件夹中包含 jQuery 库文件。
在 Index 视图中使用绑定方法将 jQuery 库包含进来，详见第一章，.NET、或使用<script>标记。
Add a <form> element to the Index view using HTML extensions with the Razor syntax, as follows:

对于 VB，代码如下:

@Imports System.Web.Optimization @Code ViewData("Title") = "Feedback Form" End Code @Scripts.Render("~/Scripts/jquery") <h2>Feedback Form</h2> <table> @Using Html.BeginForm("HandleForm", "Default") @ <text> <tr> <td>@Html.Label("Name")</td> <td>@Html.TextBox("Name")</td> </tr> <tr> <td>@Html.Label("Email")</td> <td>@Html.TextBox("Email")</td> </tr> <tr> <td>@Html.Label("What can we do better?")</td> <td>@Html.TextArea("ImprovementArea", New With {.cols = 50, .rows = 5})</td> </tr> <tr> <td>@Html.Label("Please rate our service")</td> <td> @Html.RadioButton("Rating", "5")<label> Very Good</label> @Html.RadioButton("Rating", "4")<label> Good</label> @Html.RadioButton("Rating", "3")<label> Average</label> @Html.RadioButton("Rating", "2")<label> Bad</label> @Html.RadioButton("Rating", "1")<label> Very Bad</label> </td> </tr> <tr> <td colspan = "2"> <input id="btnSubmit" type="submit" value="Submit" /></td> </tr> <tr> <td colspan = "2" > <div id="ErrorMessage"></div> </td> </tr> </text> End Using </table>

对于 c#，代码如下:

@using System.Web.Optimization; @{ ViewBag.Title = "Feedback Form"; } @Scripts.Render("~/Scripts/jquery") <h2>Feedback Form</h2> <table> @using (Html.BeginForm("HandleForm","Default")) { <tr> <td>@Html.Label("Name")</td> <td>@Html.TextBox("Name")</td> </tr> <tr> <td>@Html.Label("Email")</td> <td>@Html.TextBox("Email")</td> </tr> <tr> <td>@Html.Label("What can we do better?")</td> <td>@Html.TextArea("ImprovementArea",new { @cols=50, @rows=5}) </td> </tr> <tr> <td>@Html.Label("Please rate our service")</td> <td>@Html.RadioButton("Rating", "5") <label> Very Good</label> @Html.RadioButton("Rating", "4") <label> Good</label> @Html.RadioButton("Rating", "3") <label> Average</label> @Html.RadioButton("Rating", "2") <label> Bad</label> @Html.RadioButton("Rating", "1")<label> Very Bad</label> </td> </tr> <tr> <td colspan="2"><input id="btnSubmit" type="submit" value="Submit" /></td> </tr> <tr> <td colspan="2"> <div id="ErrorMessage"></div> </td> </tr> } </table>
Add the following markup to the HandleForm view:

对于 VB，代码如下:

@Code ViewData("Title") = "Feedback Submission" End Code <h2>Thank you for your Feedback!</h2> <p>We have received the following:</p> <p><label>Name: </label>@Html.Encode(ViewData("Name"))</p> <p><label>Email: </label>@Html.Encode(ViewData("Email"))</p> <p> <label>What we can do better?</label><br /> @Html.Encode(ViewData("ImprovementArea")) </p> <p> <label>Please rate our service: </label> @If ViewData("Rating").Equals("5") Then @:<label>Very Good</label> ElseIf ViewData("Rating").Equals("4") @:<label>Good</label> ElseIf ViewData("Rating").Equals("3") @:<label>Average</label> ElseIf ViewData("Rating").Equals("2") @: <label>Bad</label> ElseIf ViewData("Rating").Equals("1") @: <label>Very Bad</label> End If </p> <p> Thank you For taking the time To write To us.</p>

对于 c#，代码如下:

@{ ViewBag.Title = "Feedback Submission"; } <h2>Thank you for your Feedback!</h2> <p>We have received the following:</p> <p><label>Name: </label>@Html.Encode(ViewData["Name"])</p> <p><label>Email: </label>@Html.Encode(ViewData["Email"])</p> <p><label>What we can do better?</label><br/> @Html.Encode(ViewData["ImprovementArea"]) </p> <p><label>Please rate our service: </label> @if (ViewData["Rating"].Equals("5")) { <label>Very Good</label> } else if (ViewData["Rating"].Equals("4")) { <label>Good</label> } else if (ViewData["Rating"].Equals("3")) { <label>Average</label> } else if (ViewData["Rating"].Equals("2")){ <label>Bad</label> } else if (ViewData["Rating"].Equals("1")){ <label>Very Bad</label> } </p> <p> Thank you for taking the time to write to us.</p>

怎么做……

在页面中包含库后，在<script>块中包含的代码:

<script type="text/javascript">
  $(document).ready(function () {
    $("#btnSubmit").click(function (evt) {
      var strMessage = "";
      if ($("#Name").val() == "")
        strMessage = strMessage + "Name<br/>";
      if ($("#Email").val() == "")
        strMessage = strMessage + "Email<br/>";
      if ($("#ImprovementArea").val() == "")
        strMessage = strMessage + "What can we do better?<br/>";
      var bChecked = false;
      $(":radio").each(function () {
        if ($(this).prop("checked")){
          bChecked = true;
        }
      });
      if (!bChecked)
        strMessage = strMessage + "Please rate our service<br/>";
      if (strMessage != "") {
        strMessage = "<br/>Please complete the following fields: <br/><br/>" + strMessage;
        $("#ErrorMessage").html(strMessage);
        $("#ErrorMessage").css("color", "#FF0000");
        evt.preventDefault();
      }
    });
  });
</script>

How it works…

MVC 中反馈表单的工作原理如下:

要运行应用，右键单击Solution Explorer中的Index视图，然后选择view in Browser。结果，反馈表单加载到浏览器窗口中。
当用户单击Submit按钮时，将执行按钮click的事件处理程序:

$("#btnSubmit").click(function (evt) {…});
jQuery 代码验证表单中的每个字段。一个strMessage字符串变量跟踪所有未填充的字段:

var strMessage = ""; if ($("#Name").val() == "") strMessage = strMessage + "Name<br/>"; if ($("#Email").val() == "") strMessage = strMessage + "Email<br/>"; if ($("#ImprovementArea").val() == "") strMessage = strMessage + "What can we do better?<br/>";
要测试单选按钮列表是否被选中，我们循环遍历每个单选按钮，并使用.prop()方法来确定选中的属性是否为true:

var bChecked = false; $(":radio").each(function() { if ($(this).prop("checked")) { bChecked = true; } }); if (!bChecked) strMessage = strMessage + "Please rate our service<br/>";
最后，如果在页面上发现验证错误—也就是说，如果strMessage非空，错误将显示在表单末尾的 div 区域中。使用.css()方法将错误消息的字体颜色更改为红色:

if (strMessage != "") { strMessage = "<br/>Please complete the following fields: <br/><br/>" + strMessage; $("#ErrorMessage").html(strMessage); $("#ErrorMessage").css("color", "#FF0000"); evt.preventDefault(); }
为了防止在出现验证错误时提交表单，使用了.preventDefault()方法。

参见 also

选择一个使用 ID 的控件并显示其值 recipe**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31272.html

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET jQuery 秘籍》

ASPDotNet 二、使用 jQuery 选择器与 ASP.NET 控制器

二、使用 jQuery 选择器与 ASP.NET 控制器

注意事项

简介

注意事项

使用 ID 选择控件并显示其值

准备

怎么做……

注意事项

How it works…

注意事项

注意事项

参见 also

选择一个使用 CSS 类的控件

准备

怎么做……

How it works…

注意事项

参见 also

选择一个使用 HTML 标记的控件

准备

注意事项

提示

提示

怎么做……

How it works…

参见 also

根据控件的属性选择控件

准备

怎么做……

How it works…

参见 also

根据元素在 DOM 中的位置选择元素

准备

注意事项

提示

怎么做……

How it works…

注意事项

注意事项

注意事项

参见 also

启用/禁用 web 窗体上的控件

准备

怎么做……

How it works…

注意事项

参见 also

在 MVC 应用中使用选择器

准备

怎么做……

How it works…

参见 also

留言

联系客服

ASPDotNet 查看更多书籍