'

Лекция 7

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

Правильные выражения для Single-Value Binding Содержанием выражений связывания могут быть только: значения свойств, полей класса и результаты работы методов; результат арифметического или символьного выражения И т.п. Например <%# GetUserName() %> <%# 1 + (2 * 20) %> <%# "John " + "Smith" %> <%# Request.Browser.Browser %>


Слайд 9

Выполнение Single-Value Binding Для выполнения этого выражения нужно вызвать метод Page.DataBind(). При выполнении этого метода будут выполняться все такие выражения на странице и заменяться на полученные значения (в данном случае на значение переменной или свойства). Если этот метод не вызывать, то выражения связывания просто не будут передаваться клиенту. <asp:Label id=label1 Text=<%# “The result is “ + (1 + 2) + “, the time is “ + DateTime.Now.ToLongTimeString() %> runat="server" /> public void Page_Load(object s, EventArgs e) { if (! Page.IsPostBack) Page.DataBind(); }


Слайд 10

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


Слайд 11

Пример использования Single-Value Binding <html xmlns="http://www.w3.org/1999/xhtml"> <body> <form method="post" runat="server"> <asp:Image ID="image1" runat="server" ImageUrl='<%# FilePath %>' /> <br /> <asp:Label ID="label1" runat="server" Text='<%# FilePath %>' /> <br /> <asp:TextBox ID="textBox1" runat="server" Text='<%# GetFilePath() %>' /> <br /> <asp:HyperLink ID="hyperLink1" runat="server" NavigateUrl='<%# LogoPath.Value %>' Font-Bold="True" Text="Show logo" /> <br /> <input type="hidden" ID="LogoPath" runat="server" value="apress.gif"> <b><%# FilePath %></b><br /> <img src="<%# GetFilePath() %>"> </form> </body> </html> protected string GetFilePath() { return "apress.gif"; } protected string FilePath{ get { return "apress.gif"; } }


Слайд 12

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


Слайд 13

Пример <html xmlns="http://www.w3.org/1999/xhtml"> <body> <form method="post" runat="server"> <asp:Image ID="image1" runat="server" ImageUrl='<%# FilePath %>' /> <br /> <asp:Label ID="label1" runat="server" Text='<%# FilePath %>' /> <br /> <asp:TextBox ID="textBox1" runat="server" Text='<%# GetFilePath() %>' /> <br /> <asp:HyperLink ID="hyperLink1" runat="server" NavigateUrl='<%# LogoPath.Value %>' Font-Bold="True" Text="Show logo" /> <br /> <input type="hidden" ID="LogoPath" runat="server" value="apress.gif"> <b><%# FilePath %></b><br /> <img src="<%# GetFilePath() %>"> </form> </body> </html>


Слайд 14

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


Слайд 15

$ выражения связывания Имеют вид <%$ … %> Выражения записанные в <%$ … %> вычисляются, когда формируется ответ на запрос (рендеринг) с помощью “expression builder”. Такие выражения заменяются на строки. Используются для получения заданных администратором значений из web.config файла Например, если нужно получить значение названное appName из раздела <appSettings> файла web.config, то нужно записать: <asp:Literal Runat="server" Text="<%$ AppSettings:appName %>" />


Слайд 16

Пример: "<%$ AppSettings:appName %>" Первая часть выражения (до :) это имя построителя выражения, которые должны быть зарегистрированы AppSettingsExpressionBuilder ResourceExpressionBuilder ConnectionStringsExpressionBuilder Например: <asp:SqlDataSource ConnectionString= "<%$ ConnectionStrings:Northwind %>" ... />


Слайд 17

Различие между # и $ связыванием Для $ выражений не нужно вызывать метод DataBind(), чтобы выполнить выражение. Оно всегда выполняется при рендеринге страницы. В отличии от # выражений, $ вырадения не могут вставляться в любое место страницы. Они могут быть записаны только в тэгах эл. управления для задания его свойств. Если нужно показать значение $ выражения в виде обычного текста, то его нужно поместить в ЭУ Literal: <asp:Literal Runat="server" Text="<%$ AppSettings:appName %>" />


