Introduction:

Portal web sites such as MY MSN and MSN Spaces, often organize their data into discrete units that support a degree of personalization. Information is organized into standalone parts [WebParts], and users can rearrange those parts to suit their individual working styles. Such personalization also lets users hide parts that contain information in which they have no interest. What's more, users can save their settings so that the site will remember their preferences the next time they visit the site. In ASP.NET 2.0, you can now build web portals that offer this kind of modularization of information and personalization using the new Web Parts Framework.

Scope of this Tutorial:

Here we will see how to add web parts to a web part page. Developing advanced WebParts from scratch is out of this tutorial scope. This tutorial also may has subsequent tutorial that explains more about Web Parts Framework.

Assumptions:

This tutorial assumes you are familiar with Data Access Controls and Data Binding Controls such as SqlDataSource and GridView. Also it requires SQL Sever 2005 Express Edition and Visual Web Developer. If you don't have SQL Server Express 2005, install ASPNETDB in your SQL Server instance using aspnet_regsql tool. and configure your application to use this instance as your personalization provider.

How to create WebParts Page:

To create a WebParts Page, you need to work with a specific ASP.Net 2.0 Controls:

• WebPartManager Control, which manages all Web Parts controls on a WebParts Page and must be the first control that you add to the page.
  
  

• WebPartZone Control, which contains and provides overall layout for the Web Part controls that compose the main UI of a page. This control serves as an anchor for Web Part controls. Multiple controls of this control forms the WebParts Page.
  
  The WebPartZone may contains one or more WebParts.

To create a WebPart Page:

1. Create a home page for the Web Parts. Launch Visual Studio 2005 and create a new web site project.
   

2. While in design view, drag and drop a WebPartManager control from the toolbox (under the WebParts tab) onto the default Web Form, rename it to wpManager.
   
   
   

3. From Layout menu item, select Insert Table, insert table with 3 columns and 1 row. This is where the Web Parts on your page are to be located.
   

4. Drag and drop a WebPartZone control from the Toolbox (under the WebParts tab) into each of the table's three cells. Each WebPartZone control will serve as the docking area for one or more Web Parts. A Web Part zone is an area where Web Parts are anchored. It also defines the default layout and appearance of each Web Part within that zone.
   

5. Set the ID property for each WebPartZone Control to be wpzLeft, wpzMiddle and wpzRight. Then for each one set the Auto format to Professional.
   
   
   

6. Save your form.

You have created your WebParts Page. Now you want to add WebParts to your page, and manage them at run time so you can rearrange WebParts positions.

Next we will add 2 WebParts, one will display Information from SQL Server Database. While the other one will display data from XML file.

Adding WebParts to the WebParts Page:

1. Drag and drop SqlDataSource control into you Web Form, rename it to sdsTitles. Configure it to retrieve data from Titles Table in Pubs Database. [you can use SQL Server 2000 or SQL Server 2005 any Edition].
   
   
   

2. Drag and drop GridView into wpzLeft WebPartZone control, rename it to gvTitles. Configure gvTitles to user sdsTitles as a Data Source.
   

3. Switch to the Source View and add title attribute to the GridVew -gvTitles- control and set its value to "Titles".
   
   
   
   Set Auto format for the GridView control to classic, also set the Paging and Sorting options, and set PageSize property to 5.
   
   
   

4. Drag and drop XmlDataSource control to your Web Form, rename it to xdsRSS. Configure it to use the RSS.xml that is attached with the demo project, or use any other well-formed XML file you wish.
   
   
   

5. Drag and drop DataList into wpzMiddle, and rename it to dlstRss. Switch to source view and configure your DataList as the following.
   
   
   

6. Now test your page. You will be able to see the two Web Parts, minimize them or close them only. On the following steps you'll be able to create to move them and rearrange them.
   

7. Drag and drop LinkBotton to your page, not into any Web Part Zone, rename it to btnDesign. and set its text property to "Design View"
   

8. Double click on the button to add click event handler, then add the following code in the event handler method:
   
   protected void btnDesign_Click(object sender, EventArgs e)
   {

   if (btnDesign.Text == "Design View")
   {

   wpManager.DisplayMode = WebPartManager.DesignDisplayMode;
   btnDesign.Text = "Page View";

   }
   else
   {

   wpManager.DisplayMode = WebPartManager.BrowseDisplayMode;
   btnDesign.Text = "Design View";

   }

   }
   

9. Now Run your application, note when you click on the button you can now rearrange you web parts on the page.
   
   

Conclusion:

Now have explored the basics of creating WebParts Page and adding WebParts to it at design/development time. This demo showed that every Control in ASP.Net 2.0 can be a web part without customization or extra code. Same for Custom User Controls; as you can put any controls we have just worked with into a user control, then drag and drop you user control into the WebPartZone and you will get your user control as WebPart.

WebParts is special kind of WebServer Controls. It has more advanced feature. Hope we will be able to discuss them in subsequent tutorials.

Read Part II : Working with WebParts Page, WebPart Zones & WebParts