Пошаговое руководство. Выполнение массовых обновлений строк, связанных с серверным веб-элементом управления GridView

Обновлен: Ноябрь 2007

Если редактирование включено для элемента управления GridView, то по умолчанию за один раз может редактироваться одна строка. Это пошаговое руководство показывает, как можно расширить функциональные возможности элемента управления GridView, чтобы пользователи могли изменять несколько строк за раз и затем сохранять все изменения нажатием кнопки. Это пошаговое руководство для извлечения результата из источника данных и управления обновлениями использует элемент управления SqlDataSource. Элемент управления SqlDataSource используется в качестве источника данных для элемента управления GridView.

В процессе выполнения этого пошагового руководства вы научитесь:

• Подключаться к базе данных SQL Server в Microsoft Visual Web Developer.

• Использовать элемент управления SqlDataSource для управления доступом к данным.

• Отображать данные, полученные из базы данных, в элементе управления GridView.

• Настраивать элемент управления GridView таким образом, чтобы предоставлять пользователям возможность редактировать несколько строк за раз.

Необходимые компоненты

Для выполнения этого пошагового руководства потребуется:

• Visual Web Developer (Visual Studio).

• Компоненты доступа к данным MDAC 2.7 или более поздней версии.

  Если вы используете Microsoft Windows XP или Windows Server 2003, то у вас уже есть MDAC 2.7. Однако если вы используете Microsoft Windows 2000, то может быть необходимо обновить компоненты доступа к данным MDAC, уже установленные на вашем компьютере. Дополнительные сведения см. в разделе Microsoft Data Access Components (MDAC) Installation (Установка компонентов доступа к данным MDAC) в библиотеке MSDN.

• Доступ к базе данных SQL Server Northwind. Если требуется копия базы данных Northwind для SQL Server, см. раздел Установка образцов баз данных в электронной документации по SQL Server 2005.

  Примечание.
  Сведения, необходимые для получения доступа к SQL Server, можно получить у администратора сервера.

Создание веб-узла

Если веб-узел уже создан в 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 требуется следующее:

• Подключение к источнику данных, например, к базе данных.

  В следующей процедуре будет создано подключение к базе данных Northwind SQL Server.

• Элемент управления источником данных, который взаимодействует с источником данных (базой данных), считывая и записывая данные.

• Элемент управления на странице для отображения данных.

В следующей процедуре данные будут отображены в элементе управления 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. В списке Поставщик данных выберите Поставщик данных .NET Framework для SQL Server и нажмите кнопку Продолжить.

7. На странице Добавить подключение в текстовом поле Имя сервера введите имя компьютера, использующего базу данных SQL Server Northwind.

8. В меню Вход на сервер выберите соответствующий параметр для доступа к базе данных SQL Server (встроенные средства безопасности или определенный идентификатор и пароль). Если требуется, введите новое имя пользователя и пароль.

   Примечание.
   Сведения, необходимые для получения доступа к SQL Server, можно получить у администратора сервера.

9. Установите флажок Сохранить мой пароль, если введен пароль.

10. Выберите переключатель Выберите или введите имя базы данных, а затем введите Northwind.

11. Нажмите кнопку Проверить подключение и, убедившись в его наличии, нажмите кнопку ОК.

12. В Мастере настройки источника данных нажмите кнопку Далее.

13. Убедитесь, что флажок Да, сохранить это подключение как установлен.

14. Назовите подключение NorthwindConnectionString и затем нажмите кнопку Далее.

15. На странице Настройка инструкции Select выберите Указать столбцы из таблицы или представления.

16. В списке Имя выберите Employees.

17. В меню Столбцы выберите пункты EmployeeID, LastName и FirstName.

18. Нажмите кнопку Дополнительно.

19. Установите флажок Создать инструкции INSERT, UPDATE и DELETE, затем нажмите кнопку ОК.

20. Нажмите кнопку Далее.

21. Нажмите кнопку Готово.

Добавление элемента управления GridView для отображения данных

После настройки элемента управления источником данных для управления данными необходим элемент управления на странице для отображения данных.

В следующей процедуре данные будут отображены в элементе управления GridView. Элемент управления GridView будет получать данные из элемента управления SqlDataSource, который был добавлен ранее.

Чтобы позволить пользователям редактировать содержимое всего элемента управления GridView за раз (а не редактировать за раз только одну строку), необходимо настроить элемент управления GridView. Нужно заменить элементы отображения по умолчанию в каждом столбце на редактируемые элементы и затем связать их с источником данных. Для этого нужно создать столбцы TemplateField. В свойство ItemTemplate каждого столбца TemplateField нужно добавить связанный элемент управления TextBox, в котором пользователи смогут редактировать данные.

