ASP.NET: Пара сценариев отображения данных в GridView

Источник: msdeveloper
Артем Мурадов

Здравствуйте. Сегодня поговорим о веб-разработке. Несмотря на то, что популярность MVC растет очень быстро, Web Forms ещё никто не отменял. К тому же много приложений написано с использованием Web Forms, да и уже написанные приложения требуют поддержки. И если простейшие контролы (например, TextBox) у новичков вопросов, как правило, не вызывают, то сориентироваться в чем-то более сложном уже проблема.
В данном посте я расскажу в общих чертах, как использовать контрол GridView для работы со списком или специализированным источником данных. Предупреждаю сразу, тема не новая и статья ориентирована на начинающих разработчиков.
Поехали.


Начнем с теории. Класс GridView

Цитата
Отображает значения источника данных в таблице, где каждый столбец представляет поле, а каждая строка - запись. Элемент управления GridView позволяет выбирать, сортировать и изменять эти записи.
Его можно связывать с элементами-источниками данных (например, наследниками DataSourceControl), а можно просто отображать перечисляемые списки, указав значение свойства DataSource. Начнем с последнего.

Итак, задача: Имеется страница, на которой расположен GridView, и список, который нужно на этой странице формировать и иметь возможность его изменять (то есть добавлять/удалять элементы). Список хранится только на странице.

Порядок действий:

  • Создаём веб-приложение
  • Удаляем с домашней страницы всё лишнее (необязательно)
  • Создаём страницу GridViewList.aspx, указываем для неё мастер страницу
  • Добавляем в меню пункт со ссылкой на GridViewList.aspx

Отлично, полигон для действий готов. Класс-объект, с которым мы будем работать, я определил так:

  1. [Serializable]
  2. public class People
  3. {
  4.     [XmlAttribute]
  5.     public int Id { get; set; }
  6.     [XmlAttribute]
  7.     public string FirstName { get; set; }
  8.     [XmlAttribute]
  9.     public string LastName { get; set; }
  10. }

Теперь определимся со списком. Во-первых, так как список формируется и изменяется только в рамках этой страницы, я решил хранить его во ViewState. Я просто определил свойство на странице, которое автоматом себя сохраняет.

  1. public List<People> Peoples
  2. {
  3.     get
  4.     {
  5.         // Получение ключа для поиска во ViewState.
  6.         // hfPeoplesViewState - HiddenField, которое хранит в себе этот ключ
  7.         // Это всё сделано только для того, чтобы обеспечить уникальность ключа на странице.
  8.         // По идее тут можно было просто написать var str = "Peoples_Key" и всё бы работало
  9.         var str = hfPeoplesViewState.Value;
  10.         if (string.IsNullOrEmpty(str))
  11.         {
  12.             // Если ещё ничего не хранит, то создать ключ
  13.             hfPeoplesViewState.Value = string.Format("Peoples_{0}", Guid.NewGuid());
  14.             str = hfPeoplesViewState.Value;
  15.         }
  16.  
  17.         // Проверяю, если во ViewState ещё нет того списка, что мне нужен - создаю его
  18.         if (ViewState[str] == null // !(ViewState[str] is List<People>))
  19.         {
  20.             var peoples = new List<People>
  21.                               {
  22.                                   new People {Id = 1, LastName = "Мурадов", FirstName = "Артем"},
  23.                                 new People {Id = 2, LastName = "Пупкин", FirstName = "Василий"},
  24.                                 new People {Id = 3, LastName = "Елопанов", FirstName = "Инокентий"}
  25.                               };
  26.             ViewState[str] = peoples;
  27.             return peoples;
  28.         }
  29.         return ViewState[str] as List<People>;
  30.     }
  31.     set
  32.     {
  33.         // Аналогично методу get
  34.         var str = hfPeoplesViewState.Value;
  35.         if (string.IsNullOrEmpty(str))
  36.         {
  37.             hfPeoplesViewState.Value = string.Format("Peoples_{0}", Guid.NewGuid());
  38.             str = hfPeoplesViewState.Value;
  39.         }
  40.  
  41.         ViewState[str] = value;
  42.     }
  43. }

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

  1. <asp:TextBox runat="server" ID="tbFirstName">
  2. </asp:TextBox>
  3. <asp:TextBox runat="server" ID="tbLastName">
  4. </asp:TextBox>
  5. <asp:Button runat="server" OnClick="BtAddPeople" Text="+" />
  6. <hr />
  7. <asp:GridView runat="server" ID="gv" AutoGenerateColumns="True" Width="60%">
  8.     <EmptyDataTemplate>
  9.         Записей нет</EmptyDataTemplate>
  10. </asp:GridView>

В обработчике событий

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     if (!IsPostBack)
  4.     {
  5.         gv.DataSource = Peoples;
  6.         gv.DataBind();
  7.     }
  8. }
  9.  
  10. protected void BtAddPeople(object sender, EventArgs e)
  11. {
  12.     if (!string.IsNullOrEmpty(tbFirstName.Text) && !string.IsNullOrEmpty(tbLastName.Text))
  13.     {
  14.         var id = Peoples.Count > 0 ? Peoples.Max(x => x.Id) + 1 : 1;
  15.         var p = new People
  16.         {
  17.             Id = id,
  18.             FirstName = tbFirstName.Text,
  19.             LastName = tbLastName.Text
  20.         };
  21.         Peoples.Add(p);
  22.         UpdateGrid();
  23.     }
  24. }
  25.  
  26. private void UpdateGrid()
  27. {
  28.     gv.DataSource = Peoples;
  29.     gv.DataBind();
  30. }

