Walkthrough: Adding Dynamic Behavior to Templated Data-Bound Controls
Introduction
You can use ASP.NET Dynamic Data with templated data-bound controls such as DynamicListView and DynamicFormView. By working with templates, you can have complete control over the layout and appearance of the data in the control.
When you work with templated data-bound controls, you can use the following Dynamic Data controls:
These controls take advantage of the following Dynamic Data features:
-
Automatically rendering the proper control for a field, based on the data type.
-
Control templates for rendering each data type, which can be globally modified for the entire application.
-
Providing built-in data validation based on the database schema. You can also add validation types by customizing the data model. For more information, see Adding Validation to the Data Model.
-
Customizing data rendering for individual fields by using attributes in the data model or by using the RenderHint property. For more information about customizing the default rendering, see Customizing ASP.NET Dynamic Data Rendering.
In addition to the DynamicListView and DynamicFormView controls, you can also use these controls in a DynamicTemplateField field of a DynamicGridView or a DynamicDetailsView control.
The following example shows a DynamicFormView control used with Dynamic Data.
The following example shows a DynamicListView control used with Dynamic Data.
In order to complete the examples in this topic, you need the following:
To use Dynamic Data controls with the DynamicListView or DynamicFormView control
-
In Solution Explorer, right-click the project and select Add New Item.
-
Under Visual Studio installed templates, select Web Form.
-
In the Name box, enter TemplatedControlPage.aspx.
-
Add a LinqDataSource control to the page.
-
Set the LinqDataSource control's TableName property to the table that you want to use and the ContextTypeName property to the appropriate data context, as shown in the following example:
<asp:LinqDataSource ID=" LinqDataSource1"
TableName="Products" ContextTypeName="NorthwindDataContext"
runat="server">
</asp:LinqDataSource>
-
Add a DynamicListView or DynamicFormView control to the page.
-
Set the control's DataSourceID property to the ID of the LinqDataSource control.
-
If you are working with a DynamicListView control, set the InsertItemPosition property to a value different than None, as in this example:
<asp:DynamicListView ID="ListView1"
DataSourceID="LinqDataSource1" InsertItemPosition="FirstItem"
runat="server">
</asp:DynamicListView>
This enables the insert operation on the control.
-
If you are working with a DynamicListView control, add a LayoutTemplate template to the control and add content to this template.
The following example shows how to create a table layout and add a DataPager control for pagination.
<LayoutTemplate>
<table runat="server" id="tblProducts">
<tr runat="server" id="itemPlaceholder" />
</table>
<asp:DataPager runat="server" QueryStringField="page">
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</LayoutTemplate>
-
Add an ItemTemplate template to the data-bound control.
This template is used to display data.
-
Add a LinkButton control to the ItemTemplate template.
-
Set the button's CommandName property to "Edit" to enable edit operations on the data-bound control, and set the button's CausesValidation property to false.
When the user clicks the button, the item will switch to edit mode.
-
If you are working with a DynamicFormView control, add another LinkButton control to the ItemTemplate template and set its CommandName property to "New" to enable insert operations on the data-bound control.
When the user clicks the button, the item will switch to insert mode.
-
Add a DynamicControl control to the ItemTemplate template of the data-bound control for each column that you want to display.
The DataField property of the DynamicControl control must be set to the name of the column that you want to display, as shown in the following example:
<asp:DynamicControl
DataField="ProductName"
runat="server" />
-
To enable users to modify data, add an EditItemTemplate template to the data-bound control.
-
Add two LinkButton controls to the EditItemTemplate template of the data-bound control.
-
Set the first button's CommandName property to "Update" and set the second button's CommandName property to "Cancel".
This enables users to save the changes in the data source or to cancel the edit operation.
-
Set the second button's CausesValidation property to false.
-
Add a DynamicEditControl control to the EditItemTemplate template of the data-bound control for each column that needs to be editable.
The DataField property of the DynamicEditControl control must be set to the name of the column that will be updated, as shown in the following example:
<asp:DynamicEditControl
DataField="ProductName"
runat="server" />
-
To enable users to add data, add an InsertItemTemplate template to the data-bound control.
-
Add two LinkButton controls to the InsertItemTemplate template of the data-bound control.
-
Set the first button's CommandName property to "Insert" and set the second button's CommandName property to "Cancel".
This will enable users to save the record in the data source or to clear the data entry form.
-
Set the second button's CausesValidation property to false.
-
Add a DynamicInsertControl control to the InsertItemTemplate template of the data-bound control for each column for which the user will add values in a new record.
The DataField property of the DynamicInsertControl control must be set to the name of the column that will be inserted, as shown in the following example:
<asp:DynamicInsertControl
DataField="ProductName"
runat="server" />
This topic is ASP.NET Extensions documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases.