Introduction to Web Parts

8/6/2019 Introduction to Web Parts

http://slidepdf.com/reader/full/introduction-to-web-parts 1/12

Web Development » ASP.NET » Web Parts

Introduction to Web PartsBy _Abdul Sami

A brief introoduction to using WebParts in your applications

Javascript, C# 2.0, C#, Windows,

.NET, .NET 2.0, ASP.NET, WebForms,VS2005, VS, Dev

Posted : 1 Mar 2007

Updated : 1 Mar 2007

Views : 36,529

15 votes for this Article.

Popularity: 4.55 Rating: 3.87 out of 5 1 2 3 4 5

Introduction

It would not be wrong to say that web parts are going to be the future of web based management systems.Web parts give us option of drag and drop of objects on a page, change titles, border style, properties of objects on runtime. Before the introduction of web parts it was used to be a hectic task because we had towrite a lot of java script and to save the state of contents in a database.

There are two basic things in web parts:

Web part manager.Web part zones.

Web Part Manager

Web part manager is a manager for web parts behind the scene. We normally don't do a lot of things withthe web part manager either in code or in design mode.

Web Part Zones

There are four kind of zones in web parts

Web Part ZoneEditor ZoneCatalog Zone

Connection Zone

Web Part Zone

It's a basic unit of web parts. By placing different contents in a web part zone we can allow a user to dragand drop contents on a page.



To use different zones place a dropdown list and add following items in it.

Browse1.Display2.Edit3.Catalog4.Connect5.

Write down following code on onChangeIndex event of this dropdown list.

1: Browse mode

Browse mode is default mode of webparts. In browse mode we cannot drag and drop the web parts but wecan see two options: minimize and close. Minimizing a web part will still show it, but in minimized state.As you can see in following screenshot.

If you select close then it can be restored only in catalog mode and we will see later in this article how touse that.

2: Design mode

In design mode we can drag drop objects between web parts as you can see in following screenshot. Thereare two web parts named as 'links' and 'Search'.

if (cmbOptions.SelectedValue == "Design"){

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;}else if (cmbOptions.SelectedValue == "Browse"){

WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;}else if (cmbOptions.SelectedValue == "Catalog"){

WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;}else if (cmbOptions.SelectedValue == "Edit"){

WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;}

else if (cmbOptions.SelectedValue == "Connect"){

WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;}



3: Edit mode

In edit mode we can edit web parts on runtime as well. Editing of a web part is further divided into fourtypes: Appearance, Behavior, Property, Layout. We will see first how to use Appearance andLayoutEditorPart.

AppearanceEditorPart and LayoutEditorPart

Place editor zone on the page.

Place AppearanceEditorPart, LayoutEditorPart in editor zone.

Run the application and select edit mode from option box.

Click edit from the menu available for webparts.

And you will see following output.



We can change the title of web parts here. We can see some basic options in edit mode. The Chrome typeis about border and title style. Chrome state gives us option of minimizing it or not.

PropertyGridEditorPart

By using property editor we can change properties of objects in our web parts. In our example we are goingto change CSSClass property of the object. To use this we will follow the same method of editor parts.

Place editor zone on the page.1.Place a PropertyGridEditorPart inside editor zone.2.

To use editor zone add a new user control in project.

Place a textbox on it.1.Place this user control in a web part of a web form.2.

In code behind of user control write down following code.

As we can see in above code that we have changed a textbox's css class by using a property. And we willchange this property value in a web parts edit mode.

string _cssClass = "FrmTxtBox";[WebBrowsable(), Personalizable(true)]public string CssClass{ get { return _cssClass; } set

{TextBox1.CssClass= value;

}}protected void Page_Load(Object sender, EventArgs e){

TextBox1.CssClass = CssClass;}



WebBrowsable() Attribute

It allows a web part to display property in web browser in edit mode.

Personalizable() Attribute

It allows a property to be editable.

Now run this page. Suppose we choose edit mode from options combo. We will see following edit button inoptions menu of web part.

On selection of edit link from webpart menu we will have CssClass property in edit mode.

As we can see this textbox has FrmTxtBox named class applied on it by default. It is defined in stylesheetwith attributes of border color in black.

To apply a different class named as CustomClass1, I have created this class in stylesheet and this class

has no border color defined in it.

After changing the CssClass name, press the OK button. And you will see textbox with default border

style.

So in this way we change properties of objects using web parts.



4: Catalog mode

Catalog mode gives us option to add/remove web parts on runtime. Say for example we have a fewmodules like weather, news, shopping, horoscope etc. and want to give users an option to show or hidethese modules on runtime, we can accomplish this task by catalog mode.

