ansaurus

Question

What's the best layout to refresh content without refreshing the whole page on ASP.NET web page?

Answer 1

+6 A:

You need jQuery in your life.

Using jQuery with ASP.NET - A Beginner's Guide

Rafael Belliard 2010-08-24 12:36:59

Ok, it is on my to-do list :-) But generally, I guess even jQuery works on some kind of page layout to do its magic. So what would that be? Can you describe this in a couple of sentences? Thanks.

Timo 2010-08-24 12:40:29

very cool tutorial. Thanks Rafa!

user279521 2010-08-24 12:57:44

@Timo: I'd be glad to help, but I didn't really understand. You want what???

Rafael Belliard 2010-08-24 15:09:00

Never mind, I now understand this from DavidSleeps example. Thanks for your help and the tutorial link, I will read it asap.

Timo 2010-08-25 06:27:57

Answer 2

+1 A:

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

Patricia 2010-08-24 12:40:26

I would prefer not having to learn ASP.NET MVC yet on top of learning web development, ASP.NET and JavaScript, so I was hoping to get by without it for my relatively small starter project :-)

Timo 2010-08-24 12:49:21

ahh, alright then,i'd still recomend it, but if you've got enough on your plate already then plain old asp.net with update panels will be the way to go. the concept of master pages and content pages is a little different then what you are thinking it is i think. a content page with a master page specified will automatically have anything on the master page added to it when that page is called.

Patricia 2010-08-24 13:15:48

You are right about my misunderstanding of master pages. I considered them a replacement for frames, which I now understand is not true. Lets say I just use update panels: How/where do I place the various contents for those? In separate .aspx files I guess, right? Or in user controls? How do I load the content then to the update panel? Is there a similar way as davidsleeps described when using jQuery, some function to load an .aspx file to the update panel?

Timo 2010-08-24 13:36:36

i haven't done much with update panels myself, because they are rather clunky and not to efficient. someone else will have to explain the inner-workings of how to use them :(

Patricia 2010-08-24 13:49:46

Answer 3

+2 A:

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.

JB King 2010-08-24 12:40:46

Ok, I fiddled around with the ASP.NET UpdatePanel, but I am still wondering: Is the MasterPage and multiple ContentPages the correct approach for that?

Timo 2010-08-24 12:47:18

Answer 4

+1 A:

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"&gt;&lt;/script&gt;

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

davidsleeps 2010-08-24 13:20:54

Ah, thanks! I get the idea now.

Timo 2010-08-24 13:30:51

Answer 5

+1 A:

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.

o6tech 2010-08-24 13:36:17

Thanks. How do you then get the different User Controls onto the UpdatePanel dynamically, depending on which one is needed at the moment?

Timo 2010-08-24 13:46:52

You can load the controls dynamically or add them to the markup and display them based on the user interaction. Generally, you should separate each individual section you want to update into it's own UpdatePanel. Here's a quick example from Microsoft -- http://msdn.microsoft.com/en-us/library/bb398867.aspx.

o6tech 2010-08-24 14:06:34

ansaurus

tags:

views:

answers:

What's the best layout to refresh content without refreshing the whole page on ASP.NET web page?

related questions