ASP.NET Add UserControl with AJAX

If you are using .Net 3.5, you can enable ajax easily.

I am going to talk about addina user control .ascx to your web application without refreshing the whole page. I use this to achieve ajax navigation of my content pages. simply make your content pages into .ascx and dynamically add the user control to your page. I am using this with master page but won’t talk about master page here.

Fisrt, you will have to create a solution using .Net framework 3.5. you will need two object,

the ScriptManager which manage javascript and the UpdatePanel where you put ajax enable objects in it. You also have to add ContentTemplate tag inside update panel in order to make this work.

Create your .ascx, add a PlaceHolder at where you want your .ascx being added and add an object that trigger an event, and do the dynamic addition of user control inside the event handler. Such as adding a button and then double click it, the IDE will take you to the click event handler.

This is how you load and add your user control.

UpdatePanel updatePanel = (UpdatePanel)Page.FindControl("updatePanelId");
Control userControl = Page.LoadControl("path to your .ascx"); //e.g. @"~/usercontrol.ascx"
placeHolder.Controls.Add(userControl);

you are now able to add user control but your page will be refreshed. Because we didn’t register our trigger control. I think there are about 3 ways you can do this. I do it in the way which I think is the simplest.

Inside your page_load() method, write this

scriptManager.RegisterAsynPostBackControl(button);

you can now see that your user control is being add with ajax. But if any postback occur, the user control will just disappear. This is because every time a postback occur, the page is re-render with the controls tree in the Page object. I am not going inside to explain the details, here is what I do.

you store the dynamic add user control information in your session, then inside page_load() you check that information, then add the dynamic control there.

add this at the end of the first piece of code snippet.

Session["virtualPath"] = "path to your .ascx"

then in you page_load(), write something like this.

if (Session["virtualPath"] != null)
{
Control userControl = Page.LoadControl(Session["virtualPath"]);
placeHolder.Controls.Add(userControl);
}

Because we are adding it with ajax, I don’t think you need to do anything to keep the values inside your user control. If they disappear and you what to keep them, you may try to move those code inside page_load() to the viewstate event handler.

^^ I will write about generating .xlsx on the fly inside memory with OpenXml SDK V2 CTP when I have time. See ya.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s