Окей, теперь при первой загрузке страницы, у нас будет заполняться GridView. А при добавлении элемента в коллекцию, GridView будет обновляться. Вот как это выглядит:

Добавление работает, но у нас нет ни сортировки, ни редактирования, ни удаления, да ещё и включена автогенерация полей. Вот с последнего и начнем. Отключаем автогенерацию, указываем нужные нам поля, разрешаем сортировку (список возможных полей):

  1. <asp:GridView runat="server" ID="gv" AutoGenerateColumns="False" Width="60%" AllowSorting="True">
  2.     <Columns>
  3.         <asp:BoundField HeaderText="ИД" DataField="Id" SortExpression="Id" ReadOnly="True">
  4.             <ItemStyle Width="5%"></ItemStyle>
  5.         </asp:BoundField>
  6.         <asp:BoundField HeaderText="Имя" DataField="FirstName" SortExpression="FirstName">
  7.             <ItemStyle Width="40%"></ItemStyle>
  8.         </asp:BoundField>
  9.         <asp:BoundField HeaderText="Фамилия" DataField="LastName" SortExpression="LastName">
  10.             <ItemStyle Width="40%"></ItemStyle>
  11.         </asp:BoundField>
  12.         <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" ShowCancelButton="True">
  13.             <ItemStyle Width="15%"></ItemStyle>
  14.         </asp:CommandField>
  15.     </Columns>
  16.     <EmptyDataTemplate>
  17.         Записей нет</EmptyDataTemplate>
  18. </asp:GridView>

Теперь у нас есть кнопки, для того, чтобы сортировать, редактировать или удалять. Но только этого функционала пока нет. GridView не может самостоятельно править нашу коллекцию. Но это не беда, нам достаточно подписаться на нужные нам события и реализовать всё самим. Для редактирования нужны следующие события: OnRowEditing="GvEditing" OnRowUpdating="GvUpdating" OnRowCancelingEdit="GvCancelingEdit", для сортировки OnSorting="GvSorting", для удаления OnRowDeleting="GvDeleting".

  1. <asp:GridView runat="server" ID="gv" AllowSorting="True" OnSorting="GvSorting" OnRowEditing="GvEditing"
  2.     OnRowUpdating="GvUpdating" OnRowCancelingEdit="GvCancelingEdit" OnRowDeleting="GvDeleting"
  3.     DataKeyNames="Id" AutoGenerateColumns="False" Width="60%" >
  4.     <Columns>
  5.         <asp:BoundField HeaderText="ИД" DataField="Id" SortExpression="Id" ReadOnly="True">
  6.             <ItemStyle Width="5%"></ItemStyle>
  7.         </asp:BoundField>
  8.         <asp:BoundField HeaderText="Имя" DataField="FirstName" SortExpression="FirstName">
  9.             <ItemStyle Width="40%"></ItemStyle>
  10.         </asp:BoundField>
  11.         <asp:BoundField HeaderText="Фамилия" DataField="LastName" SortExpression="LastName">
  12.             <ItemStyle Width="40%"></ItemStyle>
  13.         </asp:BoundField>
  14.         <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" ShowCancelButton="True">
  15.             <ItemStyle Width="15%"></ItemStyle>
  16.         </asp:CommandField>
  17.     </Columns>
  18.     <EmptyDataTemplate>
  19.         Записей нет</EmptyDataTemplate>
  20. </asp:GridView>

