Click here to Skip to main content
15,867,141 members
Articles / Web Development / XHTML
Article

A Practical Example Of Using The New Features Of ASP.NET 3.5

Rate me:
Please Sign up or sign in to vote.
3.38/5 (16 votes)
22 Jul 2008CPOL5 min read 68.3K   371   56   6
Tutorial on using LINQ, ListView, LinqDataSource, DataPager, ASP.NET AJAX

Introduction

This tutorial doesn’t cover the theoretical basics of the new features and controls, instead it concentrates on the practical example of using the new features. This tutorial covers the following features:

  • LINQ (Language Integrated Query) for the data manipulations
  • ListView control for presenting the data
  • LinqDataSource for binding data
  • DataPager for pagination
  • ASP.NET AJAX for getting rid of the unncecesassary page reloads

Requirements

  • Visual Studio 2008
  • SQL Server

Project

Our project is quite simply, it's just a guestbook, but it's good for demonstrating the cool features of ASP.NET 3.5 and .NET 3.5 in action.

guestbook.png

So, just open Visual Studio and create a new C# website.

Database design

We need to create a database when the comments will be stored. We’ll just create a database with a single table that will keep the comments posted by the authors. We can create it in Server Explorer without leaving Visual Studio.

tableCommentsDesign1.png

Don’t forget to set the Id field as an identity.

Let’s populate the database as well, so that we’ll have some data to display, just execute these queries:

SQL
INSERT INTO Comments
(Author, Text)
VALUES('John', 'ASP.NET 3.5 rocks!');

INSERT INTO Comments
(Author, Text)
VALUES('Mary', 'ASP.NET 3.5 is so cool!');

LINQ

Then, we need to create a LINQ To SQL class that will be using for the data manipulations (retrieving and inserting). We open Website->Add New Item and choose LINQ To SQL Classes

addNewItem.png

Then we open Server Explorer and drag and drop our table on the workspace.

linqToSqlDesign.png

Now we just save this file and go futher, we can view the generated code though located in
App_Code\Comments.dbml\Comments.designer.cs

LinqDataSource

Ok, it’s a time for create your webform that will hold all the content. Actually, it is already created by Visual Studio, we just have to add some content there.
We are going to start with a data source, open Toolbox, expand the data section and find LinqDataSource there.

toolbox.png

Drag it to the webform. You will get the following code:

XML
<asp:LinqDataSource ID="LinqDataSource1" runat="server">
</asp:LinqDataSource> 

Give it a more appopriate name, something like dsComments. Now switch to the Design view, click on the LinqDataSource we’ve just added and select Configure Data Source.

configureDataSource.png

Choose the only avaliable data context object and click Next.

chooseDataContext.png

Then leave everything by default by click on the Order By button. And choose Id and the <code>Descending order.

orderBy.png

Click Ok and finish, switch to the Source view and look at the code we get:

XML
<asp:LinqDataSource ID="dsComments" runat="server"
    ContextTypeName="CommentsDataContext" EnableInsert="True" OrderBy="Id desc"
    TableName="Comments">
</asp:LinqDataSource> 

Pretty simple, I would say.

ListView

It’s time to add the ListView control. It’s a new data bound control that enables you to have a full control of the rendered HTML code. It’s also located in the Data section of Toolbox. Drag it and rename it to lvComments, also don’t forget to assign a data source to it. You must get the following code:

XML
<asp:ListView ID="lvComments" runat="server" DataSourceID="dsComments">
</asp:ListView>


Then, we have to add the <LayoutTemplate> that will be the root template

XML
<asp:ListView ID="lvComments" runat="server" DataSourceID="dsComments">
    <LayoutTemplate>
        <h1>ASP.NET Guestbook</h1>
        <div id="itemPlaceholder" runat="server"></div>
    </LayoutTemplate>
</asp:ListView>

Please, note the we have the div tag with id="itemPlaceholder" runat="server". They denote that ListView content will be placed in the place of that div, itemPlaceholder is the default ID of the content placeholder.

To display out data we should add the <ItemTemplate> element and place some content there

XML
<ItemTemplate>
    <div>
        <b><%# Eval("Author") %></b> says<br />
        <%# Eval("Text") %>
    </div>
