jQuery 在 ASP.NET 中：第二部分 - GridView

• 下载源文件 - 143 KB

引言

jQuery 在 Web 开发中已经变得非常流行。在我上一篇关于《ASP.NET 入门 jQuery》的文章中，我们开始探索 jQuery 方法与 ASP.NET 常用控件的结合。现在，我们将进一步深入探讨 jQuery 在 ASP.NET 网站中的应用。

背景

我们已经探索了使用 jQuery 处理 ASP.NET 控件时遇到的最常见任务。现在我们将讨论

• 创建“返回顶部”链接
• 鼠标悬停时高亮显示 `GridView` 的行或单元格
• 鼠标单击时删除 `GridView` 的行
• 鼠标单击时删除 `GridView` 的列
• 多行文本框的字符数限制验证

请注意，这里我们只讨论 jQuery 的代码片段，并假设相应的 ASP.NET 控件已放置在网页上。随着我们进一步深入，您会更加清晰。我们讨论的代码片段将放置在 jQuery 所需的脚本段中（现在这似乎已成为大多数开发者的惯例），例如：

<script type="text/javascript"?
     $(document).ready(function () {
         
         // our jQuery code will goes here...

     });
</script>

创建“返回顶部”链接

在许多网站上，我们都能看到一个“返回顶部”的超链接。让我们用 jQuery 的帮助在我们的网页上实现它。

$(".backtotoplink").attr("innerHTML", "Back to Top");
$(".backtotoplink").attr("title", "Back to Top");
$(".backtotoplink").attr("href", "#Top");

假设：您在网页上放置了大量的 HTML 内容，并在每个块的末尾放置了一个带有 `backtotoplink` CSS 类的超链接，我们将其定义为：

.backtotoplink
{
    color: Blue;
    cursor: hand;
}

• `$(".backtotoplink").attr("innerHTML", "Back to Top");` 选择具有 `backtotoplink` CSS 类的超链接，并通过设置其 `innerHTML` 属性，将“Back to Top”文本作为其内容。
• `$(".backtotoplink").attr("title", "Back to Top");` 在 `title` 属性中设置“Back to Top”文本。
• `$(".backtotoplink").attr("href", "#Top");` 为显示“Back to Top”文本的超链接设置 `#Top` 锚点目标。

高亮显示 GridView 的行或单元格上的鼠标悬停

`GridView` 是开发人员因其不同功能而频繁使用的控件。`GridView` 在 HTML 中被渲染为 `table`、`tr` 和 `td` 标签的树状结构。我们通过操作这些 HTML 标签来构建一个具有吸引力且能响应鼠标事件的 `GridView`。

$("# ?%=GridView1.ClientID% ? td").hover(
function () {
    $(this).addClass("highlight");
},
function () {
    $(this).removeClass("highlight");
});

假设：您已经在窗体上放置了一个 ID 为 `GridView1` 的 `GridView` 控件。并且在某处定义了一个 CSS 类

.highlight
{
    background-color: #34FF6D;
}

• `$("# ?%=GridView1.ClientID% ? tr").hover() ` 为 `GridView` 控件附加了鼠标 `hover` 事件，请注意 jQuery 的 `hover` 方法包含两个函数参数，分别用于 `mouseover` 和 `mouseleave`。在 `GridView1.ClientID` 之后，我们放置 `tr` 来只选择行（您可以将其替换为 `td` 来对单个单元格而不是行实现相同的功能）。
• `$(this).addClass("highlight");`：在 `mouseover` 事件函数中，我们将 `highlight` 类添加到当前行（如果您在 jQuery 选择器中使用 `td`，则为单元格）。
• `$(this).removeClass("highlight");`：在 `mouseleave` 事件函数中，我们从当前行（如果您指定了，则为单元格）移除 `highlight` 类。

鼠标单击时删除 GridView 的行

现在捕获行的点击事件（`tr`），并删除其所有单元格（`td`）以及自身。

$(("#?%=GridView1.ClientID %? tr(").click(function () {
    $(this).find(("td(").each(function () {
        $(this).remove();// remove td
    });
    $(this).remove();// remove tr
});

假设：您已经在窗体上放置了一个 ID 为 `GridView1` 的 `GridView` 控件。

• 为每一行附加点击事件。
• 在点击事件内部，遍历每个单元格（`ts`）并将其删除。
• 删除行（`tr`）本身。

鼠标单击时删除 GridView 的列

现在捕获列的点击事件（`th`），并删除其所有单元格（`td`）以及自身。我们只为 `th` 处理事件，所以只有当您点击列标题时才会生效。

$("#?%=GridView1.ClientID %? th").click(function () {
    var count = $(this).closest("th").prevAll("th").length;
    $(this).parents("#?%=GridView1.ClientID %?").find("tr").each(function () {
        $(this).find("td:eq(" + count + ")").remove();
        $(this).find("th:eq(" + count + ")").remove();
    });
});

假设：您已经在窗体上放置了一个 ID 为 `GridView1` 的 `GridView` 控件。

• 为列标题（`th`）附加点击事件。
• `.closest()` 从当前元素开始，向上搜索 DOM 树，直到找到匹配的元素。
• `.prevAll()` 找到当前元素在 DOM 树中的所有前驱元素。将所有找到的元素个数存储在变量 `count` 中。
• 遍历 `GridView` 中的每一行（`tr`）。
• 删除与找到的 `count` 匹配的 `td`。
• 同时删除与找到的 `count` 匹配的标题单元格（`th`）。

多行文本框的字符数限制验证

当您在 ASP.NET 中使用多行文本框时，有时需要限制输入的字符数。在此示例中，我们将文本框限制为接受 5 到 100 个字符。

var minCount = 5;
var maxCount = 100;
$("#?%=txtComments.ClientID%?").bind("cut copy paste", function (e) {
    e.preventDefault();
});

$("#?%=txtComments.ClientID%?").keypress(function (e) {
    var strCount = $("#?%=txtComments.ClientID%?").val().length;
    $("#?%=txtNumber.ClientID%?").val(strCount);
    if ((strCount ? minCount) || (strCount ? maxCount)) {
        $("#message").text("Please enter characters in the range 5 - 100");

        if (strCount ? maxCount) {
            e.preventDefault();
        }
    }
    else {
        $("#message").text("");
    }
});

假设：您放置了一个 ID 为 `txtComments` 的评论文本框控件，以及另一个 ID 为 `txtNumber` 的文本框，用于显示输入的字符数。

• 为文本框的剪切/复制/粘贴操作绑定事件处理程序，并禁用这些操作，以便我们可以捕获按键事件以更新字符数。
• 将 `txtComments` 值的长度存储在变量 `strCount` 中。
• 将此计数显示在 `txtNumber` 文本中。
• 检查 `strCount` 是否小于 `minCount` 或大于 `maxCount`，然后向用户显示一条消息，提示他们在正确范围内输入字符。
• `e.preventDefault()`，最后禁用按键事件的默认行为，以进一步接受任何输入字符。

参考文献

Sonal Aneel Allana 著《ASP.NET jQuery 食谱》

关注点

我们通过捕获鼠标事件，在运行时对 `GridView` 控件做了一些有趣的事情。然后，我们限制评论文本框接受预定义的字符数，并通知用户在有效范围内输入。当然，所有这些都可以用传统的 JavaScript 技术完成，但您可以看到借助 jQuery 变得多么容易。