使用 JavaScript 和 CSS 增强您的 ASP.NET DataGrid

• 下载演示项目 - 20.4 KB

引言

本文将向您展示如何使用 ASP.NET DataGrid 实现客户端 JavaScript 功能和层叠样式表。

背景

Visual Studio .NET 为程序员提供了 ASP.NET DataGrid 这个强大的控件。起初，在使用了 Windows Forms DataGrid 一段时间后，我对 Web 版本并没有留下深刻的印象。然而，经过一段时间的使用，ASP.NET DataGrid 被证明是一个非常有效的展示工具。在本文中，我将向您展示如何为您的 ASP.NET DataGrid 添加更多功能。

使用代码

对于那些正在寻找代码中 AJAX 用法示例的人来说，这里不是。我将在（不久的将来）发布一篇关于将 AJAX 实现到您的 DataGrids 中的文章。本文仅涵盖如何为 ASP.NET DataGrid 中的事件添加 JavaScript 功能的内部工作原理。

设置项目

我将向您展示一种非常简单的方法，因为，像许多程序员一样，我比较“懒”。我将向您展示如何使用一个事件（在 C# 端）和大约三个函数（在 JavaScript 端）为 DataGrid 添加各种炫酷的 UI 功能。如果您想从本文中获得全部收益，您应该对层叠样式表（CSS）有一些基本的了解，因为这将是我们追求的许多 UI 效果的基础。

请创建一个新的 ASP.NET Web 应用程序，并将其命名为 JavaScriptDatagrid。按照下面的解决方案图所示创建所需的文件夹。您会注意到我创建了两个文件夹：/css 和 /scripts。对于这个例子，您只需要一个包含 CSS 文件的 /css 文件夹。/scripts 文件夹将随下载的解决方案一起提供，并包含解决方案中使用的所有 JavaScript，以防您和我一样，不喜欢将所有函数都放在 HTML 文档的 head 中。

设计页面

CSS

在我的解决方案中，我只添加了一个简单的 HTML 表格，并将一个 ASP.NET DataGrid 控件拖到上面，然后添加了一个 PushButton 列。我在代码中提供了一个通用的网格填充方法（这样我们就有一些样本数据可供使用了），我这里就不包含了。您需要将以下 CSS 类添加到您的空白样式表中

.button_down
{
    color: Red;
    border: inset 2px;
}

.button_up
{
    color: Black;
    border: outset 2px;
}

.alt_row_highlight
{
    background-color: Yellow;
}

.alt_row_nohighlight
{
    background-color: White;
}

.row_highlight
{
    background-color: Cyan;
}

.row_nohighlight
{
    background-color: White;
}

JavaScript

设置好之后，您还需要将以下四个 JavaScript 函数添加到页面的 HTML 视图中（或您的外部调用的 JavaScript 文件中）

此函数将创建一个客户端 JavaScript 确认对话框

function showConfirm()
{
    var answer = confirm ("You can use this to confirm an action, " + 
                 "such as a deletion or an update. It's important " + 
                 "to note that if you click Cancel, the page will not post back.")
    if (answer)
        return true;
    else
        return false;
}

此函数会弹出一个简单的 JavaScript 警告框

function showAlert(strText)
{
    alert("You entered: [" + strText + "] It will be added " + 
          "to the textbox on this page when you click OK.");
}

此函数将打开一个 JavaScript 提示框，允许用户输入数据

function promptUser()
{
    var answer = prompt("Enter some data to display in the label:","")
    showAlert(answer);
    document.getElementById('txtInfo').value = answer;
}

此函数将更改对象上的 CSS 类

function classChange(styleChange,item) 
{
    item.className = styleChange;
}

实现

现在我们已经在页面上有了 JavaScript 函数，是时候开始将功能实现到我们的 DataGrid 中了。为您的 DataGrid 创建一个 ItemCreated 事件。由于我的 DataGrid 名为 dgJSTest，我将提供下面的函数

