现在的位置: 首页 > 综合 > 正文

对绑定到 GridView Web 服务器控件的行执行批量更新(同时编辑所有行)

2013年05月22日 ⁄ 综合 ⁄ 共 6241字 ⁄ 字号 评论关闭

http://msdn.microsoft.com/zh-cn/library/aa992036(v=vs.80).aspx

创建网站

如果您已经通过完成演练:在 Visual Web Developer 中创建基本网页在 Visual Web Developer 中创建了网站,则可以使用该网站,并转至下一部分。否则,按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建”,然后单击“网站”。如果您使用的是 Visual Web Developer 速成版,则在“文件”菜单上单击“新建网站”。

    “新建网站”对话框随即出现。

  3. 在“Visual Studio 已安装的模板”下单击“ASP.NET 网站”。

  4. 在“位置”列表中单击“文件系统”,然后输入要保存网站网页的文件夹的名称。

    例如,输入文件夹名称“C:\WebSites\BulkUpdate”

  5. 在“语言”列表中,单击您想使用的编程语言

  6. 单击“确定”。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

为 GridView 控件添加数据源

若要在 ASP.NET 网页上显示数据,需要下列元素:

  • 与数据源(如数据库)的连接。

    在下面的过程中,您将创建一个到 SQL Server Northwind 数据库的连接。

  • 该页上一个用于与数据源(数据库)进行交互以读写数据的数据源控件。

  • 该页上一个用于显示数据的控件。

在下面的过程中,您将通过 GridView 控件显示数据。GridView 控件将从 SqlDataSource 控件中获取其数据。

为 GridView 控件添加数据源

  1. 打开或切换到 Default.aspx 页。

  2. 切换到“设计”视图。

  3. 从工具箱的“数据”选项卡中将 SqlDataSource 控件拖到页面上。

    如果“SqlDataSource 任务”智能标记没有显示,请右击 SqlDataSource 控件,再单击“显示智能标记”。

  4. 在“SqlDataSource 任务”面板中单击“配置数据源”。

    随即出现“配置数据源”向导。

  5. 单击“新建连接”。

    随即出现“添加连接”对话框。

  6. 如果需要,请执行下列操作之一:您看到的具体用户界面取决于您之前在 Visual Web Developer 中创建的数据连接。

    • 如果“数据源”列表未显示“Microsoft SQL Server (SqlClient)”,则请单击“更改”,然后在“更改数据源”对话框中选择“Microsoft SQL Server”。

    • 如果出现的是“选择数据源”对话框而不是“连接属性”对话框,则请在“数据源”列表中选择要使用的数据源类型。在本演练中,数据源的类型为“Microsoft SQL Server”。在“数据提供程序”列表中,单击“用于 SQL Server 的 .NET Framework 数据提供程序”,再单击“继续”。

  7. 在“添加连接”页上的“服务器名”文本框中,输入运行 SQL Server Northwind 数据库的计算机的名称。

  8. 在“登录到服务器”下,选择适当的选项以访问 SQL Server 数据库(集成安全性或特定 ID 与密码)。如果需要,则输入用户名和密码。

    Note注意

    如果需要有关如何登录到运行 SQL Server 的计算机的信息,请与服务器管理员联系。

  9. 如果输入了密码,请选中“保存密码”复选框。

  10. 单击“选择或输入一个数据库名”,然后输入“Northwind”

  11. 单击“测试连接”,并在确定该连接生效后单击“确定”。

  12. 在“配置数据源”向导中单击“下一步”。

  13. 确保选中了“是,将此连接另存为”复选框。

  14. 将连接命名为“NorthwindConnectionString”,然后单击“下一步”。

  15. 在“配置 Select 语句”页中,选择“指定来自表或视图的列”。

  16. 在“名称”列表中选择“Employees”

  17. 在“列”下,选择“EmployeeID”“TitleOfCourtesy”“LastName”“FirstName”“Title”“Extension”

  18. 单击“高级”。

  19. 选中“生成 INSERT、UPDATE 和 DELETE 语句”复选框,然后单击“确定”。

  20. 单击“下一步”。

  21. 单击“完成”。

添加显示数据的 GridView 控件