Слайд 18

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


Слайд 19

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


Слайд 20

Используемые для множественного связывания свойства


Слайд 21

Используемые свойства (продолжение)


Слайд 22

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


Слайд 23

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


Слайд 24

Пример 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(); }


Слайд 25


Слайд 26

Пример источника данных (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; }


Слайд 27

Пример связывания со списком данных void Page_Load(object s, EventArgs e) { ListBox1.DataSource = GetSampleData(); ListBox1.DataValueField = "CategoryID"; ListBox1.DataTextField = "CategoryName"; ListBox1.DataBind(); } <asp:ListBox id="ListBox1" runat="server" /> void Page_Load(object s, EventArgs e) { ListBox1.DataBind(); } <asp:ListBox id="ListBox1" runat="server" DataSource=<%# GetSampleData() %> DataValueField=“CategoryID” DataTextField=“CategoryName” />


Слайд 28

Пример коллекций для связывания с данными using System; using System.Data; using System.Web; using System.Collections.Generic; /// <summary> /// Summary description for Car /// </summary> 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<Car> GetList() { List<Car> carList = new List<Car>(); carList.Add(new Car("1A59B","Chevrolet", "Impala", 1963, 1125.00M)); carList.Add(new Car("9B25T","Ford", "F-250", 1970, 1595.00M)); carList.Add(new Car("3H13R","BMW", "Z4", 2006, 55123.00M)); carList.Add(new Car("7D67A","Mazda", "Miata", 2003, 28250.00M)); carList.Add(new Car("4T21N","VW", "Beetle", 1956, 500.00M)); return carList; } }


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

Пример описания источника данных <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/guestbook.mdb" SelectCommand="SELECT [WriteDate], [UserName], [UserMail], [Message] FROM [guestbook]”> </asp:AccessDataSource>


Слайд 33

<asp:SqlDataSource ID="sourceEmployees" runat="server" ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:Northwind %>" SelectCommand="SELECT EmployeeID, FirstName, LastName, Title, City FROM Employees" UpdateCommand="UPDATE Employees SET FirstName=@FirstName, LastName=@LastName, Title=@Title, City=@City FROM Employees WHERE EmployeeID=@EmployeeID"> </asp:SqlDataSource>


Слайд 34

Класс SqlDataSource объединяет в себе возможности SqlConnection и SqlDataAdapter (плюс дополнительные). <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DemoBaseConnectionString1 %>" ProviderName="<%$ ConnectionStrings:DemoBaseConnectionString1.ProviderName %>" </asp:SqlDataSource>


Слайд 35

Задание строки подключения в файле web.config <add name="DemoBaseConnectionString1" connectionString="Data Source=(local)\SQLEXPRESS;Initial Catalog=DemoBase;Integrated Security=True" providerName="System.Data.SqlClient" />


Слайд 36

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


Слайд 37

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


Слайд 38

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


Слайд 39

Пример GridView


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

Связывание с отдельными столбцами <asp:gridview id=myDataGrid autogeneratecolumns=false runat=server> <Columns> <asp:BoundColumn HeaderText=“Id" DataField="title_id" /> <asp:BoundColumn HeaderText="Title“ DataField="title"/> </Columns> </asp:gridview> Связывание указанных столбцов в источнике данных Объявить <asp:GridView> Объявить его коллекцию Columns Задать его свойство DataSource Вызвать его метод DataBind()


Слайд 44

Пример описания GridView <asp:GridView ID="gridEmployees" runat="server" DataSourceID="sourceEmployees" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="ID" /> <asp:BoundField DataField="FirstName" HeaderText="First Name" /> <asp:BoundField DataField="LastName" HeaderText="Last Name" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:BoundField DataField="City" HeaderText="City" /> </Columns> </asp:GridView> . . . <asp:SqlDataSource ID="sourceEmployees" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" ProviderName="System.Data.SqlClient" SelectCommand= "SELECT EmployeeID, FirstName, LastName, BirthDate, Title, City FROM Employees"> </asp:SqlDataSource>


