Web Parts is the brand new feature in ASP.NET 2.0. This feature supports personalized content and layout of a web page. This new feature or rather controls allows the user Change, Edit, Move the content of the web page as per their choices.

Web Parts is the brand new feature in ASP.NET 2.0. This feature supports personalized content and layout of a web page. This new feature or rather controls allows the user Change, Edit, Move the content of the web page as per their choices.

A Web Part is a modular unit of information that has a single purpose and that forms the basic building block of a Web Part page. Each instance of a specific Web Part may be similar or may be different in appearance and in behavior. However, the instance of a specific Web Part is based on the same Web Part assembly file that is installed on the site server. A Web Part assembly file can contain code for more than one Web Part. Microsoft Windows SharePoint Services contains many Web Parts that you can use. Web Parts are also available in the online Web Part gallery. Additionally, you can create your own Web Parts, or you can install Web Parts that are provided by Microsoft. 

Let’s get the hands on the subject to understand it better. 

First we will create and web site named DemoWebParts. I am not going through the process of creation of a new web site once again. If you are reading this article first then please refer back to the introduction article of ASP.NET 2.0. 

In the application we will create one theme first. The theme will contain one CSS file and one skin file. The CSS (MyTheme.css) file will look like the following: 

body
{
    font-family: Lucida Sans, Verdana, Arial, SunSans-Regular, Sans-Serif;
    font-size: 75%;
    margin:30px;
    background-color:White;
}

p
{
    font-size: 1.0em;
}

/* Three-pixel bug fix: http://www.positioniseverything.net/explorer/threepxtest.html */
* html p { height: 1%; }
#body-container
{ 
} 

h1
{
    text-align: left;
    font-size: 2em;
    font-weight: bolder;
}

#wrapper
{
    width: 100%; clear: both;
}

#wz1
{
    width: 30%;
    background-color: #B8D7FF;
    float: left;
    height: 250px;
    text-align: center;
}

#wz2   
{
    height:250px;
    width:35%;
    float:left;
    background-color: silver;
    text-align: center;
}

#wz3
{
    width:30%;
    float:left;  
    height:250px;
    text-align: center;
}

#footer
{
    clear:both;
    width:100%;
    background-color:Orange;
    height:30px;
}

h2
{
    font-size: 1.1em;
}

h3
{
   font-size: 1em;
}

h4
{
    font-size: .9em;
}

/* LINK VISTED HOVER ACTIVE selectors must remain in this order to work */
a:link
{
    color: #006699;
}

a:visited
{
    color: #330099;
} 

a:hover
{
    text-decoration: underline;
} 

a:active
{
    color: green;
}

The skin file (Skin.skin) will have the following entries:

<%--
Default skin template. The following skins are provided as examples only. 

1. Named control skin. The SkinId should be uniquely defined because
   duplicate SkinId's per control type are not allowed in the same theme. 

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
   <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>

2. Default skin. The SkinId is not defined. Only one default
   control skin per control type is allowed in the same theme.

<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%> 

<asp:GridView runat="server" SkinId="KylieSkin" >
           <RowStyle Font-Names="tahoma,arial" Font-Size=".85em" />
            <HeaderStyle BackColor="#4D4D4D" ForeColor="White" />
            <AlternatingRowStyle BackColor="#FFECB8" />
</asp:GridView>

<asp:Image SkinId="photo" runat="server" ImageUrl="hilo.jpg" /> 

<asp:Menu runat="server" Orientation="Vertical" />

 <asp:Login title="Login" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4"
   BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
    ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
    <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
        Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
</asp:Login>                       

<asp:Calendar title="Calendar" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="350px">
    <TodayDayStyle BackColor="#CCCCCC" />
    <SelectedDayStyle BackColor="#333399" ForeColor="White" />
    <OtherMonthDayStyle ForeColor="#999999" />
    <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
        Font-Size="12pt" ForeColor="#333399" />
    <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
</asp:Calendar>           

You have to create the files as specified and then copy and paste the code there. 

Now we are ready for the main part, the creation and using web parts. Add one web page named Default.aspx (see Figure 1).  

Figure 1 - Adding a web page called Default.aspx

Now open the aspx file in source view mode and modify the same as shown below: 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>
            A Demo On Web Parts
        </h1>
        <div id="wrapper">
            <div id="wz1">
            </div>
            <div id="wz2">
            </div>
            <div id="wz3">
            </div>
        </div>
    </form>
</body>
</html> 

This will create 3 column named wz1, wz2, and wz3. Now apply the stylesheet, in which the styles of these columns are already defined. If you switch to design view, you will not be able to view anything. So we need to apply the stylesheet. 

To apply the stylesheet we change the page directive in the following way: 

<%@ Page theme ="MyTheme" StylesheetTheme ="MyTheme" Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

Now if you switch to design view, you will be able to see the screen that looks similar to Figure 2. 

Figure 2 - Design view of the Web page

Now expand the toolbox. There you will  find one tab named WebParts. From there drag and drop WebPartManager on the web form. Now web parts as explained earlier are the collection of user controls that you make or the server controls that is coming with the ASP.NET 2.0 and they live inside the zone. To start of drag and drop two WebPartZone from the toolbox and place on the first two columns (see Figure 3). Now within these two zones you can drag and drop normal ASP.NET server controls. For this demo I will be using one Calendar control and one Login Control. The screen should look some what similar to Figure 4 (as formatting options provided by the controls have been used.)

Figure 3 - Selecting WebPartZone from the toolbox in Visual Studio.

Figure 4 - Web page with web part controls added.

You can run the page in the browser to see how it looks like during the run time. See the small arrow in the upper right corner of each control and you can use them to minimize or hide the same. No code required. 

This is not over yet. Here comes the interesting part. 

Now we will use one combo box. We will use this to go with the web part manager and do something different what have been offered till now by ASP.NET 2.0. In the dropdownlistbox, add two items, “Browse” and “Design”. Keep the EnableAutoPostback check box checked. Then double-click the dropdownlistbox to open up the code editor. In the SelectedIndexChanged add the following code: 

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged 

        Select Case DropDownList1.SelectedValue
            Case "Browse"
                WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode
            Case "Design"
                WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
            Case Else
         End Select
    End Sub

Now run the page in the browser. Here choose the Design mode from the dropdownlist. Now you can literally drag and drop both the controls (see Figure 5).  

Figure 5 - Dragging and dropping a web part on a page.

Now lets go a little further. Let us a one usercontrol and type some text on the page. With the help of the CatalogZone control we will allow the user to add or remove this usercontrol from the page. To do this Go back to the Default.aspx and drag and drop CatalogZone control. The CatalogZone will have the list of all the webpartzone in the page. Now Drag and drop DeclarativeCatalogPart within the CatalogZone. Now from the smart tag select edit template. This will create an empty box. Drag and drop the user control that you have created earlier.

In the DropdownListBox add another list item named “View” and also change the code a little bit. 

        Select Case DropDownList1.SelectedValue
            Case "Browse"
                WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode
            Case "Design"
                WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
            Case "View"
                WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
            Case Else 

Now run the page in the browser. Select the View mode from the list. And here you will see that user have the choice to view the control and can place the control in any of the webpart zone.