JavaScript Editor jscript editor     Web designer 
↑


Main Page

You can customize the FormView control by adding templates that allow 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.

NoteNote

For more information on data-binding expressions, see Web Forms Data Binding.

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.

Visual BasicВ CopyCode imageCopy Code
<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>
C#В CopyCode imageCopy Code
<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 allows 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 allow users to delete the current record from the data source.

The other display templates that you can use with the FormView control are the EmptyDataTemplate template, which is displayed when there is no current 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.

Visual BasicВ CopyCode imageCopy Code
<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>
C#В CopyCode imageCopy Code
<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>
NoteNote

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.

See Also



JavaScript Editor jscript editor     Web designer 
→