Filter and display data with ASP.NET Web Forms (Part 2)

In the first part of this article series distinct countries from Formula 1 racers were retrieved from the database with the help of the ADO.NET Entity Framework and the EntityDataSource control. The country list was displayed in a DropDownList. Doing this not a single line of writing code was required, all could be done by setting properties of controls. All could be done with the help of Visual Studio 2010 designers. The second part continues on this to add another data source to retrieve the racers from a single country and display them.

To display the list of Formula 1 racers from a country the GridView control is used. This control needs another EntityDataSource. This data source is configured to select all the columns from the Racer type as shown:

However, not all racers should be displayed. The query should be filtered based on the selected country value from the DropDownList control. This can be done with a designer as well by configuring the Where property of the EntityDataSource control. Clicking the ellipsis button opens the Expression editor as shown in the following screen. Adding a Country parameter defines a Where clause to filter based on the Country. The value for this parameter can come from different source types, such as a cookie, another control, form value, profile, query string, and new with ASP.NET 4 also routing data. Here the source is a control, namely the DropDownList1 instance. Using the SelectedValue property of this control is done automatically.

 

The resulting list should also be sorted. The sort order can be defined by setting the OrderBy property of the EntityDataSource. The editor for this property is shown here. The OrderExpression requires Entity-SQL syntax using it. Entity SQL helper methods are based on it. While it’s easy to configure the dialogs by simply selecting checkboxes, it really helps knowing a little Entity-SQL on using the EntityDataSource.

 

The resulting configuration of this EntityDataSource can be seen in the source view of the ASPX file. The WhereParameters collection contains an ControlParameter.

                <asp:EntityDataSource ID="EntityDataSource2" runat="server" 
                    AutoGenerateWhereClause="True" ConnectionString="name=Formula1Entities" 
                    DefaultContainerName="Formula1Entities" EnableFlattening="False" 
                    EntitySetName="Racers" EntityTypeFilter="Racer" OrderBy="it.[Wins] desc" 
                    Where="" Select="">
                    <WhereParameters>
                        <asp:ControlParameter ControlID="DropDownList1" Name="Country" 
                            PropertyName="SelectedValue" />
                    </WhereParameters>
                </asp:EntityDataSource>

Running the application now the racers can be filtered based on the country and are sorted by the number of wins  as shown in this figure:

Now all of this was possible without writing a single line of code. Setting properties of server-side controls is all what’s needed. The code from the code-behind didn’t change from creating the ASPX file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebFormsDataQuery
{
    public partial class RacersByCountry : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Of course not everything is fast as it should be. For example, with every call of the page because of two EntityDataSource objects to different entity contexts are created that are filled by two queries. The first one to get all the countries, the second one to get the racers from a country. Writing a few lines of code there can be an easy fix. The EntityDataSource control defines events before the context is created (ContextCreating), and after the context is created (ContextCreated). Writing a handler for the ContextCreating event a data context can be assigned. The handler method OnContextCreating creates a data context only once. If the data context was already created, the existing one is used. Assigning the ContextCreating event of both EntityDataSource controls to this event handler, both controls make use of the same context.

        private Formula1Entities data;
        protected void OnContextCreating(object sender, 
            EntityDataSourceContextCreatingEventArgs e)
        {
            if (data == null)
                data = new Formula1Entities();
            e.Context = data;
        }
        
        public void Page_Unload(object sender, EventArgs e)
        {
            if (data != null)
                data.Dispose();
        }

This is just one issue of the page. Another question that should be asked is if the countries list shouldn’t be shared across all users of the Web application. It’s the same result that should be returned anyway. This could be done using the Cache object.

Also, the view state can be really huge. This sample page is very small, but to see the ViewState you need to scroll far to the right with the following resulting HTML code.

<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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" />
</div>

There are ways to fix this. The sample page just needs the ViewState for remembering the previous selection of the DropDownList to handle the change event, it can be turned off with other controls.

You should also interested in the HTML code that’s generated. The GridView control by default creates a HTML table as shown.

    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Id</th><th scope="col">Firstname</th>
            <th scope="col">Lastname</th><th scope="col">Country</th>
            <th scope="col">Starts</th><th scope="col">Wins</th>
        </tr><tr>
            <td>11</td><td>Jochen</td><td>Rindt</td><td>Austria</td><td>60</td><td>6</td>
        </tr><tr>
            <td>19</td><td>Niki</td><td>Lauda</td><td>Austria</td><td>170</td><td>25</td>
        </tr><tr>
            <td>226</td><td>Gerhard</td><td>Berger</td><td>Austria</td><td>210</td><td>10</td>
        </tr><tr>
            <td>254</td><td>Karl</td><td>Wendlinger</td><td>Austria</td><td>42</td><td>0</td>
        </tr><tr>
            <td>274</td><td>Alexander</td><td>Wurz</td><td>Austria</td><td>62</td><td>0</td>
        </tr><tr>
            <td>294</td><td>Christian</td><td>Klien</td><td>Austria</td><td>49</td><td>0</td>
        </tr><tr>
            <td>299</td><td>Patrick</td><td>Friesacher</td><td>Austria</td><td>11</td><td>0</td>
        </tr>
    </table>

Of course there are also ways influencing this. Custom templates allow defining the code that should be returned from the control.

Giving a first summary, with the help of the Visual Studio 2010 designer it’s really easy to create Web applications just by setting some properties. If the Web application doesn’t expect many requests, data transfer and performance is not an issue, it can be used as it is. Otherwise a lot of tuning is required.

The next part of this blog series extends the ASP.NET Web Forms sample to add AJAX functionality using server-side controls.

Here you can find the links to all articles on this series.

Christian

CN innovation

Comments

[Pandora Beads Sale]

Nice, and thanks for sharing this info with us.Good Luck!