Share via

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

  • Article

ASP.net 2.0 allows you to enable your application's users to have a personalized web page by customizing the web parts.
I will show you how simple it is to use the Web Part Design Mode to allows your users to drag and drop the web parts onto different web part zones.

Now you have the simple web site with 2 web parts. If you want to learn how to create a simple browsable web parts, you may visit this link. 

1. Add a DropDownList control from the toolbar and position it on the top cell.
2. Click and the smart tag and select Edit Items.
3. In the ListItem Collection Editor dialog click Add. For Text enter "Browse"Click Add. For Text enter "Design"

4. Click OK to close the Edit Items box.
5. Double-click on the DropDownList control to add a SelectedIndexChanged event handler.
6. Add the following code for the event handler.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (DropDownList1.SelectedValue)
        {
            case "Browse":
                WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
                break;
            case "Design":
                WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
                break;
            default:
                break;
        }
    }

we use Switch case to get the input from the users. If the user select "Browse", the user cannot move the web parts; If the user select "Design", the user can drag and drop the web parts onto another web part zone.

7. Switch back to the design mode for your web page.
8. Select "Enable AutoPostBack" for your DropDownList control. This is to get or set a value indicating whether a postback to the server automatically occurs when the user changes the list selection

9. Now, you are ready to run and test your simple web application.
10. When you select the "Design" mode from the DropDownList control, you can drag and drop your control to another web part.

11. You will notice that your control style will change accordingly to the web part zone style.