Добавление и настройка элементы управления GridView для отображения данных

1. Убедитесь, что находитесь в представлении конструктора для страницы Default.aspx.

2. Из вкладки Данные в панели элементов перетащите на страницу элемент управления GridView.

   В панели Задачи GridView в раскрывающемся спискеВыбор источника данных выберите элемент управления SqlDataSource, который был добавлен ранее, SqlDataSource1.

3. Выберите Включить разбиение по страницам.

4. Нажмите Правка столбцов.

   Появится диалоговое окно Поля.

5. В поле Выбранные поля выберите FirstName.

6. Нажмите Преобразовать это поле в TemplateField.

7. Преобразуйте поле LastNameв поле шаблона, выполнив те же действия, что и для поля FirstName. Не преобразовывайте поле EmployeeId: оно содержит первичный ключ и, следовательно, его нельзя редактировать.

8. Нажмите кнопку ОК.

9. В панели Задачи GridView нажмите Редактировать шаблоны.

10. В списке Отображение поля FirstName выберите EditItemTemplate.

    Элемент управления GridView выводит редактируемую область с макетом по умолчанию для поля FirstName в режиме редактирования.

11. Щелкните правой кнопкой мыши элемент управления TextBox в EditItemTemplate и выберите Копировать.

12. Щелкните правой кнопкой мыши элемент управления GridView и выберите пункт Показать смарт-тег.

13. В списке Отображение поля FirstName выберите ItemTemplate.

    Теперь элемент управления GridView отображает макет по умолчанию для столбца FirstNameв режиме отображения.

14. Удалите существующий элемент управления Label.

15. Щелкните правой кнопкой мыши редактируемую область ItemTemplate и выберите пункт Вставить.

    Был скопирован элемент управления TextBox, включая его конфигурацию связывания данных, из макета EditItemTemplate в макет ItemTemplate.

16. Выберите элемент управления TextBox и в окне "Свойства" задайте для свойства (ID) значение FirstNameTextBox. Это обеспечивает, что идентификатор вставленного элемента управления TextBox будет отличаться от идентификатора скопированного элемента управления.

17. Задайте для свойства MaxLength значение 10 (максимальная длина поля в базе данных).

    Это гарантирует, что пользователи не смогут ввести больше информации, чем предусмотрено для поля FirstName в базе данных.

18. Повторите предыдущие девять шагов, на этот раз для изменения поля шаблона LastName. Замените существующий элемент управления Label элементом управления TextBox, скопированным из макета EditItemTemplate, и задайте для свойства ID значение LastNameTextBox.

    Для свойства MaxLength элемента управления TextBox задайте значение, равное 20.

19. Щелкните правой кнопкой мыши элемент управления GridView и выберите пункт Завершить изменение шаблона.

Добавление процедуры для проведения массовых обновлений

После настройки элемента управления GridView для отображения редактируемых данных необходимо добавить код для проведения массового обновления. В этом подразделе будет сделано следующее:

• Добавление элемента управления Button и добавление в его обработчик Click кода для массового обновления изменений для каждой строки элемента управления GridView.

• Добавление объекта DataTable, который содержит исходные значения данных.

• Добавление кода для определения того, была ли изменена строка. Текущие значения, отображаемые в элементе управления GridView, будут сопоставлены с исходными значениями, содержащимися в объекте DataTable. Если одно или несколько отображаемых значений не соответствуют исходному значению, то строка будет обновлена в базе данных. В противном случае строка не будет включена в массовое обновление.

Создание процедуры для выполнения массового обновления

1. Перейдите в представление конструктора.

2. Выберите элемент управления GridView и в окне "Свойства" нажмите кнопку "События" (), чтобы отобразить события для элемента управления GridView.

3. В поле RowDataBound введите GridView1_RowDataBound и нажмите клавишу ВВОД.

   Visual Web Developer создаст обработчик событий для события RowDataBound элемента управления GridView. Таким образом, код будет выглядеть следующим образом.

   Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
   
   End Sub
   

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
   
   }
   

4. Замените созданную процедуру следующим кодом (включая закрытые переменные).

   Private tableCopied As Boolean = False
   Private originalDataTable As System.Data.DataTable
   
   Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
       If e.Row.RowType = DataControlRowType.DataRow Then
           If Not tableCopied Then
               originalDataTable = CType(e.Row.DataItem, System.Data.DataRowView).Row.Table.Copy()
               ViewState("originalValuesDataTable") = originalDataTable
               tableCopied = True
           End If
       End If
   End Sub
   

   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. В окне "Свойства" нажмите кнопку "Свойства" () для отображения свойств элемента управления Button.

8. В поле (Идентификатор) введите UpdateButton.

9. В поле Text введите Update.

10. Нажмите кнопку "События" (), чтобы отобразить события для элемента управления Button.

11. В поле Click введите UpdateButton_Click и нажмите клавишу ВВОД.

    Visual Web Developer создаст обработчик событий для события Click элемента управления Button. Таким образом, код будет выглядеть следующим образом.

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    
    End Sub
    

    protected void UpdateButton_Click(object sender, EventArgs e)
    {
    
    }
    

12. Замените созданную процедуру следующим кодом.

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        originalDataTable = CType(ViewState("originalValuesDataTable"), System.Data.DataTable)
    
        For Each r As GridViewRow In GridView1.Rows
            If IsRowModified(r) Then GridView1.UpdateRow(r.RowIndex, False)
        Next
    
        ' Rebind the Grid to repopulate the original values table.
        tableCopied = False
        GridView1.DataBind()
    End Sub
    
    Protected Function IsRowModified(ByVal r As GridViewRow) As Boolean
        Dim currentID As Integer
        Dim currentLastName As String
        Dim currentFirstName As String
    
        currentID = Convert.ToInt32(GridView1.DataKeys(r.RowIndex).Value)
    
        currentLastName = CType(r.FindControl("LastNameTextBox"), TextBox).Text
        currentFirstName = CType(r.FindControl("FirstNameTextBox"), TextBox).Text
    
        Dim row As System.Data.DataRow = _
            originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))(0)
    
        If Not currentLastName.Equals(row("LastName").ToString()) Then Return True
        If Not currentFirstName.Equals(row("FirstName").ToString()) Then Return True
    
        Return False
    End Function
    

    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 currentLastName;
        string currentFirstName;
    
        currentID = Convert.ToInt32(GridView1.DataKeys[r.RowIndex].Value);
    
        currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
        currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;
    
        DataRow row =
            originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];
    
        if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
        if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }
    
        return false;
    }
    

    Примечание.

    Процедура выполняет сравнение строк, используя значение в каждом редактируемом элементе управления TextBox и значение, размещенное в кэшированном объекте DataTable. Если было произведено форматирование текста в элементе управления TextBox, значения могут быть одинаковыми, но их строковые представления не будут совпадать. Например, если было выполнено форматирование значения DateTime, с использованием малого формата даты ({0:d}), то значение в элементе управления даты TextBox может быть равно 3/2/2005. Строковое представление значения даты объекта DataTable будет 3/2/2005 12:00 AM. В этих случаях необходимо добавить логику сравнения, которая учитывает форматы и параметры локализации.

    Процедура выполняет итерацию строк элемента управления GridView и вызывает настраиваемую функцию IsRowModified для каждой строки. Функция сравнивает текущую строку с соответствующей строкой в объекте DataTable и возвращает значение true, если строка была изменена. Для любых измененных строк код в обработчике Click кнопки вызывает метод UpdateRow элемента управления GridView.

Проверка страницы

Теперь можно запустить страницу для проверки кода.

Проверка страницы

1. Нажмите сочетание клавиш CTRL+F5 для запуска страницы.

   Страница отобразится в обозревателе. Элемент управления GridView отображает строки данных из таблицы Northwind Employees в редактируемых страницах данных.

2. Измените ряд значений.

3. Нажмите кнопку Обновить.

   Измененные строки будут обновлены в базе данных.

4. Закройте обозреватель.

Следующие шаги

Это руководство продемонстрировало, как можно расширить функциональные возможности элемента управления GridView, чтобы позволить обновлять несколько строк данных на веб-странице ASP.NET. Может также потребоваться добавить в приложение функцию, позволяющую пользователям добавлять новые строки данных, используя элемент управления DetailsView или FormView. Можно также разрешить пользователям использовать и другие элементы управления (помимо TextBox) для редактирования значений, например элемент управления DropDownList. Дополнительные сведения см. в следующих разделах:

• Пошаговое руководство: создание основных веб-страниц и страниц подробностей в Visual Studio

• Пошаговое руководство. Редактирование и вставка данных в веб-страницы с помощью серверного веб-элемента управления DetailsView

• Пошаговое руководство. Отображение раскрывающегося списка при редактировании в серверном веб-элементе управления GridView

См. также

Задачи

Практическое руководство. Безопасность строк подключения при использовании элементов управления источником данных

Пошаговое руководство. Отображение раскрывающегося списка при редактировании в серверном веб-элементе управления GridView

Пошаговое руководство. Основы доступа к данным на веб-страницах