Слайд 45

Пример описания GridView (2) <asp:GridView ID="GridView1" runat="server" DataSourceID="sourceEmployees" Font-Names="Verdana" Font-Size="X-Small" ForeColor="#333333" CellPadding="4" GridLines="None" AutoGenerateColumns="False"> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="ID"> <ItemStyle Font-Bold="True" BorderWidth="1" /> </asp:BoundField> <asp:BoundField DataField="FirstName" HeaderText="First Name" /> <asp:BoundField DataField="LastName" HeaderText="Last Name" /> <asp:BoundField DataField="City" HeaderText="City"> <ItemStyle BackColor="LightSteelBlue" /> </asp:BoundField> <asp:BoundField DataField="Country" HeaderText="Country"> <ItemStyle BackColor="LightSteelBlue" /> </asp:BoundField> <asp:BoundField DataField="BirthDate" HeaderText="Birth Date" DataFormatString="{0:MM/dd/yyyy}" /> <asp:BoundField DataField="Notes" HeaderText="Notes"> <ItemStyle Wrap="True" Width="400"/> </asp:BoundField> </Columns> </asp:GridView>


Слайд 46


Слайд 47


Слайд 48

Автоматическая разбивка на страницы в GridView <asp:GridView ID="GridView1" runat="server" DataSourceID="sourceEmployees" PageSize="5" AllowPaging="True" ...> ... </asp:GridView>


Слайд 49

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


Слайд 50

Использование шаблонов в GridView Для размещения нескольких полей в одной ячейке или различного настраивания содержания ячеек, используя HTML тэги и серверные ЭУ, используются шаблоны - TemplateField. Шаблон TemplateField позволяют полностью оприсать содержание ячеек в колонке. В шаблоне можно добавлять тэги ЭУ, произвольные HTML элементы и выражения связывания с данными. Например: если нужно объединить поля first name, last name, и courtesy, то можно описать следующий ItemTemplate: <asp:TemplateField HeaderText="Name"> <ItemTemplate> <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %> <%# Eval("LastName") %> </ItemTemplate> </asp:TemplateField> В этом случае, при связывании GridView, он выбирает данные из источника данных и анализирует коллекцию элементов шаблона. Он обрабатывает ItemTemplate для каждого элемента данных, оценивает data binding выражения и добавляет описанные HTML в формируемую таблицу.


Слайд 51

Выражение Eval( ) Выражение Eval() используется при описании шаблона. Оно является статическим методом класса System.Web.UI.DataBinder. Данный метод Eval() автоматически выбирает данные, которые связаны с текущей строкой, используя технологию отражения (reflection) для поиска соответствий. В данном выражении можно форматировать вывод данных. Например: <%# Eval("BirthDate", "{0:MM/dd/yy}") %>


Слайд 52

Пример <asp:GridView ID="gridEmployees" runat="server" DataSourceID="sourceEmployees” AutoGenerateColumns="False" ...> <!-- Styles omitted. --> <Columns> <asp:TemplateField HeaderText="Employees"> <ItemTemplate> <b> <%# Eval("EmployeeID") %> - <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %> <%# Eval("LastName") %> </b> <hr /> <small><i> <%# Eval("Address") %><br /> <%# Eval("City") %>, <%# Eval("Country") %>, <%# Eval("PostalCode") %><br /> <%# Eval("HomePhone") %></i> <br /><br /> <%# Eval("Notes") %> </small> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>


Слайд 53


Слайд 54

<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Title" HeaderText="Title"/> <asp:BoundField DataField="isbn" HeaderText="ISBN"/> <asp:BoundField DataField="Publisher" HeaderText="Publisher"/> <asp:TemplateField> <HeaderTemplate> Book Cover </HeaderTemplate> <ItemTemplate> <img src="UnknownBook.gif“ onerror="this.src='Unknownbook.gif';" onload= "GetBookImage(this, '<%# DataBinder.Eval(Container.DataItem, "isbn") %>');" </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>