配置了用于管理数据的数据源控件之后,该页上还需要一个用于显示数据的控件。

在下面的过程中,您将通过 GridView 控件显示数据。GridView 控件将从之前添加的 SqlDataSource 控件中获取其数据。

若要使用户能一次编辑所有 GridView 控件的内容(而不是一次只编辑一行),必须自定义 GridView 控件。您将用可编辑的元素替换每一列中的默认显示元素,然后将它们绑定到数据源。为完成此操作,您将创建 TemplateField 列。在每个 TemplateField 列的 ItemTemplate 中,将添加一个绑定的 TextBox 控件,用户可以在该控件中编辑数据。

添加并配置用于显示数据的 GridView 控件

  1. 确保您位于 Default.aspx 页的“设计”视图中。

  2. 从工具箱的“数据”选项卡中将一个“GridView”控件拖到页面上。

    在“GridView 任务”面板的“选择数据源”列表框中,选择之前添加的 SqlDataSource 控件“SqlDataSource1”

  3. 选择“启用分页”。

  4. 单击“编辑列”。

    出现“字段”对话框。

  5. 在“选定的字段”下选择“TitleOfCourtesy”。

  6. 单击“将此字段转换为 TemplateField”。

  7. 使用与先前转换“TitleOfCourtesy”字段相同的步骤,将除“EmployeeId”字段之外的其余字段转换为模板字段。(“EmployeeId”字段包含主键,是不可编辑的。)

  8. 单击“确定”。

  9. 在“GridView 任务”面板中单击“编辑模板”。

  10. 在“显示”列表的“TitleOfCourtesy”下,单击“EditItemTemplate”。

    GridView 控件显示一个可编辑区域,且“TitleOfCourtesy”列的默认布局处于编辑模式。

  11. 右击 EditItemTemplate 中的 TextBox 控件,然后单击“复制”。

  12. 右击 GridView 控件,然后单击“显示智能标记”。

  13. 在“显示”列表的“TitleOfCourtesy”下,单击“ItemTemplate”。

    GridView 控件现在以显示模式显示“TitleOfCourtesy”列的默认布局。

  14. 删除现有的 Label 控件。

  15. 右击“ItemTemplate”可编辑区域,然后单击“粘贴”。

    您已将 TextBox 控件(包括该控件的数据绑定配置)从 EditItemTemplate 布局复制到 ItemTemplate 布局。

  16. 选择 TextBox 控件,并在“属性”窗口中将“(ID)”属性设置为 TitleOfCourtesyTextBox

  17. 将“MaxLength”属性设置为 25(数据库中字段的最大长度)。

    这可确保用户输入的信息不会超过为数据库中的“TitleOfCourtesy”字段所配置的字段容量。

  18. 对于每个模板字段,重复上述七个步骤,用从“EditItemTemplate”布局复制的 TextBox 替换现有的 Label 控件,并将 ID 属性设置为 <数据字段名>TextBox

    对于每个 TextBox 控件的 MaxLength 属性,请使用以下值。

    • FirstName:10

    • LastName:20

    • Title:30

    • Extension:4

  19. 右击 GridView 控件,然后单击“结束模板编辑”。

添加执行批量更新的过程

配置了用于显示可编辑数据的 GridView 控件之后,需要添加用于执行批量更新的代码。本节将执行以下任务:

  • 添加 Button 控件,并在该控件的 Click 处理程序中添加代码,从而以批量形式更新对 GridView 控件的各行所做的更改。

  • 添加用于存储原始数据值的 DataTable 对象。

  • 添加用于确定行是否被修改的代码。将把 GridView 控件中所显示的当前值与存储在 DataTable 对象中的原始值进行比较。如果一个或多个所显示的值与原始值不匹配,则该行将在数据库中更新。否则,该行将不包括在批量更新中。

