laying out a form using c# for a webpart in sharepoint

Question

I have created a webpart in c# for sharepoint. its basically a form with text boxes, literals, validators and buttons.

im not sure how to render this form to make it look pretty. The layout etc is being done entirely within this c# class.

At the moment to get started im just overrinding CreateChildControls() method and adding each form control using something like: this.Controls.Add(submitButton);

any ideas on how best to layout this form?

Thanks.

Answer 1

I would recommend grabbing the source from an existing sharepoint page and using the styles defined by sharepoint. This link to the styles in 2003 is old, but still a good guide to get started. Most of the CSS class names haven't changed.

Answer 2

In my web parts I include css files in the solution and inject them in the page using something like:

this.Page.Header.RegisterCss("/_layouts/path/to/css/file.css", false);

Answer 3

You can override the RenderContents(...) method to manually render the HTML in anyway you want to. This includes adding any css includes, scripting includes, etc. that you want/use.

You can render your child controls to strings and then output them as well, but you probably should NOT call the base.RenderContents(...) method.

Just make sure you don't forget to render your child controls.

Answer 4

If it's important for you to see as you design, use the SmartPart which embeds a user control in a web part. (In case you didn't know, user controls can be designed using the tools within Visual Studio.)

If you prefer to hand-code, then you're on the right track. Simply create and set initial properties for your controls within the CreateChildControls() method and use this.Controls.Add() as you have been.

In both cases, where possible use the CssClass property so you can tinker with the look and feel in a CSS file without having to recompile. You could hard-code the CSS class names but it would be better to use the web part properties or an external config source to store these. Have a reference to the CSS file in your master page or inject it into the page using the other techniques mentioned in this answer.

The MSDN articles Web Parts in Windows SharePoint Services or Creating a Basic Web Part might also help.

Answer 5

When creating custom webparts I also prefer to implement them by overriding the CreateChildControls() and Render() methods. In the Render() method I have full control of the html output and I can render my inner controls by calling this.someInnerControl.RenderControl(writer).

Having full control of the html output also makes it easy to style the html using CSS. As other people suggests, use an external CSS file and apply the styes to the class attribute on html elements or CssClass property on ASP.NET web control.

When I implement webparts, that does not require special branding, I prefer to reuse the CSS classes defined by SharePoint. This will ensure that my webpart is visually similar to the webpart provided by SharePoint and that I keep a consistent look and feel.

When using the SharePoint defined CSS styles, you should be aware of your html output. Some of the CSS classes requires a specific html structure to properly render. You can always use the browsers "View Source" to check the html of the SharePoint element you are trying to imitate.