Вот код для сортировки

  1. /// <summary>
  2. /// Возникает при сортировке в гриде.
  3. /// </summary>
  4. protected void GvSorting(object sender, GridViewSortEventArgs e)
  5. {
  6.     var p = Peoples;
  7.  
  8.     // Необходимо определить, по какому именно полю сортировать
  9.     if (e.SortExpression == "LastName")
  10.     {
  11.         // используем вспомогательный метод Sort
  12.         p = Sort("LastName", list => list.OrderBy(x => x.LastName).ToList(),
  13.                  list => list.OrderByDescending(x => x.LastName).ToList(), p);
  14.     }
  15.     if (e.SortExpression == "FirstName")
  16.     {
  17.         p = Sort("FirstName", list => list.OrderBy(x => x.FirstName).ToList(),
  18.                  list => list.OrderByDescending(x => x.FirstName).ToList(), p);
  19.     }
  20.     if (e.SortExpression == "Id")
  21.     {
  22.         p = Sort("Id", list => list.OrderBy(x => x.Id).ToList(),
  23.                  list => list.OrderByDescending(x => x.Id).ToList(), p);
  24.     }
  25.  
  26.     Peoples = p;
  27.     // обновление грида
  28.     UpdateGrid();
  29. }
  30.  
  31. /// <summary>
  32. /// Вспомогательный метод для сортировки
  33. /// </summary>
  34. private List<People> Sort(string column, Func<List<People>, List<People>> ascFunc, Func<List<People>, List<People>> descFunc, List<People> data)
  35. {
  36.     List<People> result;
  37.     // Если в прошлвй раз была сортировка по этому же полю
  38.     if (hfLastSortFieldState.Value == column)
  39.     {
  40.         // смотрим, в каком направлении была сортировка в прошлвй раз и сортируем в другом
  41.         result = hfLastSortDirectionState.Value != "ASC" ? ascFunc(data) : descFunc(data);
  42.         // сохраняем колонку и направление сортировки
  43.         hfLastSortDirectionState.Value = hfLastSortDirectionState.Value != "ASC" ? "ASC" : "DESC";
  44.         hfLastSortFieldState.Value = column;
  45.     }
  46.     else
  47.     {
  48.         // Если это поле ещё не сортировано, сортируем по возрастанию
  49.         result = ascFunc(data);
  50.         // сохраняем колонку и направление сортировки
  51.         hfLastSortDirectionState.Value = "ASC";
  52.         hfLastSortFieldState.Value = column;
  53.     }
  54.  
  55.     return result;
  56. }

