Working with WebParts


In this article we will focus on how to work with Web Parts in our web application. We will customize the Web Part as per the users requirement. We will also see how to drag and drop web parts from one zone to another zone.

ASP.NET includes 13 Web Part Controls in the designer Toolbox. the web part controls and classes can be found inside the System.Web.UI.WebControls.WebParts namespace.

What are Web Parts:
Web Parts are components with predefined functionality.
It can be customized as per the user requirement and embedded in a page.

Why use Web Parts:
1.To improve a site's consistency.
2.To allow users to customize the web page content as per their specific needs.
3.We can also exchange information between Web Parts, allowing the settings that are made in one Web Part to propagate to other web parts.

For example, consider any news site,it may have a navigation bar
to the left, a title bar at the top, multiple news columns, and other components such as weather reports and stock quotes and a footer.

Web parts generate client-side menus so that end user can provide customizations easily using the UI.

Ways of creating a Web Part
There are three ways of creating ASP.NET Web Parts managed by the WebPartManager class in your web page.
1.Using a standard user control;
2.Use an existing ASP.NET control (such as Label) to define the Web Part. It is simple and easy.
3.Create your own custom control and derive it from the WebPart class. this method is time consuming and tough to create but it provides more flexibility.

Lets use see each of these methods of creating a web part control and using it in our site.

Using a standard user control
Step1:Lanuch visual Studio 2012 -> File -> New -> WebSite -> ASP.NET Empty Website -> Name it as "WebPartDemo" -> OK.
Step2:Add a Web User Control to the application. Right click the project in the solution explorer -> Add -> Select WebuserControl -> Name it as "WebPartUserControl".
uc1webpart
Step3:Drag and Drop a calendar control to this user control.
Step4.Open Default.aspx page -> Go to the Design view -> Now drag and drop the WebPartManager control to the webpage and then drag and drop the WebPartZone control. In this WebPartZone control, drag and drop the usercontrol from the solution explorer to the WebPartZone.
Step5:Go to the Source view and you will find that the usercontrol tag is added to the ZoneTemplate of the WebPartZone control. Along with this you will find the register tag which registers the usercontrol with the page. The html markup is as shown below:


<%@ Register src="WebPartUserControl.ascx" tagname="WebPartUserControl" tagprefix="uc1" %>

<asp:WebPartManager ID="WebPartManager1" runat="server"></asp:WebPartManager>
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<uc1:WebPartUserControl ID="WebPartUserControl1" runat="server" title="My Calendar"/>
</ZoneTemplate>
</asp:WebPartZone>


Notice the tile added to the user control it is displayed when the usercontrol is displayed on the webpage.
Step6: Press Ctrl+F5 and build the project to see the output as shown below:
calendar
Using a standard asp.net control
Step1: Go to the Source view of the Default.aspx page -> Drag and Drop the WebPartZone control.
Step2:Now add a Zone Template inside the WebPartZone control. Inside this ZoneTemplate. Create a Label and inside this label create an image control and set its ImageUrl property to the existing image. Label control acts as a container control in the WebPart.

<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<asp:Label ID="Label1" runat="server" title="Snap">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Penguins.jpg" Width="50" Height="50" />
</asp:Label>

</ZoneTemplate>
</asp:WebPartZone>


Step3:
Press Ctrl+F5 and build the project to see the output as shown below:

snap
3.Create your own custom control and derive it from the WebPart class
Step1:Add a new class to your application and name it "CustomWebPart".
Step2:Inherit this class from the WebPart class.
Step3:Override the RenderContents method of this class and add span and image control to the control as shown below:

public class CustomWebPart: WebPart
{
public CustomWebPart()
{
this.Title = "My custom Webpart";
}

protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
{
writer.Write("<span>demo</span><br/>");
writer.Write(@"<img src=""Images/Chrysanthemum.jpg"" width=""50"" height=""50""></img>");
}
}

Step4:In the Default.aspx page register the assembly using the Register tag

<%@ Register Assembly="WebPartDemo" Namespace="WebPartDemo" TagPrefix="CustomWP" %>

Step5:Add the WebPartZone control and then add the ZoneTemplate inside the WebPartZone. In this webpartzone add a reference to the CustomWebPart class using the prefix "CustomWP" as shown below:

<asp:WebPartZone ID="WebPartZone3" runat="server">
<ZoneTemplate>
<CustomWP:CustomWebPart runat="server" ID="customWebPart1" />
</ZoneTemplate>
</asp:WebPartZone>

Step6:Please make sure that the WebPartManager control is added to the page.
Press Ctrl+F5 and see the output as shown below.
customwebpart

Let us see how to provide the user the ability to customize the webpart as per their requirement. For this user must be authenticated and the webpart must be in display mode other than the Browse display mode.
Web Part Display Modes:
Display modes can be used to define what operations can be performed by the user on the Web Parts
BrowseDisplayMode: In this mode user can perform basic operations such as minimize and close. This is the default mode for a webpart.
DesignDisplayMode : This mode enables users to drag Web Parts to different locations.
EditDisplayMode: This mode enables users to drag Web Parts. Users can select Edit from the Web Parts menu to edit the title, size, direction, window appearance, and zone of Web Parts by using AppearanceEditorPart and LayoutEditorPart controls. In order to use this mode, you must add an EditorZone control to your webpage, and then add either AppearanceEditorPart or LayoutEditorPart, or both the editor parts.
CatalogDisplayMode: This mode enables users to add additional Web Parts specified by using a CatalogZone control.
ConnectDisplayMode : This enables users to establish connections between controls by interacting with a ConnectionZone control.

For demo purpose, I am simply authenticating a user using below code. It will set the authentication cookie and makes the user authenticated. Don't use it in real time and provide code for proper authentication.

protected void Page_Load(object sender, EventArgs e)
{
FormsAuthentication.SetAuthCookie("test", true);
}


Set the DisplayMode property of the WebPartManager control to Browse.

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;


Now browse the Default.aspx page. You will find Minimize and Close links for every webpart in the page as shown below.
browse

Now change the DisplayMode property of the WebPartManager control to Edit.

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;

Now browse the Default.aspx page. You will find Minimize,Close and Edit links for every webpart in the page as shown below.
edit

When you click on Edit link, you will find options to change the Appearance such as Title,Chrome Type,Direction, Height and Width properties of the webpart. Click on Apply and Save. This will apply the settings to the webpart.

schedule


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: