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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Have been waiting for articles on asp.net for a while now … looking forward to more asp.net stuffs … thanks
Thank you so much…very helpful
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?
Hey there, I am a .NET developer who likes C#,
So please get some great stuffs for us to learn..
Thanks in advance :)
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
@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.
@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.
@Christian,
Do you think PHP is more readable that VB.Net or C#.Net?
Are you serious??
@Jeffrey – I really like the way you teach us.
BTW as usual tut – simply awesome.
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. :-)
Great Tutorial!…I’d love to see more .net screencasts
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?
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??
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.
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 ?
A good idea might be to add some caching on your results if you have a huge database. This will work regardless of the database size.
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.
thank you.
great video, clear and explanatory.
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 :)
Great Tutorial.
I hope to see more ASP.NET Tutorials in the site.
Great job, and thanks for getting into asp.net! I’d love to see more asp.net tutorials.
I love .NET as well as screencast by Jeffrey! :)
Keep up your good work and continue your work in .NET!
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.
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!
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?
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?
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’
heloo to experts and to all, ccould anyone convert that code into c#.. im using asp .net version3.5 language c#..
thank you
Can anyone convert that code into c#
i need in C# language
Great tut
This helped me a great deal. Thanks.
Would be good to have examples in C#.
I love that you’ve started posting .net tuts on your site. That’s areally great improvement. I too would like to se more AJAX + .Net tutorials
How can I show the results in another page?
Fantastic tutorial, congratulations.
I have a doubt.
How can I display the results in another page?
I have the search box in tne Default.aspx, but when I type and click search, I want to go to a new page called Results.aspx.
I do not know much about asp.net and how to do this.
Can anyone help me?
Thank you, and sorry about my English.
Hi Ricardo,
This depend of your ASP.NET app model.
If you are using ASP.NET Web Forms, you could, in the click event handler, call directly the Results.aspx page submiting the context search, then you make the query to database in the method Page_Load, after, you could bind the data to gridview or similar control.
If you are using ASP.NET MVC, may return a data from LINQ to SQL or Entity Framework in the Controller page and redirect to a Results View, then you now manipulate the results in your Results.aspx.
Visit the official website. http://asp.net
Hi Mr. Jeffrey Way
Thanks for the tutorial.
I’m a newbie in web development world.
And it has been a long time that I’m looking for a tutorial for ASP.NET
your video really helps me!
Looking forward for your other tutorial
:)
Regard,
Steven
Jeff,
So far I have throughly enjoyed your screencasts. I am a baby in the web industry (< 2years) and am still in school at AiOP. Thanks for being so through with all your casts. They help me tremendously.
Cheers
Thanks, Bryce! Glad you enjoy them. :)
this is great ! i’ve looking for it.
just a little request, can someone, please, help me converting this little project to c# , that will be awsome !
thanks to all of you.
excellent.
Great Screencast. But a few words:
This is based on an old technology within the ASP.NET Core ( WebForms). For the people that want to learn ASP.NET, I suggest them to use ASP.NET MVC from the beginning and not even look WebForms.
And use C#.
I’d agree. This article is a bit old, before the ASP.NET MVC became so popular.
I don’t think you understand that web forms are not old or obsolete in any way. ASP.NET developers can choose to program in their architecture of choice whether it’s MVC or web forms. There’s pros and cons to each architectural pattern, and MVC doesn’t replace web forms at all. It’s better to have a well rounded understanding of what each path provides rather than just knowing one style of development.
Not looking at web forms or thinking that it’s being replaced by MVC is a bad piece of advice.
“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.”
You can out more?
Its a pretty good tutorial for simple search option.
great, awesome and hugely helpful in learning. Please keep adding many more :)
Thanks in advance :)
Hi,
is there a C#version code of this tutorial?
Yeah, I too would like to have this tutorial in a new and updated version, with #C and .NET 3.5/4 inputs. Would be awsome. I’m planning on developing my own blog, and the idea of this posting method seems pretty neat!
Please post a new one Jeffrey – would be most appreciated :-)
Cheers.
/Michael
Thanks Jeffrey.
Great post.
Please Post more videos on Asp.net and LINQ. and also on MVC.. :)
Thanx for posting this video.
what if I need to display “records not found” ?
hey i need a c# code for the search button with in a website so plse send me the proper code.
Nice video, i want to ask something, when i add the linq page and put my database tables it doesn’t create object automatically which means when i used same code like u did :
Dim db As New …
(and after that its not showing me reference to the database?)
why this is happening,
im using visual web developer 2010 express