Код для редактирования и удаления

  1. /// <summary>
  2. /// Событие удаления элемента. Поле Id попадает в набор ключей,
  3. /// так как в гриде указано DataKeyNames="Id"
  4. /// Нам осталось только определить ключ и убрать элемент с этим ключем из коллекции
  5. /// </summary>
  6. protected void GvDeleting(object sender, GridViewDeleteEventArgs e)
  7. {
  8.     int id;
  9.     // Определяем идентификатор
  10.     if (int.TryParse(string.Format("{0}", e.Keys["Id"]), out id))
  11.     {
  12.         // Убираем из списка
  13.         Peoples = Peoples.Where(x => x.Id != id).ToList();
  14.         // обновляем грид
  15.         UpdateGrid();
  16.     }
  17. }
  18.  
  19. /// <summary>
  20. /// Событие возникает, когда пользователь начинает редактировать строку.
  21. /// Необходимо просто указать гриду индекс редактируемой строки и обновить грид
  22. /// </summary>
  23. protected void GvEditing(object sender, GridViewEditEventArgs e)
  24. {
  25.     gv.EditIndex = e.NewEditIndex;
  26.     UpdateGrid();
  27. }
  28.  
  29. /// <summary>
  30. /// Событие возникает, когда пользователь обновляет строку.
  31. /// Необходимо определить Id строки, получить элемент по этому Id, обновить поля и обновить грид
  32. /// </summary>
  33. protected void GvUpdating(object sender, GridViewUpdateEventArgs e)
  34. {
  35.     int id;
  36.     if (int.TryParse(string.Format("{0}", e.Keys["Id"]), out id))
  37.     {
  38.         Peoples
  39.             .Where(x => x.Id == id)
  40.             .ToList()
  41.             .ForEach(x =>
  42.                          {
  43.                             // я использую string.Format, так как
  44.                             // e.NewValues["FirstName"] имеет тип object
  45.                             // и может быть равен null
  46.                              x.FirstName = string.Format("{0}", e.NewValues["FirstName"]);
  47.                              x.LastName = string.Format("{0}", e.NewValues["LastName"]);
  48.                          });
  49.         gv.EditIndex = -1;
  50.         UpdateGrid();
  51.     }
  52. }
  53.  
  54. /// <summary>
  55. /// Событие возникает, когда пользователь отменяет обновление строки
  56. /// Нужно установить gv.EditIndex = -1; и обновить грид
  57. /// </summary>
  58. protected void GvCancelingEdit(object sender, GridViewCancelEditEventArgs e)
  59. {
  60.     gv.EditIndex = -1;
  61.     UpdateGrid();
  62. }

В итоге имеем грид, элементы которого можем удалять, добавлять, редактировать и сортировать.

Это всё хорошо, но что делать, если мы работаем с базой данных? В таких случаях можно определять источники данных (например, наследники DataSourceControl) и связывать их с гридом. Я приведу пример с использованием ObjectDataSource. Я выбрал ObjectDataSource, так как он зависит только от вашего кода и ему всё равно, откуда берутся данные - из базы данных, сервиса, файла, да чего угодно.

Формализуем задачу. Необходимо реализовать такой же функционал, как и в предыдущем примере, но с использованием ObjectDataSource. Только на этот раз данные я буду хранить не на странице, а в статической переменной - чтобы эти данные были доступны в рамках всего приложения (ведь так и происходит, когда вы работаете, например, с базой данных).

Вот класс автомобиля, с которым будем работать

  1. public class Car
  2. {
  3.     public int Id { get; set; }
  4.     public string Manufacturer { get; set; }
  5.     public string Model { get; set; }
  6. }

Начнем с класса-репозитория. Именно его методы будет вызывать ObjectDataSource для получения данных и манипуляции с ними. Хочу заметить, что я подобрал сигнатуру и набор методов репозитория специально для использования в ObjectDataSource. Вот сам класс:

  1. public class CarRepository
  2. {
  3.     /// <summary>
  4.     /// Статическая переменная. В ней будем хранить наши данные
  5.     /// </summary>
  6.     private static List<Car> _store;
  7.  
  8.     /// <summary>
  9.     /// Статический конструктор. Внутри инициализируем наши данные
  10.     /// </summary>
  11.     static CarRepository()
  12.     {
  13.         _store = new List<Car>();
  14.  
  15.         for (var i = 0; i < 1000; i++)
  16.         {
  17.             _store.Add(new Car
  18.             {
  19.                 Id = i,
  20.                 Manufacturer = "Manufacturer" + i,
  21.                 Model = "Model" + i
  22.             });
  23.         }
  24.     }
  25.  
  26.     /// <summary>
  27.     /// Получение данных. Принимает три параметра. Назначение первых двух очевидно,
  28.     /// а вот в третьем приходит информация  для сортировки. Например, у нас сортировка по полю
  29.     /// "Id". При сортировке по возрастанию переметр sort будет равен "Id".
  30.     /// При сортировке по убыванию - "Id DESC"
  31.     /// </summary>
  32.     public IEnumerable<Car> GetCars(int maximumRows, int startRowIndex, string sort)
  33.     {
  34.         IEnumerable<Car> temp = _store;
  35.  
  36.         // Сперва определяем направление сортировки, затем поле, по которому сортируем
  37.         if (sort.Contains("DESC"))
  38.         {
  39.             if (sort.Contains("Id")) temp = _store.OrderByDescending(x => x.Id);
  40.             if (sort.Contains("Manufacturer")) temp = _store.OrderByDescending(x => x.Manufacturer);
  41.             if (sort.Contains("Model")) temp = _store.OrderByDescending(x => x.Model);
  42.         }
  43.         else
  44.         {
  45.             if (sort.Contains("Id")) temp = _store.OrderBy(x => x.Id);
  46.             if (sort.Contains("Manufacturer")) temp = _store.OrderBy(x => x.Manufacturer);
  47.             if (sort.Contains("Model")) temp = _store.OrderBy(x => x.Model);
  48.         }
  49.  
  50.         return temp.Skip(startRowIndex).Take(maximumRows);
  51.     }
  52.  
  53.     /// <summary>
  54.     /// Необходим для подсчёта общего количества элеменов.
  55.     /// Используется для постраничного вывода данных
  56.     /// </summary>
  57.     public int Count()
  58.     {
  59.         return _store.Count;
  60.     }
  61.  
  62.     /// <summary>
  63.     /// Для обновления в метод приходит экземпляр Car с
  64.     /// идентификатором обновляемой машины и новыми значениями полей
  65.     /// </summary>
  66.     public void Update(Car car)
  67.     {
  68.         _store
  69.             .Where(x => x.Id == car.Id)
  70.             .ToList()
  71.             .ForEach(x =>
  72.                          {
  73.                              x.Manufacturer = car.Manufacturer;
  74.                              x.Model = car.Model;
  75.                          });
  76.     }
  77.  
  78.     /// <summary>
  79.     /// Удаление. Код и так понятен.
  80.     /// </summary>
  81.     public void Delete(Car car)
  82.     {
  83.         _store = _store.Where(x => x.Id != car.Id).ToList();
  84.     }
  85.  
  86.     /// <summary>
  87.     /// Добавление
  88.     /// </summary>
  89.     public void Insert(Car car)
  90.     {
  91.         car.Id = _store.Count > 0 ? _store.Max(x => x.Id) + 1 : 1;
  92.         _store.Add(car);
  93.     }
  94. }

Отлично. Теперь, как и в предыдущем примере, добавляем страницу в проект и кидаем на эту страницу 2 текстбокса и кнопку (для возможности добавления)

  1. <asp:TextBox runat="server" ID="tbManufacturer">
  2. </asp:TextBox>
  3. <asp:TextBox runat="server" ID="tbModel">
  4. </asp:TextBox>
  5. <asp:Button runat="server" OnClick="BtAddCar" Text="+" />
  6. <hr />

  1. protected void BtAddCar(object sender, EventArgs e)
  2. {
  3.     if (!string.IsNullOrEmpty(tbManufacturer.Text) && !string.IsNullOrEmpty(tbModel.Text))
  4.     {
  5.         var carRepository = new CarRepository();
  6.         carRepository.Insert(new Car {Manufacturer = tbManufacturer.Text, Model = tbModel.Text});
  7.         gv.DataBind();
  8.     }
  9. }

Теперь поработаем над самим контролом ObjectDataSource.

  1. <asp:ObjectDataSource ID="ods" runat="server" TypeName="GridViewTest.CarRepository"
  2.     DataObjectTypeName="GridViewTest.Car" EnablePaging="True" MaximumRowsParameterName="maximumRows"
  3.     StartRowIndexParameterName="startRowIndex" SortParameterName="sort" InsertMethod="Insert"
  4.     SelectCountMethod="Count" SelectMethod="GetCars" UpdateMethod="Update" DeleteMethod="Delete">
  5. </asp:ObjectDataSource>

