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 (C#)

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

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

using System.Web.UI.WebControls.Webparts;

Select mode:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{

switch (this.DropDownList1.SelectedValue)
{

case "Browse":

this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode; break;

case "Design":

this.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
break;

}

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:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

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

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{

switch (this.DropDownList1.SelectedValue)
{

case "Browse":

this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
break;

case "Design":

this.WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
break;

}

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Looking for the VB.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!