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

Asp.Net Tutorials

Categories

Advanced Technologies

Internet Browsers

Website Navigation

User Interface and Themes

Visual Web Developer

Suggest Tutorial

Navigator: Home - Tutorials - Controls - Using WebParts to create customizable web page (VB.NET)

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

ASP.NET Controls Tutorial

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

Imports System.Web.UI.WebControls.Webparts

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

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

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

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>

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

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

Download the Full Working Version of this Project written with Visual Studio.NET VB.NET 2005 Here!

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

Looking for more ASP.NET Tutorials? Click Here!


Developer Resources