Creating a Web Application with VB 2010 with Navigation and Data-Binding

10/10/2010 3:25:06 PM
Visual Basic 2010 makes it easier to create Web applications with navigation capabilities, because the Web Application project template provides a master page implementation with default pages and designer tools for adding further elements. If you want to create a data-centric Web application, the .NET Framework 4.0 offers specific controls (some of them new in .NET 4.0) that enable supplying a data source and data-binding capabilities with a few mouse clicks. This section shows you how to reach this objective. Select File, New Project and from the Web projects folder, select the ASP.NET Web Application template; name the new project as NorthwindOrders, and then click OK. When the project is available in Solution Explorer, notice the presence of some web pages (Default.aspx and About.aspx) and of the master page (the Site.Master file). Now click on the Site.Master file. At this point you see the simplest example of a master page, as shown in Figure 1.
Figure 1. The default master page for the new web application.

Master Pages

A master page is a special page with .master extension, which provides a template containing a set of common elements for each page in the application. A master page typically contains elements such as headers, footers, and navigation elements so that you can implement one time a number of elements that each page can contain. Visual Studio provides a specific item template for creating a master page, but the simplest way for understanding how it works is examining a basic one. When you create a new project using the ASP.NET Web Application template, such as in the current example, the IDE adds a master page for you. As you can see Visual Studio implements by default a couple of links for navigating between pages, such as Home and About. Both links have related Web pages in the project, which are Default.aspx and About.aspx. Also notice how there is a Login link that points to a Login.aspx page stored in the Account folder, which also contains other auto-generated pages for registering to the Web application and for password management. The most basic code for designing a master page is the following:

<%@ Master Language="VB" AutoEventWireup="false"
Inherits="WebApplication3.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="">
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


The most important element is the ContentPlaceHolder that defines a region for contents in the seb page. You can simply compare this basic code with one of the auto-generated master page, where you notice the presence of a navigation menu and the login view:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb"
Inherits="NorthwindOrders.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en">
<head runat="server">
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
My ASP.NET Application
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server"
[ <a href="~/Account/Login.aspx"
runat="server">Log In</a> ]
Welcome <span class="bold"><asp:LoginName
runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus"
LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/"/> ]
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false"
<asp:MenuItem NavigateUrl="~/Default.aspx"
<asp:MenuItem NavigateUrl="~/About.aspx"
<asp:MenuItem NavigateUrl="~/Orders.aspx"
Text="Orders" Value="Orders">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<div class="clear">
<div class="footer">


The goal of the sample application is fetching the list of orders from the Northwind database, showing the list in a GridView control (with editing capabilities) and adding navigation features to the master page, so in next section you see how to add the data source and how to add data-bound controls.

Adding the Data Model

The first thing to add in the Web project is the data source. This can be of different kinds, for example both LINQ to SQL classes and Entity Data Models are supported. The example will be based on the Entity Framework so you also see a new control in ASP.NET 4.0, thus add a new entity data model named Northwind.edmx and add to the model the Orders table from the database.

Adding a New Web Form

To add a new Web Form to the project, right-click the project name in Solution Explorer and select Add New Item. When the same-named dialog appears, click the Web folder. Among all available items, you see how you can add a Web Form (which is just a Web page) or a Web Form Using Master Page. This second template is useful if you want to show the new page within a master page, differently from the first template which is instead for free pages. Select the second template so that we can link the new page to the master page, and name the new page as Orders.aspx (see Figure 2); then click OK.

Figure 2. Adding a new Web Form using a master page.

At this point Visual Studio asks you to indicate a master page from the project to link the new Web Form. In our case only one master page is available, so select it on the right side of the dialog, as shown in Figure 3.

Figure 3. Specifying the master page to be associated to the new Web Form.

If you now double-click the Orders.Aspx page, you get a new empty page linked to the master page, thus having navigation features. Now that we have a page, we can bind it to the data source.

Adding Data Controls

ASP.NET 4.0 offers a number of data controls that can be used to bind a data source to user controls and that act like a bridge. One of the controls new in ASP.NET 4.0 is the EntityDataSource, which enables binding an entity data model to a graphic control.

Enabling the Designer

By default Visual Studio shows the HTML code for the pages. In order to enable the Visual Studio designer, click the Design button for switching to the full designer view or the Split button in order to get both the designer and the html code on the same view.

In the toolbox expand the Data tab and drag the EntityDataSource control onto the Orders page until you get the result shown in Figure 4.

Figure 4. Adding an EntityDataSource control to the page.

The good news is that you can configure the control and bind it to a data source without writing a single line of code. Build the project so that all data references are updated and then click the right arrow on the EntityDataSource and then click the Configure data-source item. This launches the Configure Data Source Wizard, whose first dialog is shown in Figure 5. Basically you simply need to specify the source entity data model in the first combo box and then the container name you want to associate to the data control in the lower combo box; then click Next to access the second dialog of the wizard.

Figure 5. Associating the entity data model to the EntityDataSource control.

In the second dialog you have the opportunity of choosing the entity you want to be mapped into the EntityDataSource. There you can select only a desired number of columns or all columns, as represented in Figure 6.

Figure 6. Choosing entity and entity columns for mapping into the EntityDataSource.

This is all you need to configure the data source. Now a control for viewing and editing data is necessary. In the toolbox double-click a GridView control so that it will be added to the page under the EntityDataSource. When ready, click the right arrow to access configuration properties. This shows up the GridView Tasks pop-up window; here you specify the EntityDataSource1 control in the Choose Data Source field to enable data-binding. Also select the Enable Paging, Enable Sorting, and Enable Selection check boxes. Figure 7 provides a graphical representation of this series of operations.


Figure 7. Applying data-binding and data options in the GridView Tasks pop-up.

