Published: 28 Feb 2007
By: Abdul Sami

This article describes various aspects of using webparts in asp.net 2.0.

Introduction

It would not be wrong to say that Webparts are going to be the future of web based management systems. WebParts give us the option of dragging and dropping of objects on a page as well as, changing titles and border style properties of objects at runtime. Before the introduction of WebParts it was used to be a hectic task because we had to write a lot of JavaScript and had to save the state of objects in a database.

There are two basic things in WebParts:

  • WebPart manager
  • WebPart zones

WebPartManager

The WebPartManager is the manager for all webparts. If you use webparts in your web projects you are required to use the WebPartManager. Usually you just drag and drop this into your webform and are ready to go.

WebPart Zones

There are four kinds of zones in webpart zones:

  • WebPart Zone
  • Editor Zone
  • Catalog Zone
  • Connection Zone

WebPart Zone

The webpart Zone is the basic unit for webparts. By placing different contents in a webpart zone we can allow a user to drag and drop contents on a page.

To use different zones add a dropdownlist to your webform and add the following items to it.

  • Browse
  • Display
  • Edit
  • Catalog
  • Connect

Paste the following code in the SelectedIndexChanged event of the dropdownlist (this assumes the dropdownlist’s id is cmbOptions and the webpart Manager’s id is WebPartManager1).

Browse mode

The Browse mode is the default mode of webparts. In Browse mode we can not drag and drop the webparts but we can see two options, minimize and close. Minimizing a webpart will still display it in minimized state. If you choose close then it can only be restored while being in catalog mode which we will discuss later in this article. Here’s a sample webpart being displayed in Browse mode.

Design mode

In design mode we can drag drop objects between webparts. There are two webparts named as Links and Search. The following screenshot shows the Links webpart being dragged over the Search one.

Edit Mode

The edit mode is used to edit webparts at runtime. Editing a webpart is further divided into four types: Appearance, Behavior, Property and Layout. We will first see how to use the Appearance and LayoutEditorPart.

AppearanceEditorPart and LayoutEditorPart

First, place an editor zone into the web form. Then place an AppearanceEditorPart and LayoutEditorPart inside the editor zone. Run the application and select the edit mode from the dropdownlist. Click edit from the menu available for webparts.

You will see following output.

We can change the title of the webpart here. We can also see some basic options in the edit mode. Chrome type is the border and title style. The Chrome state gives you the option of minimizing it or not.

PropertyGridEditorPart

By using the property editor we can change the properties of the objects in our webparts. In our example we are going to change the CSSClass property of the object. To use this we will follow the same method as explained in the AppearanceEditorPart and LayoutEditorPart section.

Place an editor zone into the web form. Then place a PropertyGridEditorPart inside the editor zone. To use the editor zone add a new user control into your project. Place a textbox in the user control and place this user control inside the webpart of the web form. In the code behind of user control paste the following code.

The above code changes the CssClass of the TextBox. This property will now be available in the webparts edit mode and we will be able to change this at run-time as well. Besides setting the CssClass we have also used two additional attributes in the class declaration:

  • WebBrowsable - It allows a webpart to display a user defined property in edit mode.
  • Personalizable - It allows a property to be editable.

Now run this page. If we choose the edit mode from the webpart menu, we will see the following edit button in options menu of the webpart. The screenshot below illustrates this.

On selection of the edit link from the webpart menu we will have the CssClass property in edit mode. The screenshot below displays what it would look like:

As we can see this TextBox is using FrmTxtBox as the default class. It is defined in a stylesheet with attributes of border color in black. We can now apply a different class which I have named as CustomClass1, which has no border. After changing the CssClass name, press the OK button and you will see the textbox with the new border style.

This way we change the properties of objects used inside the webparts.

Catalog mode

The Catalog mode gives us the option to add/remove webparts at runtime. For example if we have few modules like weather, news, shopping, horoscope etc. and want to give the user an option to show or hide these modules at runtime, we can accomplish this task using the catalog mode.

CatalogZone

The CatalogZone is divided into three subtypes: PageCatalogPart, DeclarativeCatalogPart and ImportCatalogPart. On the webform add a CatalogZone and add the previous mentioned three types into it. We can show webparts with the help of the Pagecatalog which are closed by using the close option of the webpart, as seen in following screenshot.

The PagecatalogPart displays the number of webparts which are closed by using this option. The DeclarativeCatalogPart displays the number of elements which are added in design mode to the catalog zone. Click on the smart tag option of the DeclarativeCatalogPart zone and select edit template, then add controls into the catalog zone.


ImportCatalog

The ImportCatalog displays the number of elements which have been selected for import. We can import files with the extension .WebPart. To export a file as a .WebPart type add the following line to your web.config.

Then we can follow one of these two methods:

  • Set the ExportMode property of the control to All. If your control is derived from webpart, you can do this in markup as shown in the following example.
  • Or writing the following code during PageLoad.

Now we can add any of these webparts to our webform, by selecting the control and the zone where we want to add it. The screenshot below illustrates this:

Connect mode

