How to create reusable webparts (as user controls and add it to the tool box)

Question

I want to create a basic webpart class(it should have the the controls like textbox and label created in this .cs file which inherits from webpart). in my aspx page i create a webpart manager and a webpart zone. Now i want to use this webpart i created in 2 aspx pages to demonstrate the reusability of webparts

here is my code

namespace PartsControl
{
public class AddrPart : WebPart
{
    public AddrPart()
    {
    }

    protected override void CreateChildControls()
    { 
        base.CreateChildControls();
        _divPanel.ID = "_divPanel";
        _divPanel.BorderStyle = BorderStyle.Ridge;
        _divPanel.Width = 250;
        _divPanel.Height = 300;
        _divPanel.BackColor = System.Drawing.Color.Gainsboro;
        Controls.Add(_divPanel);
    }

    protected override void OnPreRender(EventArgs e)
    { 
    }

    protected override void Render(HtmlTextWriter writer)
    {
        base.RenderControl(writer);
        writer.Write("        <div id='_divPanel'>");
        writer.Write("            <table style='border-right: 1px ridge; border-top: 1px ridge; border-left: 1px ridge;");
        writer.Write("                border-bottom: 1px ridge; background-color: gainsboro;' cellpadding='3' cellspacing='2'");
        writer.Write("                width='250'>");
        if (_sErrDescription == "")
        {
            // dropdownlist State
            writer.Write("                <tr style='border-right: 1px ridge; border-top: 1px ridge; border-left: 1px ridge;");
            writer.Write("                    border-bottom: 1px ridge;'>");
            writer.Write("                    <td style='height: 50px'>");
            _ddlCountry.RenderControl(writer);
            writer.Write("                    </td>");
            writer.Write("                </tr>");
    }
}

aspx page:

<body>
<form id="form1" runat="server">

<asp:WebPartManager ID="WebPartManager1" runat="server">
<Personalization Enabled="false" />
</asp:WebPartManager>
<asp:WebPartZone ID="WebPartZone1" runat="server" Width = "100%">

// add the webpart here

I want to add my webpart in the aspx page as a control. My query is how do i make my webpart class as a control so that i can re-use it across the aspx pages

Renzo Ciot Renzo Ciot · Accepted Answer · 2014-06-26T15:32:35

Compile your WebPart and put the .dll file in the bin folder of your web project.
Then you have to modify your aspx page in order to register the webpart. This is a sample .aspx page that allow you to add webparts.
Replace WEBPARTDLLNAME, NAMESPACE and CLASSNAME.
When you start your web page for the first time, the page is empty. Click Catalog and add webpart to your webpartzone.

<%@ Page Language="C#" %>
<%@ Register Assembly="WEBPARTDLLNAME" Namespace="NAMESPACE" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    protected void Edit_Click(object sender, EventArgs e)
    {
        if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
        {
            WebPartManager1.Personalization.ToggleScope();
        } 
        WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
    }

    protected void Connection_Click(object sender, EventArgs e)
    {
        if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
        {
            WebPartManager1.Personalization.ToggleScope();
        } 
        WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
    }

    protected void Catalog_Click(object sender, EventArgs e)
    {
        if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
        {
            WebPartManager1.Personalization.ToggleScope();
        } 
        WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
    }

    protected void Browse_Click(object sender, EventArgs e)
    {
        if (WebPartManager1.Personalization.Scope == PersonalizationScope.User)
        {
            WebPartManager1.Personalization.ToggleScope();
        } 
        WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WebPart</title>
</head>
<body>
    <form id="form1" runat="server" >
        <div >
            <asp:WebPartManager Personalization-InitialScope="Shared" ID="WebPartManager1" runat="server"></asp:WebPartManager>

            <asp:WebPartZone ID="WebPartZone1" runat="server"  >
            </asp:WebPartZone>

            <div id="configuratinDIV">    
                <asp:CatalogZone ID="CatalogZone1" runat="server" >
                   <ZoneTemplate>
                      <asp:DeclarativeCatalogPart
                         ID="DeclarativeCatalogPart1" runat="server">
                         <WebPartsTemplate>
                            <cc1:CLASSNAME ID="WebPart1"
                                runat="server" Title="WebPart"></cc1:CLASSNAME>
                         </WebPartsTemplate>
                      </asp:DeclarativeCatalogPart>
                      <asp:PageCatalogPart ID="PageCatalogPart1"
                         runat="server"></asp:PageCatalogPart>
                   </ZoneTemplate>
                </asp:CatalogZone>
                <br />

                <asp:EditorZone ID="EditorZone1" runat="server" >
                   <ZoneTemplate>
                      <asp:PropertyGridEditorPart
                         ID="PropertyGridEditorPart1" runat="server" />
                   </ZoneTemplate>
                </asp:EditorZone>
                <br />

                <asp:ConnectionsZone ID="ConnectionsZone1" runat="server" >
                </asp:ConnectionsZone>
            </div>
        </div>
        <div class="editor">
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="Edit_Click" style="position: static;">Edit</asp:LinkButton> &nbsp;|&nbsp;
            <asp:LinkButton ID="LinkButton2" runat="server" OnClick="Connection_Click" style="position: static;">Connections</asp:LinkButton> &nbsp;|&nbsp;
            <asp:LinkButton ID="LinkButton3" runat="server" OnClick="Catalog_Click" style=" position: static">Catalog</asp:LinkButton> &nbsp; |&nbsp;
            <asp:LinkButton ID="LinkButton4" runat="server" OnClick="Browse_Click" style="position: static;">Browse</asp:LinkButton>
        </div>
    </form>
</body>
</html>

How to create reusable webparts (as user controls and add it to the tool box)

1 Answers