private void dgJSTest_ItemCreated(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    switch (e.Item.ItemType)
    {
        case ListItemType.AlternatingItem:
        {
            Button btn = (Button)e.Item.Cells[0].Controls[0];
            //Apply a click event to show a javascript prompt

            btn.Attributes.Add("onclick", "promptUser();");
            btn.Text = "Prompt";
            btn.Width = 100;
            //Apply button mouseovers

            btn.Attributes.Add("onmouseover", "classChange('button_down',this);");
            btn.Attributes.Add("onmouseout", "classChange('button_up',this);");
            //Apply row mouseovers

            e.Item.Attributes.Add("onmouseover", "classChange('alt_row_highlight',this);");
            e.Item.Attributes.Add("onmouseout", "classChange('alt_row_nohighlight',this);");
            break;
        }
        case ListItemType.Item:
        {
            Button btn = (Button)e.Item.Cells[0].Controls[0];
            //Apply a click event to show a confirm dialog

            btn.Attributes.Add("onclick", "return showConfirm('Are you sure' + 
                               ' you want to click this button?');");
            btn.Text = "Confirm";
            btn.Width = 100;
            //Apply mouseovers

            btn.Attributes.Add("onmouseover", "classChange('button_down',this);");
            btn.Attributes.Add("onmouseout", "classChange('button_up',this);");
            //Apply row mouseovers

            e.Item.Attributes.Add("onmouseover", "classChange('row_highlight',this);");
            e.Item.Attributes.Add("onmouseout", "classChange('row_nohighlight',this);");
            break;
        }
    }
}

我们在一个函数中做了几件事情。首先，当 ItemCreated 委托触发时，我们确定项的类型。ItemType 来自 ListItemType 枚举，它们很容易理解。在此示例中，我使用 Item 和 AlternatingItem 来说明效果。我们的第一步是定位我们添加到 DataGrid 的按钮（列）。一旦我们将此控件强制转换为 Button 类型（您可以用同样的方式使用添加到 DataGrid 的几乎任何控件），我们将把我们的功能应用于 OnClick、OnMouseOver 和 OnMouseOut 事件。您会看到我们还在运行时设置了按钮的一些属性。我们的主要功能来自于每个对象的 Attributes.Add() 方法。它允许我们在运行时将 JavaScript 事件处理程序添加到每个控件。从那里开始，我们所做的只是调用我们的 JavaScript 函数。真的就是这么简单！我在下面附上了一张截图（截图下方有一些值得关注的点）

关注点

在示例中，我还演示了如何将 JavaScript 提示框的结果添加到页面上的文本框控件。这也可以通过隐藏输入控件有效地完成。您可以轻松地将 JavaScript 提示框的结果响应输出到一个隐藏的输入控件，该输入控件设置为 runat=server，然后在您的 C# 后台代码中访问该输入的值。最小化回发会使用户访问您网站的体验更加愉快。

值得关注的一个元素是样式表中的 background-image。您可以使用以下 CSS 为您的鼠标悬停效果提供一些非常炫酷的效果

.row_highlight
{
    background-image: url(../img/bg_in.gif);
    background-repeat: repeat-x;
}

.row_nohighlight
{
    background-image: url(../img/bg_out.gif);
    background-repeat: repeat-x;
}

您可以使用上面的图像（或创建自己的图像）为您的 DataGrid 制作一个非常炫酷的鼠标悬停效果。如果您决定使用图像，您需要确保您的 DataGrid 行的高度不超过图像的高度（在本例中为 20px），否则会产生不美观的效果。

最后但同样重要的是，我还随下载文件附带了一个示例 JavaScript 函数，该函数显示了如何在不使用任何 C# 后台代码的情况下应用行高亮效果。这适用于任何想要在标准 HTML 页面中使用此功能的人（是的，它适用于标准 HTML 表格，因为 DataGrid 的渲染方式几乎与标准 HTML 表格一样，只是有一些区别）。