Лекция 7 Связывание элементов управления Web формы с данными

Связывание с данными Data Binding

Связывание с данными Data Binding это функциональность, позволяющая связать источники данных с ЭУ. В результате ЭУ будут отображать требуемые данные. Это декларативный процесс, а не результат программирования. Когда свойству DataSource задается ссылка на data object, то создается логическая связь между ЭУ и data object, который содержит данные для передачи. Для выполнения самого процесса передачи данных нужен метод ЭУ DataBinding(), который пробегает по источнику данных, извлекает данные и передает их странице.

Как задать значения серверным ЭУ? Задать данные в тэгах ЭУ при создании страницы –Данные не динамические: нельзя получить данные из БД. Написать код, который использует объектную модель ЭУ –Это годится, если нужно занести простое значение или список, но задача быстро усложняется при заполнении сложной формы Связывание с данными (Data binding) –Создать объект, который содержит данные ( DataSet, Array, string, int, и т.п.) –Соединить этот объект с элементом управления

Связывание с данными Предоставляет единый, простой, но мощный способ заполнения Web Form данными –Позволяет ясное отделение кода от интерфейса пользователя (UI) Поддерживает связывание с любым источником данных –Свойства, выражения, вызовы методов –Коллекции ( Array, Hashtable, etc.) –DataSet, DataTable, DataView, DataReader –XML

Связывание с данными Можно указать выражение связывания При вызове метода ЭУ DataBind, выражение вычисляется и полученное значение заносится в ЭУ: –DataBind для одного ЭУ (и его дочерних ЭУ) –Page.DataBind для связывания всех ЭУ на странице Работает со скалярными ЭУ, например ЭУ, Label Работает со списками, например: DropDown, ListBox, и т.п. Позволяет использовать шаблоны.

Способы связывания Два способа связывания –Связывание с одним значением, скалярное связывание (single-value binding) # выражения $ выражения –Связывание с множеством значений, со списками данных (repeated-value binding)

Связывание с одним значением (Single-Value Binding) ЭУ, которые поддерживают single-value binding, позволяют связать некоторые их свойства с data binding выражениями. Эти выражения записываются в размеченную часть страницы.aspx (не в программном коде). Выражения записываются в формате Например, если есть переменная класса EmployeeName (public,private, protected), то можно записать

Правильные выражения для Single-Value Binding Содержанием выражений связывания могут быть только: –значения свойств, полей класса и результаты работы методов; –результат арифметического или символьного выражения –И т.п. Например

Выполнение Single-Value Binding Для выполнения этого выражения нужно вызвать метод Page.DataBind(). При выполнении этого метода будут выполняться все такие выражения на странице и заменяться на полученные значения (в данном случае на значение переменной или свойства). Если этот метод не вызывать, то выражения связывания просто не будут передаваться клиенту. public void Page_Load(object s, EventArgs e) { if (! Page.IsPostBack) Page.DataBind(); }

Где используется Single-Value Binding? Single-Value Binding может использоваться в любом месте страницы Обычно используются для задания свойств элементов управления. Можно связать с данными не только текстовые свойства ЭУ, но и любые его свойства (Color, NavigateUrl и т.п.).

Пример использования Single-Value Binding ' /> "> protected string GetFilePath() { return "apress.gif"; } protected string FilePath{ get { return "apress.gif"; } }

Скалярные выражения Демонстрация : DataBinding1.aspx –Связывание с данными с помощью простого, скалярного выражения.

Пример ' /> ' /> ' /> ">

protected string GetFilePath() { return "apress.gif"; } protected string FilePath { get { return "apress.gif"; } } protected void Page_Load(object sender, System.EventArgs e) { this.DataBind(); }

$ выражения связывания Имеют вид Выражения записанные в вычисляются, когда формируется ответ на запрос (рендеринг) с помощью expression builder. Такие выражения заменяются на строки. Используются для получения заданных администратором значений из web.config файла Например, если нужно получить значение названное appName из раздела файла web.config, то нужно записать:

Пример: " " Первая часть выражения (до :) это имя построителя выражения, которые должны быть зарегистрированы –AppSettingsExpressionBuilder –ResourceExpressionBuilder –ConnectionStringsExpressionBuilder Например:

Различие между # и $ связыванием Для $ выражений не нужно вызывать метод DataBind(), чтобы выполнить выражение. Оно всегда выполняется при рендеринге страницы. В отличии от # выражений, $ вырадения не могут вставляться в любое место страницы. Они могут быть записаны только в тэгах эл. управления для задания его свойств. Если нужно показать значение $ выражения в виде обычного текста, то его нужно поместить в ЭУ Literal:

Связывание с множеством значений (repeated-value binding) Позволяет связать набор значений с ЭУ. Набор значений представляется объектом данных, являющийся коллекцией. Это может быть коллекция объектов собственных классов (например, обычный ArrayList или Hashtable) или коллекцией записей (rows) (например, DataReader или DataSet). В ASP.NET имеется несколько базовых списочных ЭУ, которые поддерживают множественное связывание: –все ЭУ которые формируют тэги, включая такие ЭУ, как HtmlSelect, ListBox и DropDownList; –ЭУ CheckBoxList and RadioButtonList, которые формируют каждый дочерний ЭУ в отдельный check box или radio button; –ЭУ BulletedList, который создает список нумерованный или маркированный список элементов. Все эти ЭУ отображают одно свойство объекта из связанного множества.

Связывание ЭУ с коллекцией данных Списочный ЭУ Array ArrayList DataReader DataTable Коллекция Array ArrayList.. ID Name... DataSource DataTextField DataValueField Элементы коллекции 1.Создать соединение 2.Создать команду 3.Создать объект - DataReader - DataTable - DataView БД

Используемые для множественного связывания свойства СвойствоОписание DataSourceСсылка на объект, который содержит коллекцию элементов. Этот объект должен реализовывать интерфейс, который поддерживает связывание данных, обычно это ICollection. DataSourceIDВместо задания в программе объекта данных, можно связать списочный элемент с ЭУ, который является источником данных, используя это свойство. Источник данных будет создавать требуемый объект данных автоматически. DataTextFieldЭУ может показать только одно значение для каждого элемента данных. Свойство DataTextField задает поле (при работе с записями) или свойство (при работе с объектами) элемента данных, которое содержит значение для отображения на странице.

Используемые свойства (продолжение) СвойствоОписание DataText - FormatString Это свойство задает формат отображения каждого элемента DataTextValue. DataValueFieldЭто свойство аналогично свойству DataTextField, но заданное значение элемента данных не отображается на странице, а сохраняется в атрибуте value используемого HTML тэга. Это позволяет получить данное значением в коде программы. Основное назначение данного свойства хранить уникальные ID или первичные ключи, чтобы их можно было использовать для получения дополнительных данных, когда пользователь выберет данных элемент.

Связывание с простыми списками данных (repeated-value binding) При связывание списка с данными создаются элементы пользовательского интерфейса для каждого элемента списка. Каждый элемент содержит текст (показываемый пользователю) и необязательное значение (которое не показывается) Используется для простых списочных ЭУ: – Единственный или множественный выбор –

Связывание с простыми списками данных Шаги для связывания с простыми списками данных –Создать списочный ЭУ –Создать коллекцию –Задать ЭУ значение DataSource –Задать (необязательно) поля DataTextField и DataValueField –Вызвать метод DataBind()

