Partager via

Step-by-Step to create Web Parts by using ASP.net 2.0 - Part III

  • Article

This time I am going to show you how to allow your users to add additional webpart onto a web page.

This walkthrough will be continued from previous posts.
VisitPart I on how to create a browasable web part page.
Visit Part II on how to create designable web part page.

Before start, make sure your Default..aspx page looks as below:
In order to let your users to add additional web part, you can use the web part manager's catalog display mode.
Let's create a custom web user control.
1. Right click website at the solution explorer
2. Select add new item
3. Select Web User Control template
4. Name it "Addition" and click Add
5. Place two textbox, one button and one label controls on the user control, as below

6. Double-click on the button and put some logic there

protected void Button1_Click(object sender, EventArgs e)
{
int a = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);
Label1.Text = a.ToString();
}

7. Go back to the Default.aspx
8. Drag the Catalog Zone from toolbar and drop it on the page
9. Drag the Declarative Catalog from toolbar and drop it within the Catalog Zone

10. Click on the Declarative Catalog's smart tag (the little arrow at right top corner)
11. Select Edit Template
12. Drag the web user control you just created and drop it withing the Declarative Catalog
13. This will create an user control instance at the Declrative Catalog

14. Switch to Source view, you will notice a user control is added.
15. Add the Title propery and put the value as "Addition" to the user control

<ZoneTemplate>
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
<WebPartsTemplate>
<uc1:addition title="Addition" ID="Addition1" runat="server" />
</WebPartsTemplate>
</asp:DeclarativeCatalogPart>
</ZoneTemplate>
 
16. Add one more item - Catalog, at the drop down list

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Browse</asp:ListItem>
<asp:ListItem>Design</asp:ListItem>
<asp:ListItem>Catalog</asp:ListItem>
</asp:DropDownList></td>

17. Add code at the DropDownList1_SelectedIndexChanged event handler for the Catalog option

case "Catalog":
WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
break;

18. Now, you can run your website and test your website
19. Select Catalog from the drop down list, and you will see the catalog zone
20. Select the web part you want to add and specify which zone you want to add to

21. Click Add and you will notice a new web part is added to web part zone 1