Ajax enabled Web parts Sample

Posted: April 24, 2008 in MOSS 2007

Ajax enabled Web parts

                I have run into numerous questions and comments on AJAX enabled web parts and seen way to many partial answers that get folks with sight of a functional web part only to dash their hopes. So I am going to throw my hat in the ring and post some code here from one of my AJAX enabled web parts which has been in production for 7 months now. Like everything else, there are different ways to do it so don’t think mine if the only way. It is just one of the ways that works.  I took some liberties here in assuming your current level of expertise in coding web parts and AJAX.  If further explanation is needed, please feel free to post some comments and I can adjust this post.

                First, you can only have 1 Script manager object per page. A good way to do this, embed it in your master page.  Sooner or later someone is going to create another AJAX web part and if you allow folks to push script managers into web parts you will end up with a new web part that breaks yours and theirs.  It is easier to just put it in once in the master page and tell your web part developers to refrain from doing so in their code.

                Next, use the oninit function as the point to set the async triggers and call the EnsureUpdatePanelFixups function I will include further down.

Creating Update Panel object

                I created a helper class to set the values on the update panel and other controls. Here is what I did for creating my Update Panel.  This function is called in the onInit class.

                public static System.Web.UI.UpdatePanel CreateUpdatePanel(string id)

            {

                System.Web.UI.UpdatePanel updatepanel = new System.Web.UI.UpdatePanel();

                updatepanel.ID = id;

                updatepanel.ChildrenAsTriggers = true;

                updatepanel.UpdateMode = UpdatePanelUpdateMode.Conditional;

 

                return updatepanel;

            }

 

                This function is called in the onInit as well. It will override the usual javascript submit functions in MOSS.

 

private void EnsureUpdatePanelFixups()

        {

            if (this.Page.Form != null)

            {

                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];

                if (formOnSubmitAtt == "return _spFormOnSubmitWrapper();")

                {

                    this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";

                }

            }

            ScriptManager.RegisterStartupScript(this, typeof(ProcessSearch), "UpdatePanelFixup", "_spOriginalFormAction = document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;", true);

        }

               

Finally once both the previous code blocks have been called:

//Search submit button async postbaclk trigger

 AsyncPostBackTrigger UpdatePanel1SearchPostBackTrigger = new AsyncPostBackTrigger();

 UpdatePanel1SearchPostBackTrigger.ControlID = BTNSUBMITSEARCH;

 UpdatePanel1SearchPostBackTrigger.EventName = "Click";

 

 AsyncPostBackTrigger UpdatePanel1WorkflowSelectPostBackTrigger = new AsyncPostBackTrigger();

 UpdatePanel1WorkflowSelectPostBackTrigger.ControlID = DGWORKFLOWLIST;

 UpdatePanel1WorkflowSelectPostBackTrigger.EventName = "ItemCommand";

 

 UpdatePanel1.Triggers.Add(UpdatePanel1SearchPostBackTrigger);

 UpdatePanel1.Triggers.Add(UpdatePanel1WorkflowSelectPostBackTrigger);

 

This last section will create async post backs triggers for the specified control events within the panel. Keep in mind, I specifically set the ID for the control and the event that will kick off the async postback. In this example it uses the Click event of a button in the update panel and the ItemCommand event from a datagrid that is inserted in the panel. The controls referenced here MUST be in the update panel

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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