This mode allows webparts to communicate with each other. We can make static connections once (in our code) or we can allow users to create connecttions at runtime according to their needs. The Connection mode doesn’t mean mean that the webpart is connecting to a database rather means it is connected to other webparts. For example if a webpart contains a grid, used to display some records and we want to filter it on the users input, then we could use a textbox in another webpart, which would send the filter criteria text by using the connect mode.

In our example we will place two WebParts on a page. One will be for the user input and the other for showing it. In your web project create two user controls - one will be named Provider and other Consumer. Place these two controls in webparts. Add a new class in the App_Code directory and name it ITextProvider. Paste the following code in it.

We are going to use this interface in both Provider and Consumer user controls to pass text between these two entities.

Place a textbox in the Provider user control and paste the following code in the code behind.

As you can see we are implementing the ITextToPass interface which we have just created. By using this interface we return text entered in the TextBox to pass it to the Consumer user control. We also used the ConnectionProvider attribute which exposes a webpart connection point. For more details about that you can read the following article.

Next place a Label in the Consumer webpart and paste the following code in its .cs file.

The Consumer Connection point doesn’t return any value. It utilizes the value from the provider by using the ITextToPass interface.

Now on selecting the connection mode from the WebpartManager, we can see the connect option in the webpart’s menu.

For the sake of simplicity I have changed the text of the button. When we click connect from the menu we will see following screen.

Click on the Create a connection to a Consumer and you will see the following screen. Select the webpart as a consumer from the dropdownlist.

Once you are connected you will see the following screen, which allows you to enter the text to pass to the Consumer - enter string A String.

Once you have pressed the Pass Text To Other Webpart button you will see in the following screen that the Consumer webpart shows the passed text in a Label control.

This way we can pass values from one webpart to another. As I mentioned earlier we can set static connections in our code, so users will not be able to set the Provider and Consumer by themselves.

Saving the Page State

Before we run the project, one question that arises in my mind is: where is this page settings going to be saved for every user? Any page setting modified by the users will remain as it is; these settings are saved in a database. In our scenario we are going to use the built in login and sign up controls. Lets get started:

First of all you should set the authentication mode to Forms in your Web.Config file. Then add a new webform to your project called Login.aspx. Drag and drop a login control in it, and set the DestinationPageUrl property of it to default.aspx. Add another webform to your project called Signup.aspx - drag and drop the CreateUserWizard control on this page, so that users can easily register. Also make sure that the Sql Express service is running. We are going to use the default asp.net database called ASPNETDB.mdf which is automatically created in applications app_data folder. This database already has the appropriate schema to save the page state for every user. The screenshot below shows how you should see your database in the Visual Studio explorer.

The table aspnet_PersonalizationPerUser is used to saves the page settings for every user. It is saved in serialized format, in the PageSettings field. Luckily we do not need to touch that table at all, because asp.net 2.0 provides us with the necessary Personalization API.

Setting Up the Database

To create the database to store our page settings, run the utility named as aspnet_regsql.exe. It is located in the \Windows\Framework\v2.0.50727 folder. This utility helps us create the tables and stored procedures required to create the database. Following is the screenshot of the wizard provided by this utility:

This wizard creates the following tables in database which we select during this wizard:

The last thing that is left is to change and add some settings in the web.config. Below is how your web.config should look like. It basically enables the Membership and profiles features, which we need for our purpose. Please note that I have also used the <Clear/> tag in the membership and providers tag to remove the settings from the machine.config. Other than that I also added a connection string to my database called Database1.

Summary

Webparts provide us an easy way to customize our website at runtime. Apart from Sharepoint portal server, webparts are introduced in asp.net 2.0. I have tried to cover all the common aspects of webparts in this article, like using different types of webparts and using a custom database.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Abdul Sami

Sorry, no bio is available

View complete profile here.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.

You might also be interested in the following related blog posts


Developing SharePoint WebParts read more
You can deploy WebParts as Sandboxed solutions .. but .. read more
Connecting to Database Using Custom Webpart in Sharepoint 2007 read more
ComponentOne Silverlight WebParts for SharePoint read more
Whats New in v8.3: SharePoint, Gauges, Section 508/WAI, & New ASP.NET Controls read more
New For ASP.NET v8.3: SharePoint, Section 508/WAI, & New Controls read more
MOSS 2007 Department and People Viewer Part 1/2 read more
SharePoint + Community Server = Ultimate Social Computing Orgasm! read more
SharePoint Search ranking rules and running it programatically read more
AJAX Drag & Drop Challenge read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Create Custom SharePoint WebParts, it is simple. Sara Rath 10/1/2009 5:56 AM
Using WebParts in ASP.Net 2.0 Nitish Mahajan 7/2/2010 4:33 AM
placeholder hey Moustafa Mohammed 9/13/2007 12:26 AM
Nice article and Source Code and MasterPages Paul Chu 9/23/2008 9:13
placeholder Re: Nice article and Source Code and MasterPages Abdul Sami 10/29/2008 11:31 AM

Please login to rate or to leave a comment.