Catalog zone is further divided into three types: Page, Declarative, Import.

Add a Catalog zone on the page. Then add PageCatalogPart, DeclarativeCatalogPart,

ImportCatalogPart in catalog zone.

We can show web parts with the help of Page catalog which are closed by using 'close' option of web part,as you can see in following screenshot.

Page catalog displays the number of web parts which are closed by using this option.

Declarative catalog displays the number of elements which are added in design mode in catalog zone.Click on the smart tag option of declarative catalog zone and select edit template. Add controls in thecatalog zone.

Import Catalog displays number of elements which are selected to import.

We can import files having extension '.WebPart'.

To export a file as a .WebPart type file aad following line to web.config.

Then we can follow one of these two methods

<webParts enableExport="true"></webParts>



1. Set the ExportMode property of the control to all. If your control is derived from WebPart, you can dothis in markup as shown in the following example.

2. Or write following code on page load.

Now we can add any of these web parts to the page, by selecting control and the zone where we want toadd it.

Connect mode

This mode allows web parts to communicate with each other. We can make static connections once (in ourcode) or we can allow users to connect on runtime according to their needs.

Connection mode doesn't mean to connect to database but to connect web parts together. Say for exampleif we have a web part having a grid, displaying some records and we want to filter it on user input. We canput a textbox for user input, in other web part and can send text by using connect mode.

In our example we will place two web parts on a page. One will be for user input and other for showing it.

Create two user controls, One will be named as provider and other as consumer. Place these two controls inweb parts. Add a new class in the App_Code directory and name it ITextProvider.

Enter the following code in it.

We are going to use this interface in both provider and consumer user controls to pass text between thesetwo entities.

Place a textbox in Provider user control and write down following text in code behind.

<aspSample:CustomWebPart id="Sample" runat="server" ExportMode="All" />

Dim gwp As GenericWebPartgwp = WebUserControl2_1.Parentgwp.ExportMode = WebPartExportMode.All

public interface ITextToPass

{ string GetText();}



As you can see we are implementing interface which we have just created. By using this interface we returntext entered in textbox to pass to consumer user control.

Using the ConnectionProvider attribute means exposing a web part exposes a connection point. For

detail you can read following article.

Place a label in the consumer webpart and add write down following code in its .cs file.

The consumer connection point doesn't return any value. It utilizes the value from provider by usingITextToPass interface.

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

For the sake of simplicity I have changed the text of button. When we click connect we will see followingscreen.

public partial class ProviderWebPart : System.Web.UI.UserControl,ITextToPass

{[ConnectionProvider("TextToPass", "TextProvider")]

public ITextToPass GetTextTransferInterface(){

return ((ITextToPass)(this));}

public string GetText(){

return TextBox1.Text;}

}

public partial class ConsumerWebpart : System.Web.UI.UserControl{

[ConnectionConsumer("Text", "TextConsumer")] public void GetTextTransferInterface(ITextToPass provider)

{Label1.Text = provider.GetText();

}}



Click on Create a connection to a Consumer and you will see following screen.

Select the web part as a consumer from combo.

You will see the following screen to enter text to pass to consumer.

Pass string 'A String' for the consumer

You can see in following screen that consumer webpart shows text in a label which we have passed to it.



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

On more thing which we need to do is to customize our web.config file.

Following is the setting for web.config file:

As I mentioned earlier settings for database is mentioned in machine.config file, to customize that we needto override these settings in our application's web.config file.

Initially we define a connectionstring.

LocalSqlServer is the name of connection string in machine.config file as well, so to override this we will

mention the same connection string name.

ApplicationName is any name which can mention for identification of our application, for my application I

have set application name CustomConnections. It can be any.

So in this way we can customize the database for a database other then ASPNETDB.

License



This article has no explicit license attached to it but may contain usage terms in the article text or thedownload files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

_Abdul Sami

Occupation: Software Developer (Senior)

Location: Pakistan

Discussions and Feedback

37 messages have been posted for this article. Visithttp:/ / ww w.codeproject.com/ KB/ aspnet/ IntroToWeb_Parts.aspx to post and view comments onthis article, or click here to get a print view with messages.

PermaLink | Privacy | Terms of Use

Last Updated: 1 Mar 2007Editor: Chris Maunder

Copyright 2007 by _Abdul Sami

Everything else Copyright © CodeProject, 1999-2008Web08 | Advertise on the Code Project

Introduction to Web Parts

Documents

Transcript of Introduction to Web Parts