Implement data binding in the template in ASP. NET 2.0

Implement data binding in the template in ASP. NET 2.0

(Date added: 2824-9 clicks)

Templated data binding controls provide fundamental flexibility for displaying data on pages. You may still remember several templated controls (such as datalist and repeater controls) in ASP. NET v1.x ). ASP. NET 2.0 still supports these controls, but the syntax for binding data in the template has been simplified and improved. This article describes how to bind data to a data binding control template. Data Binding expression ASP. NET 2.0 improves the Data Binding operation in the template. It simplifies the Data Binding syntax databinder. eval (container. dataitem, fieldname) in v1.x to eval (fieldname ). The eval method, like databinder. Eval, can accept an optional formatted string parameter. Shortened eval syntax and databinder. the difference between Eval is that Eval will automatically parse fields based on the dataitem attribute of the most recent container object (such as datalistitem), while databinder. eval needs to use parameters to specify the container. For this reason, Eval can only be used in the template of the data-bound control, but cannot be used in the page layer. Of course, the ASP. NET 2.0 page still supports databinder. Eval. You can use it in environments that do not support simplified eval syntax. The following example demonstrates how to bind a new simplified eval Data Binding syntax to the image, label, and hyperlink controls in the datalist data item template (itemtemplate. <Asp: datalist id = "datalist1" repeatcolumns = "5" width = "600" runat = "server" performanceid = "objectperformance1"> <Itemtemplate> <Asp: hyperlink id = "hyperlink1" runat = "server" navigateurl = ''<% # eval (" photoid "," photoformviewplain. aspx? Id = {0} ") %>''> <Asp: Image id = "image1" runat = "server" imageurl = ''<% # eval (" FILENAME "," images/thumbs/{0 }") %> ''/> </ASP: hyperlink> <Asp: Label id = "captionlabel" runat = "server" text = ''<% # eval (" caption ") %>''/> </Itemtemplate> </ASP: datalist> <br/> <Asp: objectdatasource id = "objectperformance1" runat = "server" typename = "datacomponenttableadapters. photostableadapter" selectmethod = "getphotosforalbum"> Data Binding can also be part of the theme definition of the control, so that we can freely change the layout and appearance of the templated control by changing the theme. However, the theme template can only use eval (or bind discussed later ). Bind to any userCodeIs forbidden. Formview Control the datalist control iterates on the data items from the data source and outputs The itemtemplate (data item template) for each data item ). This is useful for displaying the data item list, but you usually want to bind a single data item in a form. To achieve this, ASP. NET 2.0 introduces the formview control, which can display a data item each time in any template. The main difference between detailsview and formview is that detailsview has a built-in table display mode, while formview needs to use a custom display template. In other aspects, the formview and detailsview object models are very similar. The following example shows a formview control bound to objectdatasource. The itemtemplate attribute of the formview contains the image, label, and hyperlink controls bound to the data, which is similar to the preceding datalist example. <Asp: formview id = "formview1" runat = "server" performanceid = "objectperformance1"> <Itemtemplate> <Asp: Label id = "captionlabel" runat = "server" text = ''<% # eval (" caption ") %> ''font-size =" 32pt "/> <br/> <Asp: Image id = "image1" runat = "server" imageurl = ''<% # eval (" FILENAME "," images/{0 }") %> ''/> <Asp: hyperlink id = "hyperlink1" text = "back to album" navigateurl = ''<% # eval (" albumid "," photosdatalist. aspx? Id = {0} ") %>'' runat = "server"/> </Itemtemplate> </ASP: formview> <Asp: objectdatasource id = "objectdatasource1" runat = "server" typename = "datacomponenttableadapters. photostableadapter" selectmethod = "getphoto"> <Selectparameters> <Asp: querystringparameter name = "photoid" defaultvalue = "9" querystringfield = "ID"/> </Selectparameters> </ASP: objectdatasource> Similar to detailsview, formview also tracks the currently displayed data items. However, when the data source returns to the list, we can select to support paging operations for multiple data items. The following example shows a formview with the paging function. <Asp: formview id = "formview1" runat = "server" performanceid = "sqlperformance1" Headertext = "books for author" allowpaging = "true"> <Itemtemplate> <Asp: Image id = "image1" imageurl = ''<% # eval (" title_id ","~ /Images 02.16.gif ") %> ''runat =" server "/> <Asp: Label id = "label1" font-size = "1.2em" font-bold = "true" text = ''<% # eval (" title ") %> ''runat = "server"/> <Asp: Label id = "label2" text = ''<% # eval (" price "," {0: c }") %> ''runat = "server"/> </Itemtemplate> </ASP: formview> <Asp: sqldatasource id = "sqldatasource1" runat = "server" selectcommand = "select DBO. authors. au_id, DBO. titles. title_id, DBO. titles. title, DBO. titles. type, DBO. titles. price, DBO. titles. notes from DBO. authors inner join DBO. titleauthor on DBO. authors. au_id = DBO. titleauthor. au_id inner join DBO. titles on DBO. titleauthor. title_id = DBO. titles. title_id where (DBO. authors. au_id = @ au_id )" Connectionstring = "<% $ connectionstrings: pubs %>"> <Selectparameters> <Asp: querystringparameter name = "au_id" defaultvalue = "213-46-8915" querystringfield = "ID"/> </Selectparameters> </ASP: sqldatasource> Bidirectional data binding Formview supports automatic update, insert, and delete operations (similar to detailsview) through related data source controls ). To define the UI for editing or inserting, you must define the edititemtemplate or insertitemtemplate in addition to the itemtemplate. In this template, You can bind the input control (such as text box, check box, or drop-down list) to the fields of the data source. Data Binding in these templates uses the "two-way" Data Binding syntax, allowing formview to extract values from the input control of the template and pass them to the data source. These data binding operations replace eval with the new BIND (fieldname) syntax. Note: The ID attribute must be set for the data binding control using the BIND syntax. When the gridview or detailsview performs an update or insert operation (columns or fields of these controls define boundfields and bind fields), The gridview or detailsview is responsible for setting up the input UI in edit or insert mode, therefore, it can automatically extract these values and pass them to the data source. Because the template contains any custom UI controls, the bidirectional data binding syntax is necessary to ensure that the templated controls (such as formview) are updated, inserted, or deleted, know the control values that should be extracted from the template. You can still use the eval statement in edititemtemplate to bind data and pass values to the data source. Please note that formview and detailsview support the datakeynames attribute like gridview. It stores the original values passed to the primary key Dictionary of the update/delete operation, even if these values are not displayed. Formview supports the defaultmode attribute. It can specify the default displayed template, but by default, formview is in read-only mode and displays the itemtemplate template. To convert the UI from read-only mode to edit or insert mode, you can add a button control to the template and set the commandname attribute of the button to edit or new. In the edititemtemplate template, you can add a button to set commandname to update or cancel to submit or terminate the update operation. Similarly, you can add a button and set commandname to insert or cancel to submit or terminate the insert operation. The following example demonstrates the formview that defines the itemtemplate and edititemtemplate templates. The itemtemplate template contains the controls bound using eval (bidirectional), while the edititemtemplate template contains the text box controls bound using bind statements in bidirectional mode. The primary key field (photoid) is stored in viewstate using the datakeynames attribute. This formview contains buttons for switching between templates. <Asp: formview id = "formview1" runat = "server" performanceid = "objectperformance1" datakeynames = "photoid"> <Edititemtemplate> <B> enter a new caption: </B> <Asp: textbox text = ''<% # BIND (" caption ") %> ''' runat =" server "id =" captiontextbox "/> & nbsp; <asp: button id = "button1" runat = "server" text = "Update" commandname = "Update"/> <Asp: button id = "button2" runat = "server" text = "cancel" commandname = "cancel"/> </Edititemtemplate> <Itemtemplate> <Asp: Label id = "captionlabel" runat = "server" text = ''<% # eval (" caption ") %> ''font-size =" 32pt "/> <br/> <Asp: Image id = "image1" runat = "server" imageurl = ''<% # eval (" FILENAME "," images/{0 }") %> ''/> <br/> <Asp: button id = "button3" runat = "server" text = "Edit caption... "commandname =" edit "/> <asp: hyperlink id =" hyperlink1 "text =" back to album "navigateurl ='' <% # eval ("albumid", "photosdatalist. aspx? Id = {0} ") %>'' runat = "server"/> </Itemtemplate> </ASP: formview> <Asp: objectdatasource id = "objectperformance1" runat = "server" typename = "datacomponenttableadapters. photostableadapter "selectmethod =" getphoto "updatemethod =" updatecaption "oldvaluesparameterformatstring =" original _ {0} "> <Updateparameters> <Asp: parameter name = "caption"/> <Asp: parameter name = "original_photoid"/> </Updateparameters> <Selectparameters> <Asp: querystringparameter name = "photoid" defaultvalue = "9" querystringfield = "ID"/> </Selectparameters> </ASP: objectdatasource> Gridview and detailsview also support templated UI, which is implemented by adding templatefield to columns or fields sets. Templatefield supports the use of itemtemplate, edititemtemplate, and insertitemtemplate (only available in detailsview) to specify the UI for fields in different display modes of the control. Similar to the formview example above, bidirectional data binding in edititemtemplate or insertitemtemplate also allows the gridview or detailsview to extract values from the controls of these templates. The most common purpose of templatefield is to add a validator control to edititemtemplate for publicly verifying the gridview or detailsview operations. The following example demonstrates this technology. ...... <Asp: gridview id = "gridview1" runat = "server" performanceid = "objectperformance1" autogeneratecolumns = "false" allowpaging = "true" allowsorting = "true" datakeynames = "albumid"> <Columns> <Asp: commandfield showeditbutton = "true"/> <Asp: boundfield readonly = "true" headertext = "albumid" datafield = "albumid" sortexpression = "albumid"/> <Asp: templatefield headertext = "albumname" sortexpression = "albumname" itemstyle-wrap = "false"> <Itemtemplate> <Asp: Label id = "label1" runat = "server" text = ''<% # eval (" albumname ") %>''> </ASP: Label> </Itemtemplate> <Edititemtemplate> <Asp: textbox id = "textbox1" runat = "server" text = ''<% # BIND (" albumname ") %>''> </ASP: textbox> <Asp: requiredfieldvalidator controltovalidate = "textbox1" errormessage = "albumname cannot be empty" id = "Custom" display = "dynamic" runat = "server"> * </ASP: requiredfieldvalidator> </Edititemtemplate> </ASP: templatefield> ...... </ASP: gridview> <br/> <Asp: validationsummary id = "validationsummary1" runat = "server"/> <Asp: objectdatasource id = "objectperformance1" runat = "server" convertnulltodbnull = "true" Typename = "datacomponenttableadapters. albumstableadapter" selectmethod = "getalbumsbyowner" updatemethod = "Update" oldvaluesparameterformatstring = "original _ {0}"> ...... </ASP: objectdatasource> Another use of templatefield is to customize controls for the input values of the columns/fields in the gridview or detailsview. For example, you can place a dropdownlist in edititemtemplate of templatefield, allowing users to select from the pre-defined value list. The following example demonstrates this technology. Note that the drop-down list in the example is bound to your own data source control to dynamically obtain the list value. ''> ''>