CODEWITHSUNDEEP
c#asp.netajax
william
william

Reputation: 7704

Load Partial part of the page after the other parts are loaded

I have an Asp.Net page.

<html>
<body>
 <div>
    <!-- Main body -->
 </div>
 <div>
    <!-- Right panel -->
 </div>
</body>
</html>

The above page is the html page.

But it is actually in Asp.Net

For the main page, there will be code behind to fill in the content which is a normal content and load for a page.

But for right panel, the logic is quite complex and will take some time to get the result which content to show.

So, I would like to load that part of the page only after the main page is completed loading.

I have tried Asp.Net AJAX using update panel but I haven't found out the correct behaviour to get this done.

So, I am thinking of using normal ajax but I can't find out where to begin.

So, I am asking is there any way for this and .. any sample code available for this.

Upvotes: 0

Views: 1860

Answers (2)

Luke Mills
Luke Mills

Reputation: 1606

You could try any of the javascript frameworks.

If you use jQuery, you could try:

Set an id on your div:

<div id="right-panel">

Then use this jQuery to load the data for the panel:

$().ready(function() { $('#right-panel').load('http://path/to/your/script') } );

See the jQuery docs for more info.

Upvotes: 1

Chris Gessler
Chris Gessler

Reputation: 23123

Ehem... "normal AJAX"? Microsoft AJAX is "normal AJAX". An Update Panel performs an asynchronous postback, which is very different than, say using a WebMethod - which is probably what you want. You can still use Microsoft AJAX to call the WebMethod. In fact, Microsoft AJAX control toolkit has an extender that lets you plug in the WebMethod call. It's called DynamicPopulateExtender.

DynamicPopulate is a simple extender that replaces the contents of a control with the result of a web service or page method call. The method call returns a string of HTML that is inserted as the children of the target element.

<ajaxToolkit:DynamicPopulateExtender ID="dp" runat="server"
    TargetControlID="Panel1" 
    ClearContentsDuringUpdate="true" 
    PopulateTriggerControlID="Label1" 
    ServiceMethod="GetHtml" 
    UpdatingCssClass="dynamicPopulate_Updating" />

To make it run on "page load", simply add this script AFTER the ScriptManager tag:

<script type="text/javascript"> 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_pageLoaded(PageLoadedHandler); 

    function PageLoadedHandler(sender, args) { 
        var behavior = $find('dp'); // or whatever you named it
        if (behavior) { 
            behavior.populate(''); // or pass in whatever key you want
        } 
     } 
</script>

Upvotes: 0

Related Questions