创建执行批量更新的过程

  1. 切换到“设计”视图。

  2. 选择 GridView 控件,并在“属性”窗口中单击事件按钮 (“属性”窗口中的“事件”按钮) 以显示 GridView 控件的事件。

  3. 在 RowDataBound 字段中键入“GridView1_RowDataBound”并按 Enter。

    Visual Web Developer 将为 GridView 控件的 RowDataBound 事件创建事件处理程序。代码类似于下面的代码示例。

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
    
    }
  4. 用下面的代码(包括私有变量)替换生成的过程。

    private bool tableCopied = false;
    private DataTable originalDataTable;
    
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
            if (!tableCopied)
            {
                originalDataTable = ((DataRowView)e.Row.DataItem).Row.Table.Copy();
                ViewState["originalValuesDataTable"] = originalDataTable;
                tableCopied = true;
            }
    }

    只要 GridView 控件执行数据绑定,便会运行此代码。在绑定第一行时,代码在 DataTable 对象中保存原始数据库值的副本,该对象又存储在 ViewState 中。

  5. 切换到“设计”视图。

  6. 从工具箱的“标准”选项卡中,将一个“Button”控件拖到页面上。

  7. 在“属性”窗口中单击属性按钮 (PropertySymbolButton 屏幕快照) 以显示 Button 控件的属性。

  8. 在“(ID)”字段中输入“UpdateButton”

  9. 在“文本”字段中,输入“更新”

  10. 单击事件按钮 (“属性”窗口中的“事件”按钮) 以显示 Button 控件的事件。

  11. 在“单击”字段中键入“UpdateButton_Click”并按 Enter。

    Visual Web Developer 将为 Button 控件的 Click 事件创建事件处理程序。代码类似于下面的代码示例。

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
    
    }
  12. 用下面的代码替换生成的过程。

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
        originalDataTable = (DataTable)ViewState["originalValuesDataTable"];
    
        foreach (GridViewRow r in GridView1.Rows)
            if (IsRowModified(r)) { GridView1.UpdateRow(r.RowIndex, false); }
    
        // Rebind the Grid to repopulate the original values table.
        tableCopied = false;
        GridView1.DataBind();
    }
    
    protected bool IsRowModified(GridViewRow r)
    {
        int currentID;
        string currentTitleOfCourtesy;
        string currentLastName;
        string currentFirstName;
        string currentTitle;
        string currentExtension;
    
        currentID = Convert.ToInt32(GridView1.DataKeys[0].Value);
    
        currentTitleOfCourtesy = ((TextBox)r.FindControl("TitleOfCourtesyTextBox")).Text;
        currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
        currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;
        currentTitle = ((TextBox)r.FindControl("TitleTextBox")).Text;
        currentExtension = ((TextBox)r.FindControl("ExtensionTextBox")).Text;
    
        DataRow row =
            originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];
    
        if (!currentTitleOfCourtesy.Equals(row["TitleOfCourtesy"].ToString())) { return true; }
        if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
        if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }
        if (!currentTitle.Equals(row["Title"].ToString())) { return true; }
        if (!currentExtension.Equals(row["Extension"].ToString())) { return true; }
    
        return false;
    }
    Note注意

    此过程使用每个可编辑的 TextBox 控件中的值与缓存的 DataTable 对象中所存储的值执行字符串比较。如果对 TextBox 控件中的文本进行了格式设置,那么其值可能相同,但其字符串表示形式会不匹配。例如,如果将 DateTime 值的格式设置为短日期格式
    ({0:d}),则日期 TextBox 控件中的值可能为 3/2/2005。而 DataTable 对象中日期值的字符串表示形式为 3/2/2005 12:00 AM。在这些情况下,必须添加比较逻辑,将格式和本地化设置考虑在内。

    此过程循环访问 GridView 控件的每一行,并对每一行调用自定义 IsRowModified 函数。该函数将当前行与 DataTable 对象中相应的行进行比较,且如果该行发生了更改则返回true。对于发生更改的任意行,按钮的 Click 处理程序中的代码将调用 GridView 控件的 UpdateRow 方法。

测试页面

现在可以运行页面以测试代码。

对页进行测试

  1. 按 Ctrl+F5 运行该页面。

    该页将显示在浏览器中。GridView 控件将以可编辑数据页的形式显示 Northwind Employees 表中的数据行。

  2. 修改某些值。

  3. 单击“更新”。

    修改的行将在数据库中进行更新。

  4. 关闭浏览器。

抱歉!评论已关闭.