ASP.NET 2.0 Two-Way Databinding using DataSource Controls and GridView DetailsView FormView

I spent an hour or so today reviewing the ASP.NET 2.0 two-way databinding features using DataSource Controls and the new GridView, DetailsView, and FormView web controls.

Once again, if you use the DataSet as opposed to custom business objects, you get a lot of built-in functionality with absolutely no coding - simply drag and drop an SqlDataSource Control on your webform and hook in up to one of the new web controls mentioned above that support a DataSourceID as a property.  Even a hardcore n-layer architecture, business object guy like myself finds the idea of having built-in sorting, paging and database selects, inserts, updates, and deletes using DataSets very attractive without having to write a single line of code.  This is a definite option for those simple applications.

Just to review, the databinding tags have been simplified a bit for ASP.NET 2.0, but you can still use the previous versions as well.

In ASP.NET 1.1 the databinding tags were:

• <%# DataBinder.Eval(Container.DataItem, “expression“ ) %>
• <%# DataBinder.Eval( '', '', “format string“) %>

ASP.NET 2.0 offer those as well as the following:

• <%# Eval(“expression“) %>
• <%# Eval(“expression, “format string“) %>
• <%# Bind(“expression“) %>
• <%# Bind(“expression“, “format string“) %>

To be complete, you can also bind to configuration files as well:

• <%$ section : key %>

For two way databinding, one could use the inline editing of a GridView or use either variation of the <%@ Bind(...) %> expressions for a FormView.

Inline Editing

Let's review the ASP.NET 2.0 inline editing that will allow you to quickly view, update and delete statuses in a simple “Status” lookup table using the GridView and SqlDataSource controls.  We had this in ASP.NET 1.1 as well.

First my Status table only contains 2 fields:

• ID - PK AutoIncrement Int NotNull
• Title - Varchar(50) NotNull

Since I am only displaying the “Title“ field and not all fields, AutoGenerateColumns is set to false.  I also specify my primary key, ID,  in the DataKeyNames property and that my DataSourceControlID will be SqlDataSource1.  Simple stuff.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False"
    DataKeyNames="ID"
    DataSourceID="SqlDataSource1">
    
    <Columns>
        <asp:CommandField
            ShowDeleteButton="True"
            ShowEditButton="True" />
            
        <asp:BoundField
            DataField="Title"
            HeaderText="Title"
            SortExpression="Title" />
    </Columns>

</asp:GridView>

The SqlDataSourceControl markup is not much more complicated.  We have the very simple, ASP.NET 2.0 wizard generated output that specifies all of our SQL commands as well as the parameters.

<asp:SqlDataSource ID="SqlDataSource1"
    runat="server"
    ConnectionString="..."
    DeleteCommand="DELETE FROM [Status]
         WHERE [ID] = @original_ID"
    InsertCommand="INSERT INTO [Status]
         ([Title]) VALUES (@Title)"
    SelectCommand="SELECT * FROM [Status]
          ORDER BY [Title]"
    UpdateCommand="UPDATE [Status]
           SET [Title] = @Title
        WHERE [ID] = @original_ID">
        
    <DeleteParameters>
        <asp:Parameter Name="original_ID"
             Type="Int32" />
    </DeleteParameters>
    
    <UpdateParameters>
        <asp:Parameter Name="Title"
            Type="String" />
        <asp:Parameter Name="original_ID"
            Type="Int32" />
    </UpdateParameters>
    
    <InsertParameters>
        <asp:Parameter Name="Title"
             Type="String" />
    </InsertParameters>
    
</asp:SqlDataSource>

This ASP.NET markup code for inline editing alone provides enough information to display fields in a Status lookup table and allow you to display, edit and update values.  No VB.NET or C# code is necessary.

Two-way DataBinding using Bind Tags

You can also do the same thing with a FormView using the <%# Bind(”expression”) %> syntax.  Keeping the SqlDataSource the same, below is the FormView markup that will give you the same functionality (although you will have to page through the fields in the table).  Most of it is self-explanatory, but again, notice 1) DataKeyNames=ID, and 2) the bind syntax <%# Bind(“Title“) %>.

<asp:FormView ID="FormView1" runat="server"
    AllowPaging="True"
    DataKeyNames="ID"
    DataSourceID="SqlDataSource1">
    
    <EditItemTemplate>
        Title:
        <asp:TextBox ID="TitleTextBox"
            runat="server"
            Text='<%# Bind("Title") %>'>
        </asp:TextBox><br />
        <asp:LinkButton ID="UpdateButton"
             runat="server"
            CausesValidation="True"
            CommandName="Update"
            Text="Update">
        </asp:LinkButton>
        <asp:LinkButton ID="UpdateCancelButton"
            runat="server"
            CausesValidation="False"
            CommandName="Cancel"
            Text="Cancel">
        </asp:LinkButton>
    </EditItemTemplate>
    
    <ItemTemplate>
        Title:
        <asp:Label ID="TitleLabel"
            runat="server"
            Text='<%# Bind("Title") %>'>
        </asp:Label><br />
        <asp:LinkButton ID="EditButton"
            runat="server"
            CausesValidation="False"
            CommandName="Edit"
            Text="Edit">
        </asp:LinkButton>
        <asp:LinkButton ID="DeleteButton"
            runat="server"
            CausesValidation="False"
            CommandName="Delete"
            Text="Delete">
        </asp:LinkButton>
        <asp:LinkButton ID="NewButton"
            runat="server"
            CausesValidation="False"
            CommandName="New"
            Text="New">
        </asp:LinkButton>
    </ItemTemplate>
</asp:FormView>

How much of this will be able to use in real-world applications?  I don't know - yet :)  I am converting some ASP.NET 1.1 applications as we speak and I will have a better answer to that in about a month.  For now, it is just good to know how all this stuff works in case I need it.

posted on Wednesday, May 25, 2005 7:23 PM