WebParts in ASP.Net

 

Introduction

It gives an option to the end user to choose which items he wants to appear on the page or hi sportal and which items to hide.Its a way for dynamic web designing.

WebParts allows end users either to add , remove or move items on his portal and also change the appearance of the items. Enduser can personalize his page according to his wish.

Once users has personalised the page , we need to store his option , so that on his next login he would not again repeat this. To store this information earlier developers used concept of personalization which is difficult to maintain. Now it became easy with the help of WebParts.

WebPartManager

It’s a non visual control .It is used to control and manage the WebParts in the page. It controls the communications that happen between elements in a zone and between elements in a zone to elements in another zone. All the pages using web parts must have this WebPartManager. It can be placed in the master page, so that there wont be any need to use it in all the content pages.

WebPartZone

WebParts are defined in zones. We can any web parts to the page.

All the controls which we want to have in a zone should be placed inside ZoneTemplate tag.

Modes of WebParts

WebPartManager supports different modes. They are

Browse : in this mode we can minimise or close the web parts but we can not move them. It we minimize the WebParts , we can again restore them. If we close WebParts it will be removed from the page. We can re-open the closed WebParts in catalog mode.

Display / Design : Enduser can drag and drop WebParts in this mode but can not edit them to change the appearance or its behaviour. Enduser can drag a WebParts only into another WebParts zone and not on to any location on the page.

Edit : In this mode enduser can edit the WebParts like changing the appearance , behaviour , properties and layout of WebParts.

Catalog : It allows the enduser to add or remove WebParts from the page.

Connect : it facilitates for the communication among the elements of different WebParts. For example to send text input given in one WebParts to another WebParts , we can use connect mode.

WebParts Example

ASPX Code

<form id="form1" runat="server">        <asp:ScriptManager ID="ScriptManager1" runat="server" />        <asp:WebPartManager ID="WebPart1" runat="server">        </asp:WebPartManager>         <asp:CatalogZone ID="CatalogZone1" runat="server">          <ZoneTemplate>        <asp:PageCatalogPart ID="p1" runat="server"  />            </ZoneTemplate>        </asp:CatalogZone>        <asp:EditorZone ID="EditorZone1" runat="server">        <ZoneTemplate>            <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />             <asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />            <asp:BehaviorEditorPart ID="BehaviorEditorPart1" runat="server" />             <asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server">            </asp:PropertyGridEditorPart>        </ZoneTemplate>        </asp:EditorZone>        Select a mode :<asp:DropDownList ID="ddlWepPartsMode" runat="server" OnSelectedIndexChanged="ddlWepPartsMode_OnSelectedIndexChanged"             AutoPostBack="true">             <asp:ListItem Text="Browse" Value="Browse"></asp:ListItem>             <asp:ListItem Text="Design" Value="Design"></asp:ListItem>             <asp:ListItem Text="Edit" Value="Edit"></asp:ListItem>             <asp:ListItem Text="Catalog" Value="Catalog"></asp:ListItem>        </asp:DropDownList>        <br />        <br />        <asp:WebPartZone ID="Zone1" runat="server" BorderColor="#CC33FF"            Font-Names="Verdana" Padding="6" >            <ZoneTemplate>                <asp:TextBox ID="txtZone1" runat="server" Text="IN ZONE1"></asp:TextBox>            </ZoneTemplate>        </asp:WebPartZone>            <br />            <br />             <asp:WebPartZone ID="Zone2" runat="server" BorderColor="#993300"                Font-Names="Verdana" Padding="6" >                <ZoneTemplate>                    <asp:TextBox ID="TextBox1" runat="server" Text="IN ZONE2"></asp:TextBox>                </ZoneTemplate>            </asp:WebPartZone>    </form>

Code Behind

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class Web_Parts_Drag_and_Drop_Webparts : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {     }     protected void ddlWepPartsMode_OnSelectedIndexChanged(object sender, EventArgs e)     {         if (ddlWepPartsMode.SelectedValue == "Browse")         {             WebPart1.DisplayMode = WebPartManager.BrowseDisplayMode;         }         else if (ddlWepPartsMode.SelectedValue == "Design")         {             WebPart1.DisplayMode = WebPartManager.DesignDisplayMode;         }         else if (ddlWepPartsMode.SelectedValue == "Edit")         {             WebPart1.DisplayMode = WebPartManager.EditDisplayMode;         }         else if (ddlWepPartsMode.SelectedValue == "Catalog")         {             WebPart1.DisplayMode = WebPartManager.CatalogDisplayMode;         }          } }

Output