Helpers for Adding Server Side Controls

by jasonrshaver 14. September 2011 21:39

If you are trying to integrate an ASP.NET server side control, especially one that requires use of a ScriptManager, you will find that the lack of a server side form element can put an end to your ambition.  Getting around this is not that hard, here are the steps.

Changes to SkinBase

Add the following methods to your App_Code\SkinBase.cs file:

  1. #region Setup Controls Requiring ScriptManager
  2. private void SetupControlsRequiringScriptManager()
  3. {
  4.     HtmlForm frm = this.ThisForm;
  5.     if (frm == null)
  6.         return;
  7.  
  8.     string randomId = Guid.NewGuid().ToString("N").Substring(0, 5);
  9.     StringBuilder script = new StringBuilder();
  10.     script.AppendFormat("<script type=\"text/javascript\" language=\"Javascript\">\n");
  11.     script.AppendFormat("    function loadServerControl_{0}() {{\n", randomId);
  12.  
  13.     // script.Append(SetupServerControl(frm.FindControl("MyControlId") as WebControl));
  14.  
  15.     script.AppendFormat("    }}\n");
  16.     script.AppendFormat("    $add_windowLoad(loadServerControl_{0});\n", randomId);
  17.     script.AppendFormat("</script>\n");
  18.  
  19.     Page.ClientScript.RegisterStartupScript(this.GetType(), randomId, script.ToString());
  20.  
  21. }
  22. private String SetupServerControl(WebControl control)
  23. {
  24.     return SetupServerControl(control, String.Empty);
  25. }
  26. private String SetupServerControl(WebControl control, String customScript)
  27. {
  28.     if (control == null)
  29.         return string.Empty;
  30.  
  31.     HtmlForm frm = this.ThisForm;
  32.             
  33.     string MyControlId = control.ID;
  34.     string MyContainerId = MyControlId + "_Panel";
  35.     int MyOriginalIndex = FindParentIndex(control);
  36.     var MyPlaceHolder = new Panel();
  37.     MyPlaceHolder.ID = MyContainerId;
  38.  
  39.     Control MyParentControl = control.Parent;
  40.     MyParentControl.Controls.Remove(control);
  41.     MyParentControl.Controls.AddAt(MyOriginalIndex, MyPlaceHolder);
  42.     frm.Controls.Add(control);
  43.     control.Style["display"] = "none";
  44.  
  45.     StringBuilder script = new StringBuilder();
  46.     script.AppendFormat("        var control_{0} = document.getElementById('{0}');\n", MyControlId);
  47.     script.AppendFormat("        var panel_{0} = document.getElementById('{0}');\n", MyContainerId);
  48.     script.AppendFormat("        if(control_{0} && panel_{1}) {{\n", MyControlId, MyContainerId);
  49.     script.AppendFormat("            panel_{1}.appendChild(control_{0});\n", MyControlId, MyContainerId);
  50.     script.AppendFormat("            control_{0}.style.display = '';\n", MyControlId, MyContainerId);
  51.  
  52.     if (String.IsNullOrEmpty(customScript) == false)
  53.         script.AppendFormat(customScript, MyControlId, MyContainerId);
  54.  
  55.     script.AppendFormat("        }}\n");
  56.     return script.ToString();
  57. }
  58. #endregion

And then add the SetupControlsRequiringScriptManager(); to your OnPreRender method:

  1. protected override void OnPreRender(EventArgs e)
  2. {
  3.     if (HttpContext.Current != null)
  4.     {
  5.         //register the ScriptManager before loading controls or the ComponentArt menu won't work with AJAX pages
  6.         CheckIfRequireScriptManager();
  7.  
  8.         if (!this.HasControls()) //Probably a web form so use the control management technique
  9.         {
  10.             if (m_Template.Content != null)
  11.             {
  12.                 //No controls so html must come from RenderContents. Create a literal to contain RenderContents
  13.                 m_Template.Content.Controls.Add(ParseControl(CreateContent()));
  14.             }
  15.             this.Controls.Clear();
  16.             this.Controls.Add(m_Template);
  17.             // Now move the template child controls up to the page level so the ViewState will load
  18.             while (m_Template.Controls.Count > 0)
  19.             {
  20.                 this.Controls.Add(m_Template.Controls[0]);
  21.             }
  22.         }
  23.  
  24.         SetupControlsRequiringScriptManager();
  25.         SetupMenu();                
  26.     }
  27.  
  28.     base.OnPreRender(e);
  29. }

Using The Result

Now, in your template.ascx, you can take your server side control and give it an ID, for example:

  1. <telerik:RadRotator ID="Rotator1" runat="Server" Width="750" Height="300"
  2.                     ItemHeight="300" ItemWidth="750" ScrollDirection="Down"
  3.                     DataSourceID="xmlDataSource1" ScrollDuration="1500"
  4.                     FrameDuration="3500" >

And add the following line to the SetupControlsRequiringScriptManager method right under the example comment:

  1. // script.Append(SetupServerControl(frm.FindControl("MyControlId") as WebControl));
  2. script.Append(SetupServerControl(frm.FindControl("Rotator1") as WebControl));

and you are done!

How Does It Work

This method works the same way as the ASP.NET Menu control workaround that is built into App_Code\SkinBase.cs, it creates a placeholder for the control and places the control into the HtmlForm, and tells it to not display (via the CSS display tag). Then, when the page is loaded into a browser, a script takes the control and puts it into the placeholder and sets its to display. 

** Warning ** Webkit browsers, such as Chrome and Safari, do not handle the visibility changes of div elements the same as other browsers.  If you are having trouble getting your controls to display in Webkit browsers when everything else is working fine, contact your control vendor for a workaround. 

Tags:

Blog

Submit to DotNetKicks...
Permalink | Comments (0)

About the author

I am a software developer working for Microsoft in Redmond, WA.  In addition, my wife and I own TTXOnline, what is likely the 3rd largest table tennis store in the US.

Month List

Page List