I am a beginner to web development and ASP.NET. I am creating a web application (not public, so SEO, bookmarking etc. is of no concern) with the typical layout of header on top, Navigation on the left, content on the right. I want the content to update without the whole page reloading when selecting something on the navigation bar. What is the typical way to implement this? MasterPage with ContentPages and using an UpdatePanel (tried this, but does not seem to work, I guess because the URL is different for each content page)? Using Frames? Using an iFrame for the content part? UserControls for the content part?
Thanks,
Timo
JQuery is good stuff, however I think there's a case to be made for UpdatePanels in some situations. If you're building a private site that you don't expect to have to grow to support a crazy amount of users, you'll probably have a easier time getting started using UpdatePanels. UpdatePanels are made more for rapid development and prototyping and can take you a long way. You can always swap them out one-by-one in the future if you find the need to.
If you decide to go this route, use a MasterPage for the basic Layouts and then create a Web Form (aspx using MasterPage) for each main page that you want to keep separate from one another. From there, the content of each page can include UpdatePanels within the sections that you want to update with AJAX. Generally, I break up the page behind the scenes using User Controls to encapsulate specific sections.
You need jQuery in your life.
- Using jQuery with ASP.NET - A Beginner's Guide
Look into AJAX for handling refreshing part of the page assuming that you do mean to go back to the server for the menu. The jQuery suggestion from Rafael also has a lot of merits for another way to solve this.
There are at least 2 different cases based on what you describe and it may be worth illustrating both:
Menu fly-outs - This is where the user hovers or clicks on something in the navigation bar and a set of other choices come out. For example, on a grocery site there may be a "Meat" option that you click that then lists various types of meat like Beef, Pork, Chicken, etc. This can be done purely with Javascript and doesn't require trips back to the server necessarily.
Updating the body of the page - This is where you want the guts of the page to change though you need to understand that the URLs the server gets are a little different than what the user will see. Where I work we have a way of marking certain URLs to be AJAX URLs and so they only render that small portion that is needed rather than the whole page. This does carry the downside that the URL in the browser isn't changing so if someone does bookmark it they may get the wrong page, just to warn you now. It is a concern in a sense because if someone tries to hit the wrong page, the application has to handle this gracefully or else they may think the application is down and call you saying, "Are you down?"
Each of these scenarios makes sense ot my mind as you may have to get a little more specific with what you are doing here and how this is structured.
Have a look at ASP.NET MVC it lends it self very nicely to this type of behaviour. that mixed with jQuery (or another javascript library, YUI, MooTools, ummm those other ones) will give you a pretty good framework for building this type of app.
you'll want to make your different content sections partial views, and your "main" section a div that you can load those partial views into.
there's a bunch of tutorials here:
http://www.asp.net/mvc/tutorials
and here:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
If you wanted to try out jQuery and remove using asp.net altogether to help separate the concepts or technologies you are learning you could simply use jQuery with html to have a page with a menu which "without postbacks" loaded in content...
index.html
<html>
<head>
<title>A website</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".navigation a").click(function() {
$("#content").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<ul class="navigation">
<li><a href="content-1.html">Content 1</a></li>
<li><a href="content-2.html">Content 2</a></li>
<li><a href="content-3.html">Content 3</a></li>
</ul>
<div id="content">
</div>
</body>
</html>
content-1.html
<h1>Content 1</h1>
<p>Hello there...</p>
content-2.html
<h1>Content 2</h1>
<p>etc etc etc</p>
and then you could just create sample html pages (pasted 2 extremely simple pages) and the content would be loaded in your div...and from there you can clearly expand in a multitude of ways!