Пример protected void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) { // Create the data source. Hashtable ht = new Hashtable(); ht.Add("Lasagna", "Key1"); ht.Add("Spaghetti", "Key2"); ht.Add("Pizza", "Key3"); // Set the DataSource property for the controls. Select1.DataSource = ht; Select2.DataSource = ht; Listbox1.DataSource = ht; DropdownList1.DataSource = ht; CheckList1.DataSource = ht; OptionList1.DataSource = ht; // Bind the controls. this.DataBind(); }

Пример источника данных ( Data Source) DataView GetSampleData() { DataSet ds; SqlConnection cxn; SqlDataAdapter adp; cxn = new SqlConnection("server=localhost; " + "uid=sa;pwd=;database=Northwind"); adp = new SqlDataAdapter( "select CategoryID, CategoryName from Categories", cxn); ds = new DataSet(); adp.Fill(ds, "Categories"); return ds.Tables["Categories"].DefaultView; }

Пример связывания со списком данных void Page_Load(object s, EventArgs e) { ListBox1.DataSource = GetSampleData(); ListBox1.DataValueField = "CategoryID"; ListBox1.DataTextField = "CategoryName"; ListBox1.DataBind(); } void Page_Load(object s, EventArgs e) { ListBox1.DataBind(); }

Пример коллекций для связывания с данными using System; using System.Data; using System.Web; using System.Collections.Generic; /// /// Summary description for Car /// public class Car{ public Car() { } public Car(string vin, string make, string model, int year, decimal price){ Vin = vin; Make = make; Model = model; Year = year; Price = price; } private string vin; public string Vin{ get { return vin; } set { vin = value; } } private string make; public string Make { get { return make; } set { make = value; } } private string model; public string Model { get { return model; } set { model = value; } } private int year; public int Year { get { return year; } set { year = value; } } private decimal price; public decimal Price { get { return price; } set { price = value; } } public static List GetList() { List carList = new List (); carList.Add(new Car("1A59B","Chevrolet", "Impala", 1963, M)); carList.Add(new Car("9B25T","Ford", "F-250", 1970, M)); carList.Add(new Car("3H13R","BMW", "Z4", 2006, M)); carList.Add(new Car("7D67A","Mazda", "Miata", 2003, M)); carList.Add(new Car("4T21N","VW", "Beetle", 1956, M)); return carList; }

Связывание с простыми списками данных Демонстрация : DataBinding2.aspx –Связывание с простыми списками данных

Связывание ЭУ с источником данных Списочный ЭУ... Источник данных - DataSource ID Name... DataSourceID DataTextField DataValueField Элементы коллекции БД

Типы элементов – источников данных для работы с табличными источниками данных –SqlDataSource, –AccessDataSource и –ObjectDataSource для работы с иерархическими данными –XmlDataSource и –SiteMapDataSource

Пример описания источника данных

Класс SqlDataSource объединяет в себе возможности SqlConnection и SqlDataAdapter (плюс дополнительные).

Задание строки подключения в файле web.config

Связывание с Базой Данных Связывание с данными можно использовать для занесения данных в ЭУ из базы данных –Каждый ЭУ соответствует строке Рекомендуется связывание с DataReader Можно связывать с DataView для DataSet Значение и текст задается в свойствах DataValueField и DataTextField, соответственно. –Каждое из них соответствует колонке

Связывание с Базой Данных Пример: DataBinding3.aspx –Связывание с данными из базы данных

Сложные элементы управления GridView - используемый для разных целей табличный ЭУ, для отображения больших таблиц информации. Он поддерживает выбор, редактирование, сортировку и разделение на страницы. GridView один из самых тяжелых ЭУ ASP.NET. Он является наследником ЭУ DataGrid. DetailsView - идеальный для отображения только одной записи, в виде таблицы, которая имеет одну строку, для одного поля записи. DetailsView поддерживает ЭУ редактирования и разделения на страницы, что позволяет просматривать последовательность записей. FormView - аналогичен DetailsView, показывает одновременно только одну запись, поддерживает редактирование и предоставляет ЭУ разбивки на страницы для перемещения через наборы записей. Отличие FormView состоит в том, что он основан на шаблонах, которые позволяют объединять поля более гибким способом, а не только в виде таблицы. ListView – заменяет ЭУ Repeater, который был ранее в ASP.NET since.

Пример GridView

Пример DetailsView с разбивкой по страницам

Элемент управления GridView

Пример: Включаем в страницу ЭУ В программе создаем DataReader string sql = "SELECT EmployeeID, FirstName, LastName, Title, City FROM Employees"; …. Подключаем DataReader к ЭУ grid.DataSource = reader; grid.DataBind();

Связывание с отдельными столбцами Связывание указанных столбцов в источнике данных –Объявить –Объявить его коллекцию Columns –Задать его свойство DataSource –Вызвать его метод DataBind()

Пример описания GridView ...

Пример описания GridView (2)

Автоматическая разбивка на страницы в GridView ...

Разбивка на страницы

Использование шаблонов в GridView Для размещения нескольких полей в одной ячейке или различного настраивания содержания ячеек, используя HTML тэги и серверные ЭУ, используются шаблоны - TemplateField. Шаблон TemplateField позволяют полностью оприсать содержание ячеек в колонке. В шаблоне можно добавлять тэги ЭУ, произвольные HTML элементы и выражения связывания с данными. Например: если нужно объединить поля first name, last name, и courtesy, то можно описать следующий ItemTemplate: В этом случае, при связывании GridView, он выбирает данные из источника данных и анализирует коллекцию элементов шаблона. Он обрабатывает ItemTemplate для каждого элемента данных, оценивает data binding выражения и добавляет описанные HTML в формируемую таблицу.

Выражение Eval( ) Выражение Eval() используется при описании шаблона. Оно является статическим методом класса System.Web.UI.DataBinder. Данный метод Eval() автоматически выбирает данные, которые связаны с текущей строкой, используя технологию отражения (reflection) для поиска соответствий. В данном выражении можно форматировать вывод данных. Например:

Пример

Book Cover

Редактирование шаблонов в VisualStudio 1.Создать GridView хотя бы с одним шаблоном колонки. 2.Выбрать Edit Templates в смарт тэге GridView. Выполнится переключение GridView в режим редактирования шаблонов. 3.В smart tag использовать drop-down Display list для выбора o шаблона, который будет редактироваться (см. рис.). 4.You can choose either of the two templates that apply to the whole GridView (EmptyDataTemplate or PagerTemplate), or you can choose a specific template for one of the template columns. 5.Enter your content in the control. You can type in static content, drag-and-drop controls, и т.д. 6.When youre finished, choose End Template Editing from the smart tag.

Связывание с методом Преимуществом шаблонов является то, что они могут использовать выражения связывания с данными. Например, можно сделать колонку, где показывается иконка для каждой строки. Требуется использовать разные иконки для разных строк. Например, показывать «птичку», когда есть большие запасы конкретного товара (> 50 ед.) и «крестик» когда запас полностью исчерпан. ' alt="Status" /> protected string GetStatusPicture(object dataItem) { int units = Int32.Parse(DataBinder.Eval(dataItem, "UnitsInStock").ToString()); if (units == 0) return "Cancel.gif"; else if (units > 50) return "OK.gif"; else return "blank.gif"; }

Типы шаблонов HeaderTemplate - Determines the appearance and content of the header cell FooterTemplate - Determines the appearance and content of the footer cell ItemTemplate - Determines the appearance and content of each data cell (if you arent using the AlternatingItemTemplate) or every odd-numbered data cell (if you are) AlternatingItemTemplate - Used in conjunction with the ItemTemplate to format evennumbered and odd-numbered rows differently EditItemTemplate Determines - the appearance and controls used in edit mode InsertItemTemplate - Determines the appearance and controls used when inserting a new record

Проблема с событиями шаблона В некоторых случаях требуется обработать событие, которое инициируется ЭУ добавленным шаблоном. Например, в предыдущем примере иконку можно заменить clickable image link, с помощью ImageButton control. Это просто сделать: Проблема в том, что в GridView создается много копий таких ЭУ, по одной для каждого элемента данных.Когда ImageButton нажимается нужно уметь определить, какой записи принадлежал нажатый элемент. Решением этой проблемы может быть использование события GridView, не содержащего кнопок. Для этих целей используется событие GridView.RowCommand, так как оно инициируется когда любая кнопка будет нажата в любом шаблоне.

Обработка событий шаблона Для этого используются два строковых свойства всех ЭУ типа button: –CommandName задает описательное имя для выделения нажатия на нужные ImageButton от нажатий других элементов GridView –CommandArgument задает специфичный для строки данных элемент, который можно использовать для определения строки, которая была выбрана. Можно задать эту информацию используя data binding expression. Например: Такие события могут быть обработаны следующим образом: protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "StatusClick") lblInfo.Text = "You clicked product #" + e.CommandArgument; }