Слайд 55


Слайд 56

Редактирование шаблонов в VisualStudio Создать GridView хотя бы с одним шаблоном колонки. Выбрать Edit Templates в смарт тэге GridView. Выполнится переключение GridView в режим редактирования шаблонов. В smart tag использовать drop-down Display list для выбора o шаблона, который будет редактироваться (см. рис.). 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. Enter your content in the control. You can type in static content, drag-and-drop controls, и т.д. When you’re finished, choose End Template Editing from the smart tag.


Слайд 57

Связывание с методом Преимуществом шаблонов является то, что они могут использовать выражения связывания с данными. Например, можно сделать колонку, где показывается иконка для каждой строки. Требуется использовать разные иконки для разных строк. Например, показывать «птичку», когда есть большие запасы конкретного товара (> 50 ед.) и «крестик» когда запас полностью исчерпан. <asp:TemplateField HeaderText="Status"> <ItemTemplate> <img src='<%# GetStatusPicture(Container.DataItem) %>' alt="Status" /> </ItemTemplate> </asp:TemplateField> 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"; }


Слайд 58

Типы шаблонов 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 aren’t 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


Слайд 59

Проблема с событиями шаблона В некоторых случаях требуется обработать событие, которое инициируется ЭУ добавленным шаблоном. Например, в предыдущем примере иконку можно заменить clickable image link, с помощью ImageButton control. Это просто сделать: <asp:TemplateField HeaderText="Status"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# GetStatusPicture(Container.DataItem) %>' /> </ItemTemplate> </asp:TemplateField> Проблема в том, что в GridView создается много копий таких ЭУ, по одной для каждого элемента данных.Когда ImageButton нажимается нужно уметь определить, какой записи принадлежал нажатый элемент. Решением этой проблемы может быть использование события GridView, не содержащего кнопок. Для этих целей используется событие GridView.RowCommand, так как оно инициируется когда любая кнопка будет нажата в любом шаблоне.


Слайд 60

Обработка событий шаблона Для этого используются два строковых свойства всех ЭУ типа button: CommandName задает описательное имя для выделения нажатия на нужные ImageButton от нажатий других элементов GridView CommandArgument задает специфичный для строки данных элемент, который можно использовать для определения строки, которая была выбрана. Можно задать эту информацию используя data binding expression. Например: <asp:TemplateField HeaderText="Status"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# GetStatusPicture(Container.DataItem) %>' CommandName="StatusClick" CommandArgument='<%# Eval("ProductID") %>' /> </ItemTemplate> </asp:TemplateField> Такие события могут быть обработаны следующим образом: protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "StatusClick") lblInfo.Text = "You clicked product #" + e.CommandArgument; }


Слайд 61

Редактирование записей с помощью шаблона Самый простой способ это добавить 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. Конечгно, в некоторой степени это трудоемкий процесс.


Слайд 62

Пример шаблона редактирования <EditItemTemplate> <b> <%# Eval("EmployeeID") %> - <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %> <%# Eval("LastName") %> </b> <hr /> <small><i> <%# Eval("Address") %><br /> <%# Eval("City") %>, <%# Eval("Country") %>, <%# Eval("PostalCode") %><br /> <%# Eval("HomePhone") %></i> <br /><br /> <asp:TextBox Text='<%# Bind("Notes") %>' runat="server" id="textBox" TextMode="MultiLine" Width="413px" /> </small> </EditItemTemplate> При связывании редактируемого значения с ЭУ нужно использовать метод Bind() в data binding expression вместо обычного Eval() метода. Только Bind() метод создает двустороннюю связь, гарантирующую, что изменяемое значение будет отправлено назад на сервер.


Слайд 63

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


Слайд 64