With a few mouse clicks you configured your new Web Form to present and edit data without writing a single line of Visual Basic code. There is only a bunch of XHTML code required to set properties for each added control, which in our case is the following:

<asp:EntityDataSource ID="EntityDataSource1" runat="server"
DefaultContainerName="NorthwindEntities" EnableFlattening="False"
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" DataSourceID="EntityDataSource1">
<asp:CommandField ShowSelectButton="True" />

This is possible because the ASP.NET data controls implement all functionalities required to access and edit data by simply assigning some properties. Our page is absolutely ready for showing and editing orders from the database. I want to show you another couple of features for filtering data that can also let you understand how powerful ASP.NET is.

Runtime Data-Binding Tip

Most of ASP.NET data controls expose a DataSource property that can be assigned at runtime with a custom data source, such as a List(Of T). When assigned this property, you invoke the control’s DataBind method to perform the binding.

Adding Filtering Capabilities

It would be interesting having filtering capabilities; for example we could implement a filter that enables fetching all orders with the ShipCity property value that starts with the specified text. Thus in the toolbox double-click a TextBox and a Button. These controls will be automatically placed onto the page (they will be placed at the top if that is where the cursor is in the designer). Now replace the Name property value of the TextBox with FilterTextBox; while in the Button properties change the Name value with FilterButton and the Text property with Filter. To provide filtering capabilities over the data source, ASP.NET offers the QueryExtender control that you can find within data controls in the toolbox. Add it to the page and then simply assign its TargetControlID property with EntityDataSource1, which is the name of the data control to be queried or filtered. Now you need to specify an expression for filtering; these kind of expressions are known as search expressions. ASP.NET offers more than one search expression, but the simplest and appropriate for our purposes is SearchExpression. This object requires the specification of the search type and of the columns to be interrogated but this is not sufficient; a ControlParameter element needs to be nested so that you can specify the control where the search criteria are inserted (in our case the textbox) and the .NET type involved in the expression. Talking in code terms, you need to manually write the following code inside the QueryExtender:

<asp:QueryExtender ID="QueryExtender1" runat="server"
<asp:SearchExpression DataFields="ShipCity" SearchType="StartsWith">
<asp:ControlParameter ControlID="FilterTextBox" Type="String" />

The only Visual Basic code we need to write is the event handler for the Page.Loaded event to check the PostBack state. This is accomplished by writing the following code in the Orders.aspx.vb code file:

Protected Sub Page_Load(ByVal sender As Object,
ByVal e As System.EventArgs) _
Handles Me.Load
If Not Page.IsPostBack Then
FilterTextBox.Text = ""
End If
End Sub

This is all we need, no other code. Before running the sample Web application, let’s make the new Web Form reachable from the master page.

Adding Navigation Controls

Open the master page in the designer. You see the availability of two buttons named Home and About. These are menu items inside a Menu control that simply point to the associated Web Form. You can add menu items to the menu by first clicking the smart tag (that is, the right arrow) and then clicking the Edit Menu Items link in the Menu Tasks pop-up dialog. This launches the Menu Item Editor, where you can add new menu items. Click the Add a Root Item button that is the first on the left. When the new item is added, set the Text property as Orders. (This also automatically sets the Value property.) Then click the NavigateUrl property and click the available button to associate a Web page. In the Select URL dialog, choose the Orders.aspx web page, as shown in Figure 8.

Figure 8. Associating a web page to the new menu item.

At this point the Menu Item Editor dialog looks like Figure 9, which you can take as a reference when setting properties.

Figure 9. The Menu Item Editor dialog enables adding menu items to the master page.

Now you can see a new Orders button associated to the same-named Web page.

Running the Application

At this point you can run the demo application by pressing F5. Figure 10 shows the Orders page, showing a list of orders filtered according to the given search criteria.

Figure 10. The sample web application running.

Also notice how paging features have been correctly implemented. Finally try clicking the page buttons that provide navigation capabilities.


Most View
SQL Server : Implementing One-Way Encryption (part 1) - Create the Primary Hash Column,Create a Secondary Hash Column for Searching
Master Apple Mail (Part 1)
Build Mobile Websites and Apps for Smart Devices : Design for Mobile - Application Icons
The Windows 7 Command Prompt Environment
USB DACs Super Test: PC + DAC = HI-FI (Part 4)
The 3DS XL : Super-Sized!
Toshiba SSD PC Upgrade Kit 60GB
Best Brands In Electronic World (Part 1)
Asus F2A85-V PRO Mainboard - A Socket FM2 Mainboard With Good Performance (Part 5)
ASP.NET 4.0 : Data Source Components (part 5) - The ObjectDataSource Control - Setting Up for Paging , Updating and Deleting Data
Top 10
Sharepoint 2013 : Farm Management - Disable a Timer Job,Start a Timer Job, Set the Schedule for a Timer Job
Sharepoint 2013 : Farm Management - Display Available Timer Jobs on the Farm, Get a Specific Timer Job, Enable a Timer Job
Sharepoint 2013 : Farm Management - Review Workflow Configuration Settings,Modify Workflow Configuration Settings
Sharepoint 2013 : Farm Management - Review SharePoint Designer Settings, Configure SharePoint Designer Settings
Sharepoint 2013 : Farm Management - Remove a Managed Path, Merge Log Files, End the Current Log File
SQL Server 2012 : Policy Based Management - Evaluating Policies
SQL Server 2012 : Defining Policies (part 3) - Creating Policies
SQL Server 2012 : Defining Policies (part 2) - Conditions
SQL Server 2012 : Defining Policies (part 1) - Management Facets
Microsoft Exchange Server 2010 : Configuring Anti-Spam and Message Filtering Options (part 4) - Preventing Internal Servers from Being Filtered