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.
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"
CodeBehind="Site1.master.vb"
Inherits="WebApplication3.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server"
EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx"
ID="HeadLoginStatus"
runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName
ID="HeadLoginName"
runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus"
runat="server"
LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false"
Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx"
Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx"
Text="About"/>
<asp:MenuItem NavigateUrl="~/Orders.aspx"
Text="Orders" Value="Orders">
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
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.
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.
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.
|
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.
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.
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.
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.
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"
ConnectionString="name=NorthwindEntities"
DefaultContainerName="NorthwindEntities" EnableFlattening="False"
EntitySetName="Orders">
</asp:EntityDataSource>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" DataSourceID="EntityDataSource1">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
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.
|
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"
TargetControlID="EntityDataSource1">
<asp:SearchExpression DataFields="ShipCity" SearchType="StartsWith">
<asp:ControlParameter ControlID="FilterTextBox" Type="String" />
</asp:SearchExpression>
</asp:QueryExtender>
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.
At this point the Menu Item Editor dialog looks like Figure 9, which you can take as a reference when setting properties.
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.
Also notice how paging
features have been correctly implemented. Finally try clicking the page
buttons that provide navigation capabilities.
