Working with WebParts

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".

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>

 <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>

 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>");
        }
    }

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

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

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

            WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;

            WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;