Data-Binding Expression Syntax

JavaScript Editor jscript editor     Web designer 



Main Page

Data-binding syntax allows you to bind control property values to data and specify values for retrieving, updating, deleting, and inserting data.

Data-Binding Syntax

Data-binding expressions are contained within <%# and %> delimiters and use the Eval and Bind functions. The Eval function is used to define one-way (read-only) binding. The Bind function is used for two-way (updatable) binding. In addition to calling Eval and Bind methods to perform data binding in a data-binding expression, you can call any publicly scoped code within the <%# and %> delimiters to execute that code and return a value during page processing.

Data-binding expressions are resolved when the DataBind method of a control or of the Page class is called. For controls such as the GridView, DetailsView, and FormView controls, data-binding expressions are resolved automatically during the control's PreRender event and you are not required to call the DataBind method explicitly.

The following code example shows the use of data-binding expressions with a FormView control in an ItemTemplate.

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>

Using the Eval Method

The Eval method evaluates late-bound data expressions in the templates of data-bound controls such as the GridView, DetailsView, and FormView controls. At run time, the Eval method calls the Eval method of the DataBinder object, referencing the current data item of the naming container. The naming container is generally the smallest part of the data-bound control that contains a whole record, such as a row in a GridView control. You can therefore use the Eval method only for binding inside templates of a data-bound control.

The Eval method takes the name of a data field and returns a string containing the value of that field from the current record in the data source. You can supply an optional second parameter to specify a format for the returned string. The string format parameter uses the syntax defined for the Format method of the String class.

Using the Bind Method

The Bind method has some similarities to the Eval method, but there are significant differences. Although you can retrieve the values of data-bound fields with the Bind method, as you can with the Eval method, the Bind method is also used when data can be modified.

In ASP.NET, data-bound controls such as the GridView, DetailsView, and FormView controls can automatically use the update, delete, and insert operations of a data source control. For example, if you have defined SQL Select, Insert, Delete, and Update statements for your data source control, using Bind in a GridView, DetailsView, or FormView control template enables the control to extract values from child controls in the template and pass them to the data source control. The data source control in turn performs the appropriate command for the database. For this reason, the Bind function is used inside the EditItemTemplate or InsertItemTemplate of a data-bound control.

The Bind method is typically used with input controls such as the TextBox control rendered by a GridView row in edit mode. When the data-bound control creates these input controls as part of its own rendering, it can extract the input values.

The Bind method takes the name of a data field to associate with the bound property, as shown in the following example:

В CopyCode imageCopy Code
<EditItemTemplate>
  <table>
    <tr>
      <td align=right>
        <b>Employee ID:</b>
      </td>
      <td>
        <%# Eval("EmployeeID") %>
      </td>
    </tr>
    <tr>
      <td align=right>
        <b>First Name:</b>
      </td>
      <td>
        <asp:TextBox ID="EditFirstNameTextBox" RunAt="Server"
          Text='<%# Bind("FirstName") %>' />
      </td>
    </tr>
    <tr>
      <td align=right>
        <b>Last Name:</b>
      </td>
      <td>
        <asp:TextBox ID="EditLastNameTextBox" RunAt="Server"
            Text='<%# Bind("LastName") %>'  />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <asp:LinkButton ID="UpdateButton" RunAt="server"
          Text="Update" CommandName="Update" />
        &nbsp;
        <asp:LinkButton ID="CancelUpdateButton" RunAt="server"
          Text="Cancel" CommandName="Cancel" />
      </td>
    </tr>
  </table>
</EditItemTemplate>

When the Update button for the row is clicked, the values of each control property bound using Bind syntax are extracted and passed to the data source control for the update operation.

Calling the DataBind Method Explicitly

Controls such as GridView, FormView, and DetailsView controls perform binding by calling the DataBind method implicitly when they are bound to a data source control using the DataSourceID property. However, there are situations in which you need to call the DataBind method explicitly.

One situation is if you have bound a control to a data source control using the DataSource property instead of the DataSourceID property. In that case, you need to call the DataBind method explicitly to perform data binding and resolve data-binding expressions.

Another situation is if you need to manually refresh the data in a data-bound control. Consider a page where you have two controls that display information from the same database (perhaps using different views). In that case, you might need to explicitly re-bind the control to data to keep the data display synchronized. For example, you might have a GridView control displaying a list of products and a DetailsView control that allows users to edit an individual product. Although the GridView and DetailsView controls display data from the same source, they are bound to different data source controls because they use different queries to get their data. A user might update a record using the DetailsView control, causing the update to be performed by the associated data source control. However, because the GridView control is bound to a different data source control, it will display old record values until the page is refreshed. Therefore, after the data is updated by the DetailsView control, you can call the DataBind method. This causes the GridView control to update its view as well by re-executing any data-binding expressions and publicly scoped code within the <%# and %> delimiters. As a result, the GridView control reflects the update made by the DetailsView control.

See Also



JavaScript Editor jscript editor     Web designer