Поясню по каждому полю.

  • TypeName="GridViewTest.CarRepository" - указывает класс-источник данных
  • DataObjectTypeName="GridViewTest.Car" - указывает тип объекта, которым будем оперировать. Благодаря этому мы можем в репозитории указывать методы, принимающие в качестве параметра экземпляр типа Car. Этот тип должен иметь конструктор без параметров и поля, доступные для записи.
  • EnablePaging="True" указываем, что используется постраничный вывод
  • MaximumRowsParameterName="maximumRows" StartRowIndexParameterName="startRowIndex" SortParameterName="sort" имена параметров в методах
  • InsertMethod="Insert" SelectCountMethod="Count" SelectMethod="GetCars" UpdateMethod="Update" DeleteMethod="Delete" имена методов в репозитории

Теперь у нас всё готово для того, чтобы добавить на страницу грид. Приведу весь его код.

  1. <asp:GridView runat="server" ID="gv" AllowSorting="True" DataKeyNames="Id" AutoGenerateColumns="False"
  2.     DataSourceID="ods" Width="60%" AllowPaging="True" PageSize="20">
  3.     <Columns>
  4.         <%--Тут, как и в предыдущем примере, я использую BoundField--%>
  5.         <asp:BoundField HeaderText="ИД" DataField="Id" ReadOnly="True" SortExpression="Id">
  6.             <ItemStyle Width="5%"></ItemStyle>
  7.         </asp:BoundField>
  8.         <%--Здесь я тоже мог бы использовать BoundField, но я хотел показать, как использовать
  9.         TemplateField с односторонней (Eval) и двухсторонней (Bind) привязкой данных--%>
  10.         <asp:TemplateField HeaderText="Производитель" SortExpression="Manufacturer">
  11.             <ItemStyle Width="35%"></ItemStyle>
  12.             <ItemTemplate>
  13.                 <%#Eval("Manufacturer")%>
  14.             </ItemTemplate>
  15.             <EditItemTemplate>
  16.                 <asp:TextBox runat="server" ID="tbMan" Text='<%#Bind("Manufacturer") %>'></asp:TextBox>
  17.             </EditItemTemplate>
  18.         </asp:TemplateField>
  19.         <%--Тут всё аналогично предыдущему столбцу--%>
  20.         <asp:TemplateField HeaderText="Модель" SortExpression="Model">
  21.             <ItemStyle Width="35%"></ItemStyle>
  22.             <ItemTemplate>
  23.                 <%#Eval("Model")%>
  24.             </ItemTemplate>
  25.             <EditItemTemplate>
  26.                 <asp:TextBox runat="server" ID="tbModel" Text='<%#Bind("Model") %>'></asp:TextBox>
  27.             </EditItemTemplate>
  28.         </asp:TemplateField>
  29.         <%--Я хочу показать, что для того, чтобы использовать кнопки редактирования/удаления,
  30.         вам не обязательно пользоваться CommandField. Достаточно указать нужное значение в поле
  31.         CommandName любого кнопочного контрола--%>
  32.         <asp:TemplateField>
  33.             <ItemStyle Width="25%"></ItemStyle>
  34.             <ItemTemplate>
  35.                 <asp:LinkButton runat="server" CommandName="Edit" Text="Изменить"></asp:LinkButton>
  36.                 <%--А раз это простые кнопки, то можно им добавлять нужное поведение. Например,
  37.                 OnClientClick отработает на клиенте, спросит у пользователя разрешение на действие,
  38.                 и постбек произойдет только в том случае, если пользователь ответит утвердительно --%>
  39.                 <asp:LinkButton runat="server" CommandName="Delete" Text="Удалить"
  40.                 OnClientClick="return confirm('Вы действительно хотите удалить запись?');"></asp:LinkButton>
  41.             </ItemTemplate>
  42.             <EditItemTemplate>
  43.                 <asp:LinkButton runat="server" CommandName="Update" Text="Обновить"></asp:LinkButton>
  44.                 <asp:LinkButton runat="server" CommandName="Cancel" Text="Отменить"></asp:LinkButton>
  45.             </EditItemTemplate>
  46.         </asp:TemplateField>
  47.     </Columns>
  48.     <%--Контент, который будет показан, если записей не будет вовсе--%>
  49.     <EmptyDataTemplate>
  50.         Записей нет</EmptyDataTemplate>
  51. </asp:GridView>

Собрав всё вместе, получаем результат:

Вот и всё. Данные можно изменять, сортировать, удалять.

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

Исходный код солюшена


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=27985