Web Parts are similar to that of an user controls. But what makes it different is "Customization". Yes webparts allow the users to customize the site by modifying (for ex: moving) controls around the page based on WebPartZones.
Any ASP.NET server control can act as a Web Part but by creating a custom control derived from the WebPart class you gain access to advanced features.
I tried out an very very simple web part sample and let me try and explain it here. I didn't even write a single line of code in code behind file for this sample. Mind you for more webparts we need to use code behind files :) Btw I used Visual Studio Beta for this testing purpose.
Steps I followed
1. I expanded the "Tool box" and had a look at the "Webparts" section. As we have "Standard", "Html", "Webcontrols" etc., "Webparts" is one of the new section added in Visual studio 2005
(beta).
2. There are 13 controls within "Webparts" section in the toolbox. Out of which I used 3 controls and they are:
a. WebPartManager
b. WebPartZone
c. WebPartPageMenu
"WebPartManager" -- is the one which keeps track and coordinate all the Web Part controls on the page. Be advised that it is only a design time control and at runtime it is not visible.
"WebPartZone" -- is the one which marks the area for each webpart.
"WebPartPageMenu" -- is the one we use for designing the page at runtime!! This control is visible at both design and runtime. Read on you would understand better later in the article.
3. That said, I then dragged a "WebPartManager" control to the page.
4. I added a table with 2 rows and 2 columns (Layout menu >> Insert >> inserted 2x2 table). Then dragged "WebPartZone" control on all those 4 columns. So they name would read, "WebPartZone1", "WebPartZone2", "WebPartZone3" & "WebPartZone4". Within each "WebPartZone" for our easy understanding there would be a description saying "Click here to add WebParts to the WebPartZone".
5. Then I dragged a label control each into "WebPartZone1" and "WebPartZone2". An interesting stuff happened immediately. In both of this "WebPartZone" a "Minimize" and "Close" hyperlink appeared.
6. First I thought I need to write some code for those links to function properly. But its not like that. When I just ran the page I saw both the links fully functionaly as per their name :) Cool isn't it.
7. Now I dragged a "WebPartPageMenu" control beneath the table (2 rows x 2 cols). Thats all we are all set to test our first webpart sample :)
8. Just build and run the application.
9. Let me explain what I saw in runtime. Two webpartzones with label control in it. Also minimize and close button was there for each zone.Then I saw a drop down menu with a "Change" button. i.e, nothing but the WebPartPageMenu.
10. I tried to move the webpartzone from one place to other but i wasn't. I thought I have made some mistake.
11. After fiddling for sometime I understood that we need to change something in the dropdown for it to work :) The drop down has some menu item by name "Design page layout". Just I changed it and clicked on Change button. Now I am able to design the page at runtime. After moving the webpartzone again change the dropdown item to "Browse this page" I clicked on Change button to see the redesigned page.
12. Coolest of all the features are --- I just closed the application and ran it once again from the begining. But to my surprise what ever change I have done previously are persisted as it is.
Source code of my aspx page:
Do feel free to contact me @ vmvadivel@gmail.com if you need the source code of the sample webpart which I created.
My other articles on Whidbey
1. Cool features of Whidbey :: http://www.dotnetforce.com/Content.aspx?t=a&n=232
2. Introduction to ASP.NET 2.0 GridView Control :: http://www.dotnetforce.com/Content.aspx?t=a&n=229
3. Cool features of Whidbey -- Part II :: http://www.dotnetforce.com/Content.aspx?t=a&n=234
"ASP.NET version 2.0 introduces new type of personalization
called Page Personalization or Web Parts"
Any ASP.NET server control can act as a Web Part but by creating a custom control derived from the WebPart class you gain access to advanced features.
I tried out an very very simple web part sample and let me try and explain it here. I didn't even write a single line of code in code behind file for this sample. Mind you for more webparts we need to use code behind files :) Btw I used Visual Studio Beta for this testing purpose.
Steps I followed
1. I expanded the "Tool box" and had a look at the "Webparts" section. As we have "Standard", "Html", "Webcontrols" etc., "Webparts" is one of the new section added in Visual studio 2005
(beta).
2. There are 13 controls within "Webparts" section in the toolbox. Out of which I used 3 controls and they are:
a. WebPartManager
b. WebPartZone
c. WebPartPageMenu
"WebPartManager" -- is the one which keeps track and coordinate all the Web Part controls on the page. Be advised that it is only a design time control and at runtime it is not visible.
"WebPartZone" -- is the one which marks the area for each webpart.
"WebPartPageMenu" -- is the one we use for designing the page at runtime!! This control is visible at both design and runtime. Read on you would understand better later in the article.
3. That said, I then dragged a "WebPartManager" control to the page.
"Please be advised that we can place only one "WebPartManager" control on a page"
4. I added a table with 2 rows and 2 columns (Layout menu >> Insert >> inserted 2x2 table). Then dragged "WebPartZone" control on all those 4 columns. So they name would read, "WebPartZone1", "WebPartZone2", "WebPartZone3" & "WebPartZone4". Within each "WebPartZone" for our easy understanding there would be a description saying "Click here to add WebParts to the WebPartZone".
5. Then I dragged a label control each into "WebPartZone1" and "WebPartZone2". An interesting stuff happened immediately. In both of this "WebPartZone" a "Minimize" and "Close" hyperlink appeared.
6. First I thought I need to write some code for those links to function properly. But its not like that. When I just ran the page I saw both the links fully functionaly as per their name :) Cool isn't it.
7. Now I dragged a "WebPartPageMenu" control beneath the table (2 rows x 2 cols). Thats all we are all set to test our first webpart sample :)
8. Just build and run the application.
9. Let me explain what I saw in runtime. Two webpartzones with label control in it. Also minimize and close button was there for each zone.Then I saw a drop down menu with a "Change" button. i.e, nothing but the WebPartPageMenu.
10. I tried to move the webpartzone from one place to other but i wasn't. I thought I have made some mistake.
11. After fiddling for sometime I understood that we need to change something in the dropdown for it to work :) The drop down has some menu item by name "Design page layout". Just I changed it and clicked on Change button. Now I am able to design the page at runtime. After moving the webpartzone again change the dropdown item to "Browse this page" I clicked on Change button to see the redesigned page.
"By any chance if we didn't like the newly designed page and if you want to revert to the previous state itself choose "Reset Page Content" and click on Change button."
12. Coolest of all the features are --- I just closed the application and ran it once again from the begining. But to my surprise what ever change I have done previously are persisted as it is.
"Web Parts / Page personalization are based on the personalization system so it gets persisted for each user."13. If you are interested in knowing more about "WebParts" I suggest you go through this article.
Source code of my aspx page:
Do feel free to contact me @ vmvadivel@gmail.com if you need the source code of the sample webpart which I created.
My other articles on Whidbey
1. Cool features of Whidbey :: http://www.dotnetforce.com/Content.aspx?t=a&n=232
2. Introduction to ASP.NET 2.0 GridView Control :: http://www.dotnetforce.com/Content.aspx?t=a&n=229
3. Cool features of Whidbey -- Part II :: http://www.dotnetforce.com/Content.aspx?t=a&n=234
Comments