</ItemTemplate>


It’s simply and has nothing new if you worked with other data bound controls. Let’s add the separator element to separate the posts:

XML
<ItemSeparatorTemplate>
    <hr />
</ItemSeparatorTemplate>    


Compile the website, you should you see a very simply webpage with just two comments by Mary and John that we added in the very beginning. It’s cool, but what about enabling users to post comments? It also can be done by using LinqDataSource and ListView.

First, add EnableInsert=”True” attribute to the LinqDataSource. Second, we need to add the insert item template to the ListView.

XML
<InsertItemTemplate>
    Name:<br />
    <asp:TextBox ID="txtBox" runat="server" Text='<%# Bind("Author") %>' /><br />
    Text:<br />
    <asp:TextBox ID="txtText" runat="server" Text='<%# Bind("Text") %>'
        TextMode="MultiLine" /><br />
    <asp:Button runat="server" CommandName="Insert" Text="Post" /><br />
</InsertItemTemplate>  


Pay attetion at two things – data binding in the input controls and the CommandName attribute in the button. If you compile the website right now, you won’t see see the post form because you should define its position first, to do that add InsertItemPosition="FirstItem" to the ListView attributes, you can set it to LastItem however.

Now compile the project and try posting some comments. It’s working that is good.

DataPager

It’s time to add a pagination and see another new control in action. It is called DataPager. Add the following code to the LayoutTemlate of the ListView:

XML
<asp:DataPager runat="server" PagedControlID="lvComments" PageSize="5">
    <Fields>
        <asp:NumericPagerField />
    </Fields>
</asp:DataPager>  

I suppose it’s pretty self-explanatory, PagedControlID defined the control we want to page, PageSize sets the number of entries per page. <asp:NumericPagerField /> says that we want to have the list of the page numbers. Compile it and try it in the browser.

I guess you noticed that it has an ugly postback in its URL. You can easily get rid of it by adding the QueryStringField attribute to the DataPager and of course by setting its value ;-).

XML
<asp:DataPager runat="server" PagedControlID="lvComments" PageSize="5" 
                    QueryStringField="page">

It looks much better now and you can send the link to the 10th page of your guestbook to a friend.

ASP.NET AJAX

At the final stage, let’s add some AJAX, so that the page doesn’t reload each time you post a comment.


Visual Studio 2008 has a built-in ASP.NET AJAX library which is extremely easy in use.
Open Toolbox, expand AJAX Extensions and drop ScriptManager to the page. ScriptManager is a control that loads all the necessary JavaScript libraries needed for ASP.NET AJAX. If you forget to add ScriptManager, you’ll get an error.


So, we don’t want the whole page to be updated when posting a comment, we just want to update our ListView, so we are surrounding the ListView with UpdatePanel.

XML
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <% List View code %>
    </ContentTemplate>
</asp:UpdatePanel>

Points of Interest

There are a lot of cool features in ASP.NET that help you make your applications much faster than in ASP.NET 2.0. We have build a guestbook without writing a line of C# code. Of course this tutorial wasn't mean to cover all the features of ASP.NET 3.5, it doesn't cover the basics things, however you can find them on MSDN and on ww.asp.net.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Russian Federation Russian Federation
I'm a web developer and a student. I'm very passionate about technologies, I speak about them at the conferences and write in my blog

Comments and Discussions

 
GeneralMy vote of 2 Pin
DreamwithinDream27-Feb-12 23:28
DreamwithinDream27-Feb-12 23:28 
GeneralCompilation error Pin
reach_reema28-Aug-08 9:07
reach_reema28-Aug-08 9:07 
AnswerRe: Compilation error Pin
Mike Borozdin28-Aug-08 12:21
Mike Borozdin28-Aug-08 12:21 
GeneralLinq to SQL Pin
Member 190497030-Jul-08 2:25
Member 190497030-Jul-08 2:25 
GeneralRe: Linq to SQL Pin
Mike Borozdin30-Jul-08 12:41
Mike Borozdin30-Jul-08 12:41 
GeneralBeware the QueryStringField! Pin
Richard Deeming28-Jul-08 10:10
mveRichard Deeming28-Jul-08 10:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.