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

This is the first article of a series using ASP.NET to filter and display data from a database. This article has the focus on ASP.NET Web Forms, you can read how to filter and display data using ASP.NET server controls. Follow on articles continue with Web Pages and MVC as mentioned in the introduction.

First a new project with the Visual Studio 2010 project template ASP.NET Empty Web Application is created.

The sample application makes use of a Formula 1 database and accesses it with the ADO.NET Entity Framework. The Racers table is directly mapped to the Racer type that is shown in the following figure. Just the designer is used to create the entity type and data context that is needed to access the database.

 

The designer not only creates the types for the entities and the data context but also adds a connection string to web.config:

  <connectionStrings>
    <add name="Formula1Entities" 
         connectionString="metadata=res://*/Formula1Model.csdl|res://*/Formula1Model.ssdl|res://*/Formula1Model.msl;
           provider=System.Data.SqlClient;provider 
           connection string=&quot;data source=(local);initial catalog=Formula1;integrated security=True;multipleactiveresultsets=True;
           App=EntityFramework&quot;" 
           providerName="System.Data.EntityClient" />
  </connectionStrings>

Next I’m creating a Web Form named RacersByCountry.aspx with the item template. A main idea of Web Forms is to abstract HTML and JavaScript away and make programming as similar to writing Windows applications as possible. Web server controls have properties that are very similar to Windows Forms controls. With ASP.NET 4 (and also some earlier editions of this framework) it should be possible to create a Web application with very few lines of code. Let’s have a look at how this works out in this simple scenario.

To display a list of all countries of the racers I’m using the Web server control DropDownList. This server-side control creates a HTML select element. Selecting the Enable AutoPostback checkbox from the smart tag in the designer makes use of JavaScript code to do a postback to the server on changing the selected element in the list.

For showing data, this control needs a data source. Available with the Data category in the toolbox several data source controls can be chosen from. The SqlDataSource makes use of the ADO.NET DataSet, or uses a DataReader directly. The XmlDataSource is a source for XML data as should be clear from its name. ObjectDataSource accesses objects and invokes methods from these objects. LinqDataSource uses LINQ to SQL as its source. EntityDataSource is the one used here to access the data context defined earlier.

The configuration of the EntityDataSource is shown in the next figures. The first configuration screen just needs the name of the connection string to offer the data context class as the DefaultContainerName.

With the second screen the entity set Racers with the type filter Racer is used. The query that is created to display the countries only needs the Country property of the Racer type, so just this property is selected.

Selecting the DropDownList in the designer, now the data source can be configured. With the data source selection, the EntityDataSource1 instance is selected.

The resulting ASPX code of the DropDownList control sets the properties DataSourceId, DataTextField, and DataValueField as shown.

        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
            DataSourceID="EntityDataSource1" DataTextField="Country" 
            DataValueField="Country" Height="30px" Width="173px">
        </asp:DropDownList>

The query to retrieve the countries of the Racers table shouldn’t return the country of every racer, instead distinct values should be returned. The Select expression can be changed by using a designer opened from the Select property of the EntityDataSource adding DISTINCT as shown in the following figure.

The generated ASPX code for the EntityDataSource is shown here.

        <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
            ConnectionString="name=Formula1Entities" 
            DefaultContainerName="Formula1Entities" EnableFlattening="False" 
            EntitySetName="Racers" EntityTypeFilter="Racer" Select="DISTINCT it.[Country]">
        </asp:EntityDataSource>

Running the application distinct countries are displayed with an HTML select element  as the following figure shows.

So far all this was possible without writing a single line of code. All functionality was possible by using server-side controls and setting some properties with the help of a designer. This is a big advantage of ASP.NET Web Forms. This advantage doesn’t come without disadvantages that will be discussed as well.

Next in this series a grid is added to the display to show the racers from a single country. Let’s see how this can be done without writing a single line of code as well.

Christian

CN innovation

Comments

[A Barracuda]

The .NET Framework 4.5 includes enhancements for ASP.NET 4.5. Visual Studio 2012 also includes enhancements and new features for improved web development. This document provides an overview of many of the new features that are included in Visual Studio 2012