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.