In ASP.

NET terminology, Web parts are components that have some predefined funct
ionality and they can be embedded in any web page. User can change the appearanc
e and data related parameters of all web parts independently.
Advantages of Web Parts
Web Parts facilitate personalization of page content. They let the users to move
or hide the Web Parts and add new Web Parts changing the page layout.
Web Parts let the user to export or import Web Parts settings for use in other p
ages.
Web Parts can work in unison with ASP.NET role-based web access model. Each Web
Part can be configured to be visible or hidden for any role.
Web Parts can share data with each other.
Before starting the code, let us look at few of the controls and terminologies t
hat are useful in implementing web parts.
WebPartsManager: This is a non visual control that has to be added on every page
that needs to have web parts embedded in them. This control will facilitate the
management of different web parts on a page.
CatalogPart: This control is for managing the UI elements of all the web part av
ailable on a page. This control manages the web parts for the whole website.
PageCatalogPart: This control provides the same functionality as the CatalogPart
but it does it for an individual page rather than for the complete web site.
EditorPart: This control lets the user customize the properties of web parts.
WebPartZOne: This control is like a container for web parts. Any web part can be
added to WebPartZone only.
EditorZone: This control is like a container for EditorParts. Any EditorPart can
be added on EditorZone only.
CatalogZone: This control is like a container for CatalogParts. Any CatalogPart
can be added on CatalogZone only.
Also let's take a quick look at the different modes the web parts can have befor
e going in details.
Web Parts Modes
Normal mode: The user cannot edit or move sections of page.
Edit Mode: End user can edit Web Parts on the page including Web Parts title, co
lor or even setting custom properties.
Design Mode: End user can rearrange the order of the pages Web Parts in a WebPar
tZone.
Catalog Mode: End user can add new Web Parts or add deleted Web Parts in any Web
PartZone on the page.
Let us now see how we can add web parts on a page. First we will decide how and
where we would like our web parts to appear. Let us decide three locations for w
ebparts. One is in the header section of our site, second in footer section and
third in content section of page.
Let us add a WebPartsManager and three WebPartZones on the page.
Once we have the three web part zones added on the page, we will add a label web
part on our headerzone.
Add calendar, a textbox and a drop down on our content zone.
Add a copyright message on the footer zone.
Let's add a page catalogpart on the page too (we will see why this is useful).
The label on the header part will
x on the content web part will be
n list will be used to enable the
let them drag and drop these web
arkup of our page:

be used to display the users name. The text bo

used to take the user name input. The drop dow
user to change the appearance of web parts and
parts in any of the zones. If we look at the m

Collapse | Copy Code

<form id="form1" runat="server">
<div>
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
</div>
<asp:WebPartZone ID="WebPartZoneHeader" runat="server" Height="1px" Widt
h="865px"
HeaderText="Welcome">
<ZoneTemplate>
<asp:Label ID="welcomeWebPart" runat="server" Text="User" title=
"Welcome"
Width="199px"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
<asp:WebPartZone ID="WebPartZoneContent" runat="server" Height="1px" Wid
th="865px"
HeaderText="Pick a Day">
<ZoneTemplate>
<asp:TextBox ID="TextBoxName" runat="server" Title="Enter your
name">
</asp:TextBox>
<asp:DropDownList ID="DropDownList1" runat="server"
Title="Change Display modes" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:Calendar ID="CalendarWebPArt" runat="server" title="Pick a
day">
</asp:Calendar>
</ZoneTemplate>
</asp:WebPartZone>
<asp:CatalogZone ID="CatalogZone1" runat="server">
<ZoneTemplate>
<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
</ZoneTemplate>
</asp:CatalogZone>
<asp:WebPartZone ID="WebPartZoneFooter" runat="server" Height="35px" Wid
th="865px"
HeaderText="Copyright">
<ZoneTemplate>
<asp:Label ID="footerWebPart" runat="server" Text="This is a tes
t website."
title="Copyright info"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</form>
When we run the page, we can see that user can see these web parts, he can choos
e to minimize them, restore them or even close them. The drop down list shows al
l the possible views for the web parts on the page. We populated the dropdown wi
th all the possible modes of Webpartmanager on this page and if the user changes
the view, we will use the new value to set the view mode of web parts.
Collapse | Copy Code
protected void Page_Load(object sender, EventArgs e)
{
welcomeWebPart.Text = TextBoxName.Text;
if (IsPostBack == false)
{

foreach (WebPartDisplayMode mode in WebPartManager1.SupportedDisplayMode

s)
{
DropDownList1.Items.Add(mode.Name);
}
DropDownList1.SelectedValue = WebPartManager1.DisplayMode.ToString();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (WebPartManager1.SupportedDisplayModes[DropDownList1.SelectedValue] != nu
ll)
{
WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes
[DropDownList1.SelectedValue];
}
}
There is one small problem though. If the user closes any web part,
be able to restore that web part. For providing this functionality,
the page catalogwebpart that we added on the page so that the user,
log mode, should be able to change the appearances of web parts and
the closed web parts.

he will not
we will use
when in cata
even restore

The web parts can also use the data on other web part. We can create a Connectio
nProvider and a ConnectionConsumer and then use the static connection property o
f Webpart manager to facilitate this.
Points of Interest
What we have done is very introductory and the idea of the article was to let be
ginners understand the possibility of having web parts and creating them in ASP.
NET. We have not discussed the full details of web parts here. There is a lot mo
re to web parts which once understood can do wonders in web page layout and prov
ide users with customizable user interface.
History
28 Feb 2012: A Beginner's tutorial on ASP.NET web parts
15 January 2012: Uploaded some good quality images.
License
This article, along with any associated source code and files, is licensed under
The Code Project Open License (CPOL)
About the Author

Rahul Rajat Singh

Software Developer (Senior)
India
Member
Follow on Twitter
I Started my Programming career with C++. Later got a chance to develop Windows

Form applications using C#. Now using C# & ASP.NET to write Information Systems,
e-commerce/e-governance Portals and Data driven websites.
My interests involves Programming, Website development and Learning/Teaching sub
jects related to Computer Science/Information Systems.
Some CodeProject Achievements:
5th in Best C# article of October 2012
4th in Best Web Dev article of September 2012
3rd in Best C# article of August 2012
5th in Best Web Dev article of August 2012
5th in Best Web Dev article of July 2012
3rd in Best Overall article of June 2012
2nd in Best Web Dev article of June 2012
5th in Best Web Dev article of May 2012
6th in Best Web Dev article of April 2012
4th in Best C++ article of April 2012
5th in Best C++ article of March 2012
7th in Best Web Dev article of March 2012
5th in Best Web Dev article of February 2012
7th in Best Web Dev article of February 2012
9th in Best Web Dev article of February 2012
5th in Best C++ article of February 2012
Article Top

Sign Up to vote

Poor

Excellent