Редактирование записей с помощью шаблона Самый простой способ это добавить CommandField колонку со свойством ShowEditButton = ue (или задать свойство GridView.AutoGenerateEditButton=true). В обоих случаях получаем специальную колонку, в которой содержатся команды редактирования (editing commands). Вначале эта колонка будет содержать ссылку, с именем Edit в каждой записи. Когда пользователь щелкнет по этой ссылке, то каждое текстовое поле записи (label) будет заменен text box, если это поле не помечено, как read-only. Стандартная поддержка редактирования имеет следующие ограничения: Не всегда удобно редактировать значения с помощью text box: с некоторыми типами данных лучше работать используя другие ЭУ (например, drop-down lists), для больших текстовых полей нужны multiline text boxes и т.д. Не выполняет проверка : Нужно выполнять проверку вводимых данных. Это можно сделать добавляя валидаторы к EditItemTemplate. Часто стандартное редактирование не очень хорошо выглядит: Строка ЭУ text box по всей таблице занимает слишком много места и редко выглядит профессионально. В колонках с шаблонами таких проблем нет. Вместо этого явно задаются ЭУ редактирования и их размещение с помощью EditItemTemplate. Конечгно, в некоторой степени это трудоемкий процесс.

Пример шаблона редактирования -,, ' runat="server" id="textBox" TextMode="MultiLine" Width="413px" /> При связывании редактируемого значения с ЭУ нужно использовать метод Bind() в data binding expression вместо обычного Eval() метода. Только Bind() метод создает двустороннюю связь, гарантирующую, что изменяемое значение будет отправлено назад на сервер.

