Creating Templates for the FormView Web Server Control

Article
12/04/2014

You can customize the FormView control by adding templates that enable the user to view or modify the data displayed by the control. The contents of each template consist of markup, controls with data-binding expressions, and command buttons that change the mode of the FormView control.

Note

For more information about data-binding expressions, see Data-Binding Expressions Overview.

Display Templates

The primary display template for the FormView control is the ItemTemplate template. The ItemTemplate template displays bound data in read-only mode. The controls included in an ItemTemplate are controls that only display data, such as a Label control. The template can also contain command buttons to change the FormView control's mode to insert or edit, or to delete the current record. You bind controls in the template to data using a data-binding expression that includes the Eval method for one-way data binding, as shown in the following example.

<asp:FormView ID="FormView1"
  DataSourceID="SqlDataSource1"
  DataKeyNames="ProductID"     
  RunAt="server">

  <ItemTemplate>
    <table>
      <tr>
        <td align="right"><b>Product ID:</b></td>       
        <td><%# Eval("ProductID") %></td>
      </tr>
      <tr>
        <td align="right"><b>Product Name:</b></td>     
        <td><%# Eval("ProductName") %></td>
      </tr>
      <tr>
        <td align="right"><b>Category ID:</b></td>      
        <td><%# Eval("CategoryID") %></td>
      </tr>
      <tr>
        <td align="right"><b>Quantity Per Unit:</b></td>
        <td><%# Eval("QuantityPerUnit") %></td>
      </tr>
      <tr>
        <td align="right"><b>Unit Price:</b></td>       
        <td><%# Eval("UnitPrice") %></td>
      </tr>
    </table>                 

  </ItemTemplate>                   
</asp:FormView>

<asp:FormView ID="FormView1"
  DataSourceID="SqlDataSource1"
  DataKeyNames="ProductID"     
  RunAt="server">

  <ItemTemplate>
    <table>
      <tr>
        <td align="right"><b>Product ID:</b></td>       
        <td><%# Eval("ProductID") %></td>
      </tr>
      <tr>
        <td align="right"><b>Product Name:</b></td>     
        <td><%# Eval("ProductName") %></td>
      </tr>
      <tr>
        <td align="right"><b>Category ID:</b></td>      
        <td><%# Eval("CategoryID") %></td>
      </tr>
      <tr>
        <td align="right"><b>Quantity Per Unit:</b></td>
        <td><%# Eval("QuantityPerUnit") %></td>
      </tr>
      <tr>
        <td align="right"><b>Unit Price:</b></td>       
        <td><%# Eval("UnitPrice") %></td>
      </tr>
    </table>                 

  </ItemTemplate>                 
</asp:FormView>

The ItemTemplate template can include LinkButton controls that change the mode of the FormView control based on the CommandName value. A CommandName value of New puts the record into insert mode and loads the InsertItemTemplate template, which enables the user to enter values for a new record. You can add a button with a CommandName value of Edit to the ItemTemplate template to put the FormView control into edit mode. A button with a CommandName value of Delete can be added to the ItemTemplate template to enable users to delete the current record from the data source.

By default, the FormView control displays its contents by using an HTML table. The table element in the markup can make it difficult to apply CSS style to the contents of the control. Therefore, you can specify that the FormView control does not use a table element for layout by setting its RenderOuterTable property to false. When the RenderOuterTable property is set to false, the container control that hosts the styles and the styles that are associated with each template is not rendered. This makes it easier for control developers to provide custom CSS style rules for the templates.

The following example shows how to render the contents of the FormView control in a table.

<asp:FormView ID="FormView1" runat="server">
  <ItemTemplate>
      Content!
  </ItemTemplate>
</asp:FormView>

The follow example shows the output to the page:

<table cellspacing="0" border="0" id="FormView1" style="border- 
      collapse:collapse;">
     <tr>
         <td colspan="2">
             Content!
         </td>
    </tr>
</table>

The following example shows how to set the RenderOuterTable property of the FormView control to false so that the control does not render a table.

<asp:FormView ID="FormView1" runat="server" RenderTable="false">
  <%-- Additional FormView control markup. --%>
</asp:FormView>

The other display templates that you can use with the FormView control are the EmptyDataTemplate template, which is displayed when there is no record to bind to, and the HeaderTemplate template and FooterTemplate template, which define the content of the header and footer, respectively.

Edit and Insert Templates

You can use the EditItemTemplate template to allow users to modify an existing record, and the InsertItemTemplate template to gather values for a new record to be inserted into the data source. In the EditItemTemplate and InsertItemTemplate templates you typically include controls that take user input, such as TextBox, CheckBox, or DropDownList controls. You might also add controls to display read-only data, and command buttons to allow users to edit the current record, insert a new record, or cancel current action. You bind controls in the EditItemTemplate and InsertItemTemplate templates to data using a data-binding expression that includes the Bind method for two-way data binding, as shown in the following example.

<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource" 
  SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"

  InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName); 
                 SELECT @EmpID = SCOPE_IDENTITY()"
  UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName 
                   WHERE EmployeeID=@EmployeeID"
  DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

  ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
  OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
  RunAt="server">

  <SelectParameters>
    <asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
  </SelectParameters>

  <InsertParameters>
    <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
  </InsertParameters>

</asp:sqlDataSource>

<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource" 
  SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"

  InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName); 
                 SELECT @EmpID = SCOPE_IDENTITY()"
  UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName 
                   WHERE EmployeeID=@EmployeeID"
  DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

  ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
  OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
  RunAt="server">

  <SelectParameters>
    <asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
  </SelectParameters>

  <InsertParameters>
    <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
  </InsertParameters>

</asp:sqlDataSource>

Note

When you use a ListControl control such as a DropDownList control, you might want the value of the DropDownList control to be bound to a field in the current bound record while the list values for the DropDownList control are bound to a separate list of possible values. In that case, use the Bind expression to bind the SelectedValue property of the DropDownList control to the current bound record, and specify the data source, DataTextField property, and DataValueField property of the DropDownList control to the list of possible values.

The EditItemTemplate template is loaded when users click a command button with a CommandName value of Edit. You can add a LinkButton command button with a CommandName of Update to take the current bound values and send them to the data source control for update. You can add a LinkButton command button with a CommandName of Cancel to discard the current bound values and return the FormView control to read-only mode and load the ItemTemplate template.

The InsertItemTemplate template is loaded when users click a command button with a CommandName of New. You can add a LinkButton command button with a CommandName of Insert to send values for a new record to the data source control. You can add a LinkButton command button with a CommandName of Cancel to discard the new values and return the FormView to read-only mode and load the ItemTemplate template.

For an example of using the FormView control to edit data, see Modifying Data Using a FormView Web Server Control.

Data Paging Template

In the FormView control, a page of data is a single bound record. If you set the AllowPaging property of the FormView control to true, the FormView control automatically adds user interface (UI) controls for paging. You can customize the UI for paging by adding a PagerTemplate template. For details, see Paging in a FormView Web Server Control.

For an example of a PagerTemplate template for a FormView control, see Paging in a FormView Web Server Control.

Partager via

Creating Templates for the FormView Web Server Control

Display Templates

Edit and Insert Templates

Data Paging Template

See Also

Concepts

Ressources supplémentaires