How to use WebParts to create customizable web page in ASP.NET 2.0 (C#)

Navigator : Home > Tutorials > Controls Tutorials > ...

Using WebParts to create customizable web page (VB.NET)

Using ASP.NET 2.0 WebParts control, you can build customizable web pages for the end user. This tutorial will show you an example on using WebParts control to create a calendar which can be dragged and dropped from user interface. Using ASP.NET 2.0 WebParts control, you can build customizable web pages for the end user. Function of this sample: when we select design mode, we can drag and drop the calendar from one zone to another zone.

First, import namespace of System.Web.UI.WebControl.WebParts

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

Imports System.Web.UI.WebControls.Webparts

Select mode:

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

Select Case Me.DropDownList1.SelectedValue Case "Browse"

Me.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode

Case "Design"

Me.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

End Select

End Sub

The front end Default.aspx page looks something like this:

<!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>Default</title>
</head>

<body>

<form id="form1" runat="server">
<div lang="en-us" xml:lang="en-us">
<fieldset>
<legend>Simple WebPart Demo</legend>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Browse</asp:ListItem>
<asp:ListItem>Design</asp:ListItem>
</asp:DropDownList> Select design mode.you will drag the calendar from the
FirstWebPartZone to the SecondWebPartZone.<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<asp:WebPartZone ID="FirstWebPartZone" runat="server" Width="214px" EmptyZoneText="Add a Web Part to this zone by dropping it here." EnableViewState="False">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC"
BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#003399" Height="200px" Width="220px">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
</ZoneTemplate>
<CloseVerb Visible="False" />
<MinimizeVerb Visible="False" />
<RestoreVerb Visible="False" />
</asp:WebPartZone>
<asp:WebPartZone ID="SecondWebPartZone" runat="server" EmptyZoneText="Add a Web Part to this zone by dropping it here."
EnableViewState="False" Width="236px">
<CloseVerb Visible="False" />
<MinimizeVerb Visible="False" />
<RestoreVerb Visible="False" />
</asp:WebPartZone>
</fieldset>
</div>
</form>

</body>
</html>

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

The flow for the code behind page is as follows:

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

System.Threading.Thread.CurrentThread.CurrentCulture = New System.Globalization.CultureInfo("en-us")
System.Threading.Thread.CurrentThread.CurrentUICulture = New System.Globalization.CultureInfo("en-us")

End Sub

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

Select Case Me.DropDownList1.SelectedValue
Case "Browse"

Me.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode

Case "Design"

Me.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

End Select

End Sub

End Class

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!