What is a WebPart? How to create Webpart in ASP.Net ?

Creating a drag and drop page elements in asp.net

Webparts are used to personalize the webpage according the user's wish, the best example is my.msn.com. The ASP.Net 2.0 comes with a set of controls through which we can develop a webpart enabled application very easily.

WebPart Demo
From Visual studio 2005, we have a separate tab in Visual Studio toolbar for Webpart called WebParts.

Steps To Create Webapplication with Webparts
1) Drag a WebPart Manager from the Toolbox and name it as wpManager.
2) Create an html table.
3) Drag Webpart zones into the columns, it is wpZone1, wpZone2, wpZone3 and wpTopZone in our application.
4) Drag webcontrols into each webpart zone.Once a web control is dragged into it; it will automatically get converted to Webpart controls.
5) Now, if you run the application, you can see the webparts with Minimise and Close Option.
6) Drag 2 Buttons and Name it as "Design Mode" and "Normal Mode" outside webpart zones.
7) On Design Mode Click write the following code,
wpManager.DisplayMode = WebPartManager.DesignDisplayMode;
8) On Normal Mode Click write the following code,
wpManager.DisplayMode = WebPartManager.BrowseDisplayMode;
9) Now Run the application.Click the Design Mode button and now you can drag the controls from one webpart to another.

Moving forward, we will see the use of other webpart controls available in ASP.Net 2.0.

Catalog Zone
Catalog zone maintains set of controls that can be added or removed to the form, which is not visible during first time the page is loaded.The user can select the parts they want and add to their page.The controls can be a usercontrol also. Using the catalog zone we can have some controls that can be added to webpage when user wants.

Steps to use Catalog zone,
1) Drag a Catalog Zone into the form.
2) There are three types of catalog available, they are
   i) Declarative Catalog
        Additional WebParts available but not visible by default. 
   ii) Page Catalog
     Those Webparts you choose "Close" will automatically goes inside the Page Catalog and available there for adding it in future. If you choose "Delete" it will be deleted permanently. 
   iii) Import
       To Import Webpart that is available in 3rd party websites.
3) Drag a Declarative Catalog into Catalog zone.
4) In the Properties of Declarative Catalog choose "Edit Template" and add the controls and user controls that you want to add into the Declarative Catalog. Now Choose "End Template Editing".
5) Now Drag a Page Catalog into Catalog zone.
6) Drag a button outside these controls and name it as "Catalog".
7) On Click of Catalog button Click add the following code,
wpManager.DisplayMode = WebPartManager.CatalogDisplayMode;

Now Run the application and you can start using the Catalog zone.

As I said before you can also add User control as Webparts. For example you want to add a usercontrol as a webpart that should accepts a Property value from the user. Here comes the use of Editor Zone.

Creation of Usercontrol with a property that can be edited from Editor Zone
Now in our example I have created a usercontrol that has a label control in it, whose value can be set from the editor zone. For doing this, a get and set properties to set the value of Label control inside the usercontrol that should be decorated with the attribute [WebBrowsable, Personalizable].This attribute is used to persist the value assigned by the user in property grid.
For more details see the Demo application.

[WebBrowsable,Personalizable]
   public string Title
   {
       get
       {
           return title;
       }
       set
       {
           title = value;
       }
   }
Steps to use Editor Zone.
1) Drag an Editor zone to the webform.
2) Drag a PropertyGridEditorPart control into Editor Zone.
3) Drag Button outside the Editor Zone and name it as Edit Properties.
4) On Click of Edit Properties write the following code,
wpManager.DisplayMode = WebPartManager.EditDisplayMode;

5) Now you are ready to run the application and test it. To set the value of label that is inside the usercontrol Click the Edit Properties button and choose the Edit menu that got displayed when you click the down arrow button on the top right corner of the webparts. Now you can see the Editor zone gets enabled with a textbox asking for Title (In our case the property name is Title).Now you can enter the value and click Apply and OK.

Now where are the values stored to persist the location of webparts that you saved for the next login of your page? It is in the Sql Server express database that got automatically created inside the App_Data Folder by the ASP.Net 2.0 by default.

Note: The WebPart Manager should be placed at the top of the Page before any controls. Otherwise you will get an error message like this;
You must enable Web Parts by adding a WebPartManager to your page.  The WebPartManager must be placed before any Web Part controls on the page.