Задание источника данных Также важно помнить, что когда GridView передает изменения, то он будет передавать только связанные, редактируемые параметры. В рассмотренном примере, GridView будет передавать назад один параметр @Notes для поля Notes. Это важно помнить, так как при записи параметризованной update command (если используется SqlDataSource), нужно использовать только один параметр, как показано ниже: <asp:SqlDataSource ID="sourceEmployees" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, FirstName, LastName, Title, City, Country, Notes, Address, Region, PostalCode, HomePhone, TitleOfCourtesy FROM Employees" UpdateCommand="UPDATE Employees SET Notes=@Notes WHERE EmployeeID=@EmployeeID"> </asp:SqlDataSource>


Слайд 65

Использование ЭУ DropDownList <EditItemTemplate> <b> <%# Eval("EmployeeID") %> - <asp:DropDownList runat="server" ID="EditTitle" SelectedIndex='<%# GetSelectedTitle(Eval("TitleOfCourtesy")) %>' DataSource='<%# TitlesOfCourtesy %>' /> <%# Eval("FirstName") %> <%# Eval("LastName") %> </b> <hr /> <small><i> <%# Eval("Address") %><br /> <%# Eval("City") %>, <%# Eval("Country") %>, <%# Eval("PostalCode") %><br /> <%# Eval("HomePhone") %></i> <br /><br /> <asp:TextBox Text='<%# Bind("Notes") %>' runat="server" id="textBox" TextMode="MultiLine" Width="413px" /> </small> </EditItemTemplate> protected string[] TitlesOfCourtesy { get { return new string[]{"Mr.", "Dr.", "Ms.", "Mrs."}; } }


Слайд 66

Необходимое дополнение 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 isn’t 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 isn’t 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 the @TitleOfCourtesy parameter: UpdateCommand="UPDATE Employees SET Notes=@Notes, TitleOfCourtesy=@TitleOfCourtesy WHERE EmployeeID=@EmployeeID"


Слайд 67


Слайд 68

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


Слайд 69

Шаблоны ListView ItemTemplate - Sets the content of every data item (if you aren’t 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 that’s drawn between items. SelectedItemTemplate - Sets the content of the item that’s 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 you’re using the grouping feature. GroupSeparatorTemplate - Sets the content of the separator that’s drawn between groups of items. EmptyItemTemplate - Sets the content that’s used to fill empty values in the last group, if you’re 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 that’s used if the bound data object is empty (doesn’t contain any records or objects).


Слайд 70

Пример <asp:ListView ID="listEmployees" DataSourceID="sourceEmployees" runat="server"> <LayoutTemplate> <table border="1"> <tr id="itemPlaceholder" runat="server" /> </table> </LayoutTemplate> <ItemTemplate> <span> <b> <%# Eval("EmployeeID") %> - <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %> <%# Eval("LastName") %> </b> <hr /> <small> <i><%# Eval("Address") %><br /> <%# Eval("City") %>, <%# Eval("Country") %>, <%# Eval("PostalCode") %><br /> <%# Eval("HomePhone") %></i><br /><br /> <%# Eval("Notes") %> <br /><br /> </small> </span> </ItemTemplate> </asp:ListView>


Слайд 71


Слайд 72

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


Слайд 73

Описание ЭУ DetailsView <asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="sourceEmployees« AutoGenerateRows="False"> <Fields> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:BoundField DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" /> <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" /> ... </Fields> ... </asp:DetailsView>


Слайд 74

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


Слайд 75

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


Слайд 76

Пример использования шаблонов с FormView <asp:FormView ID="FormView1" runat="server" DataSourceID="sourceEmployees"> <ItemTemplate> <b> <%# Eval("EmployeeID") %> - <%# Eval("TitleOfCourtesy") %> <%# Eval("FirstName") %> <%# Eval("LastName") %> </b> <hr /> <small><i> <%# Eval("Address") %><br /> <%# Eval("City") %>, <%# Eval("Country") %>, <%# Eval("PostalCode") %><br /> <%# Eval("HomePhone") %></i> <br /><br /> <%# Eval("Notes") %> <br /><br /> </small> </ItemTemplate> </asp:FormView>


Слайд 77

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


Слайд 78

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


×

HTML:





Ссылка: