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"/> <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.
<Asp: templatefield headertext = "owner" sortexpression = "owner">
<Itemtemplate>
<Asp: Label id = "label2" runat = "server" text = '<% # eval ("owner") %>'> </ASP: Label>
</Itemtemplate>
<Edititemtemplate>
<Asp: dropdownlist performanceid = "objectperformance2" datatextfield = "owner" datavaluefield = "owner" id = "dropdownlist2" runat = "server" selectedvalue = '<% # BIND ("owner ") %> '>
</ASP: dropdownlist>
</Edititemtemplate>
<Itemstyle wrap = "false"/>
</ASP: templatefield>
