Understanding WEBPARTS in ASP.NET 2.0: Part I

Figure 1

Step 7: Select "Web User Control" as the type and name it as "myusercontrol.ascx".

Step 8: Add a table having 1 row and 1 column and add the following text inside the <td> </td>

Step 9: "Welcome to webparts home". The web parts HomePage is highly personalizable. To personalize this page, use the links in the upper corner.

Step 10: HTML Content can be added basing on your interest.

Step 11: Switch to Design View and drag and drop myusercontrol.ascx in webpartzone1.

Step 12: Now your Page in Design View will look similar to the one below:

Figure 2

Step 13: Change the title of the user control to "Webparts". This can be done by selecting the user control and switching to "Source".

Step 14: Inside the <Zone Template> you can find this tag:

Change this to:

Step 15: Any web control can be added to the Web Part Zone. To prove this pick any control from the tool box and drop it in the "Web Part Zone2". For interactive ness, I am using Calendar Control in my Web Part Zone2.

Step 16: Change the Title of the Calendar Control to "MyCalendar Control" in the same way as you have done for myusercontrol.ascx.

Step 17: After adding Calendar Control, my page looks like this in the Run Mode:

Step 18: Now comes the most interesting part of Web Parts.

The Beauty of "Web Parts" is that it maintains its own Database for storing the User Preferences by assigning a unique User ID to each and every user accessing the "Web Parts".

To prove this lets see the example I have specified below:

Figure 3

Step 19: On the Browser you can see a smart tag (the drop down arrow in blue on the top right hand corner for each zone). If you click on any of the tags, your pages will look similar to this:

Figure 4

Step 20: You will be provided with two options.

1. Minimize
2. Close

Step 21: Click on "Minimize" your page will look similar to this:

Figure 5

Step 22: Close your Browser and come back to the Design Part of the Page.

Step 23: Now execute your application again to check the preferences are saved or not.

Step 24: Interestingly, if you can observe the settings you have made to Zone1 are applied and you can see that WebPartZone1 is still minimized.

Step 25: So your application on the Browser should be similar to this:

Figure 6