I'm happy to say that today, we are posting our very first article on ASP.NET. In this screencast, I'll show you how to implement a simple search functionality into your personal website. We'll go over many of the new features in ASP.NET 3.5, such as LINQ and many of the AJAX controls that ship with Visual Studio/Web Developer.
*Click on the full screen icon maximize the video.
Mission Statement
We will be building a simple search functionality for our site. We'll create a bare bones site that contains a single textbox and button. When the button is clicked, we'll write some LINQ code that will retrieve the applicable information from our database and display it on the page. Additionally, we'll allow for partial page post-backs by using the Update Panel and Update Progress controls.
What You Need to Know
In this screencast, I will assume that you have some knowledge of the framework. So, though I will explain everything to the best of my ability, I will expect you to know a few things. If you are a complete novice, leave a comment and we'll work on getting a "From Scratch" article published sometime in the near future.
Step 1: Creating The Database
I'll be creating a "Blog" database. For the sake of simplicity, I'll only add a few columns: "BlogId", "BlogTitle", "BlogContents". In a real world situation, you should add things like "BlogAuthor", "BlogFeaturedImage", "CommentsId", etc. After filling these columns with some gibberish content, we're ready to build our webform.
Step 2: The Listview Control
The wonderful thing about the listview control is that it allows you to maintain 100% control over your mark up. Instead of having to deal with tables, I can specify anything that I like.
<asp:ListView runat="server" ID="lv">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</LayoutTemplate>
<ItemTemplate>
<asp:HyperLink runat="server" ID="link"
Text='<%#Eval("BlogTitle") %>'
NavigateUrl='<%#Eval("BlogId", "entry.aspx?BlogId={0}") %>' />
</ItemTemplate>
</asp:ListView>
- LayoutTemplate: This template serves as the wrap for each item. For instance, if each item was inside of an "li" tag, you could add a "ul" tag in your layout template as a "wrap".
- ItemTemplate: This will describe the layout for each item in the database. If, for example, we have 10 blog entries in the database, there will subsequently be 10 items.
Within the item template, I've specified that the listview control should only display a hyperlink. This hyperlink will have its text attribute equal to whatever the value is in the database for the associated row. I'm also going to set the NavigateUrl property (the href) to a new page. This entry.aspx page will serve to be the template for each entry. We'll specify which entry should be displayed via the querystring. (More on this in the screencast.)
Step 3: LINQ
LINQ is a programming model that allows you to access many different forms of data using the same syntax. With LINQ to SQL, it allows for a strongly typed way of communicating with your relational database. Imagine being able to use the same query to access XML, Objects, Relational Databases, APIs, etc. It's an incredible model and is easily my favorite new feature in ASP.NET 3.5.
Rather than embedding SQL code directly into your code behind files, you can now treat each column in your database tables like any other object. This is accomplished by creating a LINQ to SQL Class. This class automatically creates the database objects for you.
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
Dim db As New BlogDBDataContext()
Dim q = From b In db.Blogs _
Where b.BlogContents.Contains(txtSearch.Text.Trim()) Or _
b.BlogTitle.Contains(txtSearch.Text.Trim()) _
Select b
lv.DataSource = q
lv.DataBind()
End Sub
When the user clicks on the "Search" button, this code will retrieve only the entries from the database that contain the value that was entered into the search textbox. Those values will be returned and stored in the variable "q". We then set the datasource of our listview control to "q" - and databind it.
Step 4: AJAXifying Our Page
In this simple demonstration, it won't truly make a difference whether the entire page posts back or not. However in a mid to large sized site, performing an entire post back can be a pain. We're going to wrap the contents of our listview control within an update panel in order to only refresh this specific information.
<asp:UpdatePanel runat="server" ID="up">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
<ContentTemplate>
<asp:ListView runat="server" ID="lv">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</LayoutTemplate>
<ItemTemplate>
<asp:HyperLink runat="server" ID="link"
Text='<%#Eval("BlogTitle") %>'
NavigateUrl='<%#Eval("BlogId", "entry.aspx?BlogId={0}") %>' />
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
Note the "Triggers" tag. If our button was nested inside of the update panel, the update panel would automatically refresh when the button was clicked. However, in this case, our button is outside of the update panel. In such instances, we need to add an "ASyncPostBackTrigger" that points to the button that will trigger the update panel's post back.
Step 5: User Feedback
When implementing partial page refreshes, the user can sometimes become perplexed. It may seem to him that the page is simply not responding. To compensate, we'll add the ubiquitous "loading icon" to the page. This will supply the user with some feedback to let him know that the page is in fact processing. We can use the "Update Progress" control to accomplish this task.
<asp:UpdateProgress runat="server" ID="uProgress">
<ProgressTemplate>
<img src="img/ajax-loader.gif" alt="Please Wait" />
</ProgressTemplate>
</asp:UpdateProgress>
Within the Progress Template, I've added an image tag that contains my loading icon. So, while the update panel is refreshing, this loading icon will display. When the post back has completed, the icon will disappear.
You're Finished
Though this article moved a bit quickly, the screencast describes every method step by step. If you have any additional questions, please leave a comment and we'll do our best to assist you. What I've supplied today is a simple way to search your site. However, in a real world situation, you'll most likely implement a more advanced search method. I'd love to hear your thoughts on the best ways to accomplish this.
If you'd like more ASP.NET tuts, be heard! Leave a comment and voice your opinion. This framework is too powerful to ignore. Digg it, SU it, DZone it! Thanks everybody! Bye bye!
Subscribe to the Weekly Screencasts
You can add our RSS feed to your ITUNES podcasts by doing the following:
- Once ITUNES has loaded, clicked the "Advanced Tab"
- Choose "Subscribe to Podcast"
- Enter "http://feeds.feedburner.com/NETTUTSVideos"
That should do it! The screencast will also be searchable on ITUNES in the next twenty four hours.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Jeff October 1st
Awesome to see this. Maybe I will start to right some tutorials for .net
( )Drew October 1st
I like tutorials on this subject! Keep up the good work!
( )Jeffrey Way October 1st
@Jeff – I wish you would! We pay $150 per accepted tut.
( )Ben Griffiths October 1st
Informative article, nice to see some ASP too
( )Greg October 1st
This seems like a great resource!
( )Thanks.
- Greg
Jeffrey Way October 1st
Everyone – Just leave a comment if you have any questions about the tut. There are a bunch of ASP devs on this site that will help you.
( )Jason October 1st
I think a lot of the bad blood towards ASP comes from ASP Classic, .Net is worth checking out.
( )Jeffrey Way October 1st
@Jason – I agree. Classic ASP had some problems. But 3.5 is quite incredible. It’s my favorite framework.
( )J Rinc October 1st
Great tutorial! This is very helpful for ASP .NET beginners. I would like to see more AJAX tutorials
( )Stacy October 1st
I enjoyed this tutorial. Please please please make more tuts for ASP.NET!
( )Jeff October 1st
@Jeffery – sounds good I’ll start coming up with some ideas. I never bothered before becasue I didn’t think people on this site would be interested.
( )Yosi October 1st
I enjoyed !!!
Post more
I like you screencasts,you can add jQuery instead of this Ajax??
( )Jeffrey Way October 1st
@Jeff – Looking forward to it!
( )@Yosi – Yes, you can do something similar with jQuery. To pull from the database, it would probably be best to use jQuery to call a web service. Maybe a future tut? We’ll see.
Jeff October 1st
@Yosi – Microsoft has actually just announced that it is going to be distributing jquery with its dev enviroment. Many thanks to Scott Gu for this. Although it appears that they are mainly going to focus on using it for it’s selectors and easy animation many people use it for ajax.
( )Jeffrey Way October 1st
@Jeff @Josi – Yeah, I just wrote about that on Theme Forest.
http://blog.themeforest.net/general/intellisense-support-for-jquery-in-visual-studio/
I’m very excited about it. It’s nice to see Microsoft embracing open source for a change.
( )Moksha October 1st
thanks for sharing, FIRST ASP.NET tutorial and its really nice, thanks again, its a really good news for ASP.net programmer. coz your tutorial are really high quality.
thanks again
( )ZazaBronson October 1st
Nice tutorial, keep ‘em coming!!!!
( )Drew October 1st
Are there any cheaper options besides Camtasia Studio for creating screencasts? $300 is pretty steep for my newlywed budget.
I’m definitely going to be diving into the 3.5 framework and it would be fun to try my hand at making screencasts.
( )Jeffrey Way October 1st
@Drew – Yeah, there are a few alternative. But, I’ve found Camtasia to be the best. That’s why so many people use it for web dev tuts. There’s a free 30 day trial on their site if you want to try it out. Otherwise, just google “free screencast software”.
( )James October 1st
A great screencast Jeffrey! Who needs Lynda.com!?
And this comes just in time too – I’m working on a .NET project at work!
( )Jeffrey Way October 1st
Thanks James!
( )Vladimir October 1st
At work I program with ASP.NET 2.0 we are migrating to 3.5. LINQ is very cool! Thank you for the post!
( )Joel October 1st
Hi Jeff, this was a great first tutorial and screencast on ASP.NET; not too simple yet not too advanced that most beginners can’t follow. Please continue adding more in the future.
( )Drew October 1st
@Jeffrey Way — cool, thanks. I’ll give the 30 day trial a shot and we’ll see where it goes from there.
( )Lamin Barrow October 1st
First ASP.NET tut on this site ever. Now we are talking. Please keep em coming.
( )Jason October 1st
just starting to learn move from classic asp to .net, so keep the tutorials going. this one was very easy to understand.
( )najam sikander awan October 1st
hi jeffray
Very nice tutorial I myself is asp.net developer and I am big fan of jquery. I am also thinking about creating some tutorials with asp.net 2.0 or 3.5.
And I have some requests for you I am dying to learn how to write asp.net server controls and then how to write asp.net wrapper for existing jquery plugins because i need to call plugins functions from my code behind.
( )insic October 1st
first ASP tut in nettuts, and its really helpful.
( )lawrence77 March 27th
Its not ASP, its ASP.NET!
( )insic October 1st
Thank you by the way.
( )Shane October 2nd
Thanks for posting the first ASP.NET tutorial. I’ve gotta say I’m surprised at the amount of positive feedback; this is, if I’m right, pretty much the first non open-source article posted on the site, and I had suspected that many people would have been anti-Microsoft.
You’ve managed to touch on two areas of ASP.NET 3.5 that make building dynamic websites relatively simple. Firstly, LINQ has revolutionised the way I write data-access code. Doing it by hand would take quite a while, but LINQ enables you to have full data access within moments. Would I be right in saying that LINQ to SQL (the method for accessing data from databases) only currently supports SQL Server variants? Though I’m pretty sure support for other DBs is on the way.
Secondly, ASP.NET AJAX is a fantastic framework. The simplest way of getting things up and running is the UpdatePanel control as you’ve shown. I use it extensively on my sites, with a lot of jQuery too for effects and DOM manipulation. I didn’t know about Microsoft’s jQuery decision – that’s really interesting stuff. I use jQuery with ASP.NET AJAX client side stuff because I find some of the ASP.NET AJAX client side libraries a little verbose.
Just 2 more things, the first being that I use C#, and whilst I don’t want to open a VB.NET/C# debate, I guess there will be some forthcoming ASP.NET tutorials that use C# and some that use VB.NET.
Secondly is about the naming of controls – I prefer to stick to the convention classname + descriptor for my controls. So, where you’ve used ‘lv’ for your ListView, I’d use ListViewSearchResults. This makes it completely clear in any ‘code-behind’ that the item you’re referring to is a control, and prevents the misunderstanding of abbreviations.
( )Stefan October 2nd
brilliants thanks for this more asp.net tuts would be ace!
( )Matt October 2nd
Nice to finally see tutorials on ASP .net 3.5…
( )Look forward to seeing many more.
Heitor October 2nd
Great Heffrey !
Thank you.
Maybe, I think if you write your posts in C# instead of Vb, can be a little bit better, because I think its more similiar to other common languages, like Java, JavaScript, PHP, such like this.
Just a sugestion.
But anyway, Awesome!
Thank you for ASP.NET tutorials. Keep track of this.
Good Bye
( )Philo October 2nd
Nice Tutorial although ASP is not really my thing
( )Shane October 2nd
Wow Jeffrey – looks like the ASP.NET tutorial went down well
I’ll get on with writing my suggestion
( )Liam October 2nd
good video, great to see somrthing done from start to finish. you shoud do plenty more maybe linking in some jquery.
( )Joel October 2nd
@Shane
( )Yes, LINQ to SQL only supports SQL Server. If you want to use an ORM framework with another (non-Microsoft) database as the backend of a .NET environment, you should look into NHibernate or even Entity Framework. The latter was release by Microsoft at the same time as LINQ to SQL.
Jeremy October 2nd
We work with ASP.NET exclusively at work, and though I dont necessarily share the “Microsoft sucks” attitude (I’ve always been a PC guy), I’ve never been too fond of the framework.
I’d love to see a from-scratch series.
( )Ram October 3rd
Nice article. Its really useful for me..
( )Windows Themes October 3rd
Thank you so much for this tutorial. It`s very useful for me
( )Jeff October 3rd
I have decided on a topic for some more ASP.net centered tutorials. Can’t work on it today, but I plan to right it this weekend. I no authority to say they will use it, or if they do how long it takes to post but be on the lookout in case it does.
( )Roshan October 3rd
Some really great info listed here. Never been in this area but I like to explore.
Thank you and keep posting good stuff.
Roshan
( )Freelance Developer
http://www.instantshift.com
Nate Coventry October 5th
I would really like if you could do a tutorial on “Asp.NET from scratch”. I’m really excited to learn more. I love the framework.
Thanks,
( )Nate
Anthony Woods October 5th
Wow, a useful tutorial couldn’t be as more important as the now, im doing my university course at the moment and were diving right into the ASP.NET end and this tutorial has given me a positive lift to helping me through some of the basic stuff. Thank you alot, and I will be looking forward to many more tutorials like these.
( )Darren October 6th
Top class Tutorial.
Just what I needed. My first look at Linq and it now doesn’t look do daunting.
Thank you very much.
Will be coming back for more.
Oh an Ajax Shopping cart Tut would be good too.
Thanks again.
( )Jeff October 6th
I know I said I would write a new tutorial this weekend. I got started on it but life happened. I should be able to finish it up and get it submitted tommorrow.
( )Yosi October 7th
Hi,
I got a problem with viewing.
I want to do something like this -
When I am going to Default.aspx?id=1 then it will pull to me where the page_id = request.querystring(”id”).
The Problem is I don’t know how to do this in C#,
I have -
Database name:Database.mdf
Table name:content
Linq to sql class : ContentLINQ.dbml
And this is my code..
ContentLINQDataContext db = new ContentLINQDataContext();
var content = from p in
when i am writing db. or p.the helper don’t give me my table name (content)..
( )can someone help me?
Yosi October 7th
Hi,
sorry about double posting..
I fixed it here is the new problem =X :
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1955: Non-invocable member ‘System.Web.HttpRequest.QueryString’ cannot be used like a method.
And how i can do if there isn’t content then show “Hello” for example.
Thanks for helpers
( )Jeff October 7th
@Yosi – I believe you want to call Request.QueryString["id"] and not Request.QueryString(”id”). QueryString is a collection not a method. You just need to call the right indexer. I hope that helps.
( )Rob October 8th
I’m a newbie on ASP.NET but when I see this stuf, I can’t wait to work with it.
( )I would like to see more of this video tutorials about ASP.NET
Jackson October 8th
Have been waiting for articles on asp.net for a while now … looking forward to more asp.net stuffs … thanks
( )naspinski October 10th
I was just wondering if they would be interested in any asp.net stuff and it is great to see all the positive feedback. I think I will submit my first Tut this weekend… I have a ton of ideas! (mine will be in C#)
Any interest in SharePoint development?
( )Christian October 12th
So, there was a lot of positive feedback on this article. And to be honest, I really do not know why. I’m going to be straightforward in this comment, and really just throw out my impressions of ASP and .NET. First I would like to say that I have been a developer for 6 years, and I have been writing PHP most of my developer-life, but some Python too. And lately I’ve been turning to Ruby. Enough about my background.
First of all, just seeing you pull that IDE up, with that crazy bad windows-style application design made me sick. I am by the way not a Microsoft hater, I am a Windows hater. Most of my life I have spent on Windows, but also Linux RedHat, Ubuntu and for two years now Mac OS X.
The syntaxing looks awful. As easy as that. The language itself is just straightforward ugly. I have never seen such a mess where you actually have to specify where the document runs at for every freaking object! I just don’t see it, I can’t see one single positive thing about this language. Please give me SOME! We have Ruby with it’s beautiful innovative syntax, we have PHP which is so simple any one can learn it, but it still can be a robustive object oriented language. And Python. I’m not even gonna start on Python.
But really, give me ONE positive thing about this language. I am really open for debate on this subject, send me a mail chridal :..:.. gmail :..:.::. com
( )Jeffrey Way October 13th
@Christian –
You’re more than welcome to your opinion, but I know many people that would laugh at your statements.
Show me a data access syntax that is more clear and readable than LINQ, and I’ll absolutely change my mind.
There are reasons why Microsoft has invested so much money in this framework.
( )Jeff October 14th
@Christian -
Are you serious. Well I can really say much for PHP, Python or Ruby. But VB isn’t all that bad. I do find that I like C# better. I am not sure what you mean by specifying where the document runs at ,unless you are talking about the “runat = server” in the controls. I will maybe give you that this is a little unecessary but has the benifit that the control isn’t processed by the compiler if it isn’t there and the straight html is output. There are way to not have a runat property. Anyway, i dont think that makes it ugly. Plus, asp.net at its core is pretty fast and responsive, anf overall VB and C# i believe are highly readable.
The whole reason why I went C# and .net was the IDE that was available and the fact that I was able to read the sample code pretty easily. PHP is ok but I don’t find it nearly as readable. And I haven’t meet anyone thay can argue against the readability of LINQ for data access as Jeff Way already pointed out.
Anyway to each there own your like PHP and Ruby, thats cool. Not a problem. They are very good, but it really sounds like you just don’t like the fact the the IDE is not as pretty as some of your OSX text editing apps. And ok, I will give you that, the IDE wasn’t built to be eye candy. but that does’t make tho whole .net framwork worthless.
( )Hasan November 3rd
@Christian,
Do you think PHP is more readable that VB.Net or C#.Net?
Are you serious??
( )Mukarram November 18th
@Jeffrey – I really like the way you teach us.
( )BTW as usual tut – simply awesome.
Stimul8d November 18th
Truly excellent work again Jeff, it’s real nice to see ASP getting some attention. It’d be nice to have the option to download the source in either VB or C#.
One slight issue i have is the use of Hungarian notation (prefixing the control id with an abbreviated form of it’s type; lblUsername instead of just Username for instance) in your control ID’s. I know that many developers ONLY use hungarian notation for control names but there is always more than one visual representation of the data available and if that control changed in the future then you most likely have have a bunch of code changes to make. By adding that prefix, you’ve potentially lost a level of indirection.
Of course, this is just a matter of preference/religion.
( )Barry November 21st
Great Tutorial!…I’d love to see more .net screencasts
( )Kitty November 21st
Hi Jeffrey,
( )Very good tut! as beginner am developing site with asp.net / LINQ / SQL pushed a search functionality a bit in the future, cause I thought it would be very challenging.. but… your tut is very good and clear even for me as a beginner it was very understandable. Am going to try and use this!
Thanks so much…
Having any ideas for future tuts on ASP.NET or LINQ?
Kitty November 21st
Oh yeah a C# version would be great.. but what I have seen in the tut I think even I can translate… but maybe for others??
( )Kabz December 17th
Hi,
( )I’m a comlete novice and would like to get my head around the basics of trhis tutorial. I also need to know which is the best way of becoming a great programmer…….i know you have to love the web and stuff…….but a more purposeful step i prefer because the love i do have……….thanks for the great work you’re doing and i really wish i could add somehting to help you in your plight.
Jooma Levizt December 22nd
What if i have a huge data base ? Can I still use this search function ? Can I any suggestion on implement an effective search in ASP.NET web app for a huge DB ?
( )Matt January 5th
This is cool, I’ve seen you use .php files in visual studio, How do you do that, I have VS 2008 and it doesn’t by default know how to handle .php.
( )joao January 20th
thank you.
( )great video, clear and explanatory.
Nils February 9th
Hey dude.
Loved the video.
Could you guys make som more vids about ASP.NET VB?
( )Would like to see some more vids about fx building a complete websites with Jquery-/AJAX together with like I said, ASP.NET VB…
- Hope this is understandeble
bruno February 15th
Great Tutorial.
( )I hope to see more ASP.NET Tutorials in the site.
Norm February 26th
Great job, and thanks for getting into asp.net! I’d love to see more asp.net tutorials.
( )lawrence77 March 27th
I love .NET as well as screencast by Jeffrey!
( )Keep up your good work and continue your work in .NET!
Christer May 19th
This screencast was spot on for a project I’m working on. But please don’t let it stop here. Add some more screencasts. What about a ASP.NET week, or some net+ tuts?
ASP.NET is a fairly popular framework. And by adding more tutorials and screencasts about this topic, NETTUTS will surely expand the user-base.
( )Tyler May 29th
I ran into this screencast while looking for a way to implement a search function on an ASP.NET site I’m building, and this tutorial did a great job of stepping through the process and explaining how each of the elements in the project work.
I also loved that it incorporated (1) a database, (2) ASP.NET, (3) LINQ, and (4) AJAX. This was a really great lesson. Keep up the good work!
( )Steven August 2nd
Hi,
In this tutorial, all the hyperlinks NavigateURL are set to the same page.
( )What can I do to set different NavigateURLs for different hyperlinks?
Alex Ilatzis August 8th
Hi Jeffrey, what if my database is larger than one table. many tables and colums the to search for the keywords becomes spaggeti linq query. Or is it a simpler way maybe use a store proc and just give a string to the store proc and return the results and then bind them. What do you think?
( )Alex Ilatzis August 8th
i tried to build a sample of this in c# but the
var q = from b in db.Contents
where b.ContentID = Request.QueryString["ContentID"]
select b;
in entry.aspx page
the Request.QueryString doesn’t work any idea?
the complier complaints that cannot implicitly convert type ’string’ to ‘int’
( )missD August 11th
heloo to experts and to all, ccould anyone convert that code into c#.. im using asp .net version3.5 language c#..
( )thank you
Prashant September 4th
Can anyone convert that code into c#
( )i need in C# language
an September 19th
Great tut
( )Ian November 7th
This helped me a great deal. Thanks.
Would be good to have examples in C#.
( )