Шаблона редактирования поля Notes

Задание источника данных Также важно помнить, что когда GridView передает изменения, то он будет передавать только связанные, редактируемые параметры. В рассмотренном примере, GridView будет передавать назад один для поля Notes. Это важно помнить, так как при записи параметризованной update command (если используется SqlDataSource), нужно использовать только один параметр, как показано ниже:

Использование ЭУ DropDownList - ,, ' runat="server" id="textBox" TextMode="MultiLine" Width="413px" /> protected string[] TitlesOfCourtesy { get { return new string[]{"Mr.", "Dr.", "Ms.", "Mrs."}; } }

Необходимое дополнение Now you have a list box that is populated in edit mode, with the correct item automatically selected. However, if you change the selection, the value isnt sent back to the data source. In this example, you could tackle the problem by using the Bind() method with the SelectedValue property, because the text in the control exactly corresponds to the text you want to commit to the record. However, sometimes life isnt as easy, because you need to translate the value into a different database representation. In this situation, the only option is to handle the RowUpdating event, find the list control in the current row, and extract the text. You can then dynamically add the extra parameter, as shown here: protected void gridEmployees_RowUpdating(object sender, GridViewUpdateEventArgs e) { // Get the reference to the list control. DropDownList title = (DropDownList) (gridEmployees.Rows[e.RowIndex].FindControl("EditTitle")); // Add it to the parameters. e.NewValues.Add("TitleOfCourtesy", title.Text); } The UpdateCommand in the SqlDataSource must also be updated to use parameter: UpdateCommand="UPDATE Employees SET WHERE

Элемент управления ListView

Шаблоны ListView ItemTemplate - Sets the content of every data item (if you arent using the AlternatingItemTemplate) or every odd-numbered data cell (if you are). AlternatingItemTemplate - Used in conjunction with the ItemTemplate to format evennumbered and odd-numbered rows differently. ItemSeparatorTemplate - Sets the content of the separator thats drawn between items. SelectedItemTemplate - Sets the content of the item thats currently selected. You can use the same content as the ItemSeparatorTemplate, but with different formatting to make it stand out, or you can choose to show an expanded display with additional details for the selected item. EditItemTemplate - Sets the controls used for an item in edit mode. InsertItemTemplate - Sets the controls used to insert a new item. LayoutTemplate - Sets the markup that wraps your list of items. GroupTemplate - Sets the markup that wraps each group of items, if youre using the grouping feature. GroupSeparatorTemplate - Sets the content of the separator thats drawn between groups of items. EmptyItemTemplate - Sets the content thats used to fill empty values in the last group, if youre using grouping. For example, if you create groups of 5 and your data source is a collection of 13 objects, there are 2 items missing from the last group. EmptyDataTemplate - Sets the markup thats used if the bound data object is empty (doesnt contain any records or objects).

Пример -,,

Элемент управления DetailsView

Описание ЭУ DetailsView......

Редактирование записей с помощью DetailsView Свойства AutoGenerateDeleteButton, AutoGenerateEditButton и AutoGenerateInsertButton ЭУ DetailsView добавляют CommandField в нижней части DetailsView с ссылками на эти задачи.

FormView FormView является ЭУ, использующим шаблоны для отображения и редактирования отдельной записи. Этот ЭУ использует модель шаблонов, которая соответствует модели TemplateField в GridView. Имеются следующие шаблоны: –ItemTemplate –EditItemTemplate –InsertItemTemplate –FooterTemplate –HeaderTemplate –EmptyDataTemplate –PagerTemplate

Пример использования шаблонов с FormView -,,

Результат использования шаблонов

Элемент управления FormView