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

• Download 35NewFeatures - 5.8 KB

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.

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.

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:

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

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

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.

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

<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.

Choose the only avaliable data context object and click Next.

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

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

<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:

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

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

<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

<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:

<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.

<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:

<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 ;-).

<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.

<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.

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 5 of 5 (Total in Forum: 5) (Refresh) FirstPrevNext

Compilation error reach_reema 10:07 28 Aug '08   Hey Mike, I found your article to be really simple and it helped me to get the hand-on understanding very easily. While I was trying it out myself, it did give me a compilation error. I did it exactly like given. Error being: Could not find a property or field called "Comments" on the data context type 'CommentsdataContext'of LinqDataSource of 'dsComments'. Could you plz help me with this? Thnx, R Sign In·View Thread·PermaLink Re: Compilation error Mike Borozdin 13:21 28 Aug '08   Hello, Thank you for the feedback provided. It seems like there are some problems with your data context, perhaps just different naming. Can you paste the contentx of your .dblm file? You can also download the project files, you just have to create a table with the schema described in the beginning of the article. Sign In·View Thread·PermaLink Linq to SQL Member 1904970 3:25 30 Jul '08   Other than being new and "cool", what is the benefit of using Linq to SQL rather than an SQLDataSource? It seems like the amount of programming effort is the same and the results are the same. Sign In·View Thread·PermaLink Re: Linq to SQL Mike Borozdin 13:41 30 Jul '08   I would say "not instead of SqlDataSource, but instead of ObjectDataSource". SqlDataSource is enough for writing a quick sketch of the future application, but it's not enough when writing a real application because of its poor maintability, mostly because of the spaghetti code - a mix of ASP.NET, HTML and SQL... ObjectDataSource is much better, but you have to write the DAL and the BLL layers yourself, while they can be written by LINQ to SQL. Sign In·View Thread·PermaLink Beware the QueryStringField! Richard Deeming 11:10 28 Jul '08   If a user mangles your URL, or you have a typo somewhere in your site, the DataPager control in query-string mode can throw a NullReferenceException: https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=357344[^] The problem arises when the query-string contains a null key - for example, either page.aspx?&id=1 or page.aspx?a&id=1 will demonstrate the problem. So far, the only workaround I've found is to create a module which rewrites requests for pages when there is a null key. "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer Sign In·View Thread·PermaLink

Last Visit: Friday, November 21, 2008 3:53 AM     Last Update:Friday, November 21, 2008 3:53 AM