There are two basic things in WebParts:
- WebPart manager
- WebPart zones
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.
There are four kinds of zones in webpart zones:
- WebPart Zone
- Editor Zone
- Catalog Zone
- Connection 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.
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
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.
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.
The edit mode is used to edit webparts at runtime. Editing a webpart is further divided into four types:
Layout. We will first see how to use the
AppearanceEditorPart and LayoutEditorPart
First, place an editor zone into the web form. Then place an
LayoutEditorPart inside the editor zone. Run the application and select the edit mode from the
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.
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.
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 is divided into three subtypes:
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.
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 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
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:
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
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
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
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
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
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.
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
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
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.
Sorry, no bio is available
View complete profile here.
You might also be interested in the following related blog posts
Developing SharePoint WebParts
You can deploy WebParts as Sandboxed solutions .. but ..
Connecting to Database Using Custom Webpart in Sharepoint 2007
ComponentOne Silverlight WebParts for SharePoint
Whats New in v8.3: SharePoint, Gauges, Section 508/WAI, & New ASP.NET Controls
New For ASP.NET v8.3: SharePoint, Section 508/WAI, & New Controls
MOSS 2007 Department and People Viewer Part 1/2
SharePoint + Community Server = Ultimate Social Computing Orgasm!
SharePoint Search ranking rules and running it programatically
AJAX Drag & Drop Challenge
Please login to rate or to leave a comment.