SharePoint AJAX C# web part - visual layout of UpdatePanel controls

Question

I'm creating a SharePoint web part in C# that is using an UpdatePanel for some AJAX magic. Everything is working fine, but I'd like to know how to lay out my controls visually (without using SharePoint Designer). I just have two dropdownlists, some labels, a button, and a textbox. I am creating them within the overridden CreateChildControls. Thanks!

Answer 1

there are a couple of ways you can lay them out. you can add a Table object and add rows, cells, etc. and add your controls to the cells.

Alternately, you can override the RenderContents method and output HTML directly to the write that is passed in as a parameter. If you do this method (its probably less work and more efficient then using the Table objects), you should use a StringBuilder to build your HTML then output the results to the writer. This method should gain you some performance.

Sadly, there is no visual WYSIWIG editor for this method.

Answer 2

Unfortunately, there is no visual designer for web parts that are created programmatically.

You can use a user control and the SmartPart web part from codeplex to gain advantage of the visual designer for .ascx user controls.

Answer 3

add a container panel around your controls and give it a class. Add the panel to the UpdatePanel's container. Add all other controls to the new Panel's Controls.

You can now use css to do your styling, using the container panel's CssClass as reference.

in code:

protected override CreateChildControls()
{
  // .. creation of updatepanel, say upd1
  Panel container = new Panel{CssClass = "webpartContainer"};
  upd1.ContentTemplateContainer.Controls.Add(container);

  container.Controls.Add(dropdown1); // etc. etc.
}

The Css:

.webpartContainer
{
  /* if needed add some style here also */
}

.webpartContainer select
{
  /* add style */
}

.webpartContainer .specificClass
{
  /* give controls a class of their own in CreateChildControls 
  if controls of the same type need different styling
  (i.e. you have more than 1 select that need to look different)  */
}

Answer 4

You can use ASCX files in web parts.. just load it from your webpart class in CreateChildControls like so:

var control = Page.LoadControl("/_CONTROLTEMPLATES/yourproject/your.ascx");
Controls.Add(control);

This way you can use the normal way with Visual Studio to layout your webpart. Much nicer than building HTML in code which is a pain to say the least.

(this is also much better than using SmartPart which causes issues with the trustlevel and deployment)