Working with WebPart

Web parts are a new feature introduced with 2.0 .NET framework. It is a good example of reusability. It is a logical group of code. These web parts can be used to redesign the webpage. User can show, hide or move around them i.e. users can modify the content, appearance, and behavior of Web pages directly in a browser. The changes are then saved for the user and recalled for subsequent visits.

Web Part framework contains a few controls which are displayed in following image (figure. 1)

Figure 1

A web part can contain:

• an existing web server control. 
• a Web User control

To add a web part to your page you have to add WebPartManagerControl and WebPartZone to your page.

The WebPartManager has no user interface in the application; it manages all Web Parts controls on a page. A WebPartZone is an area that the web part can belong in. Web Parts can be shifted between zones or removed from a zone entirely.

Adding simple web part to your Applications

1. Create a new website project.
   
   
2. Drag and drop a WebPartManager control from the Toolbox, Rename it as wpManager.
   
   
3. Insert a 3-by-1 table onto the form.
   
   
4. Drag and drop a WebPartZone control from the Toolbox to each cell.
   
   
   
   Figure 2
   
   
5. Drag and drop a GridView control onto WebPartZone1
   
   
6. Drag and drop a User Control control onto WebPartZone3 if you have any .(In my case it is wuc.ascx)
   
   
7. We can add title attribute to each control. 
   
   
   
   Figure 3
   
   
8. Now go to Switch View you will get following code.
   
   

   <form id="form1" runat="server">

   <div>

   <asp:WebPartManager ID="wpManager" runat="server">

   </asp:WebPartManager>

    

   </div>

   <table>

   <tr>

   <td style="width: 100px">

   <asp:WebPartZone ID="WebPartZone1" runat="server">

   <ZoneTemplate>

   <asp:GridView ID="GridView1" runat="server">

   </asp:GridView>

   </ZoneTemplate>

   </asp:WebPartZone>

   </td>

   <td style="width: 100px">

   <asp:WebPartZone ID="WebPartZone2" runat="server">

   </asp:WebPartZone>

   </td>

   <td style="width: 100px">

   <asp:WebPartZone ID="WebPartZone3" runat="server">

   <ZoneTemplate>

   <uc1:wuc ID="Wuc1" runat="server" />

   </ZoneTemplate>

   </asp:WebPartZone>

   </td>

   </tr>

   </table>

   </form>
   
   
9. Switch the design view. Select a WebPartZone1 -> Auto Formate ->Professional. Click on OK.
   
   
   
   Figure 4
   
   
10. Repeat same steps for all three web part.
    
    
11. Now load your grid with any data base table in Page_Load. You have to write wpManager.DisplayMode = WebPartManager.DesignDisplayMode; for moving around the webpart on browser.
    
    

    protected void Page_Load(object sender, EventArgs e)

    {

    SqlConnection cn = new SqlConnection(ConfigurationManager.AppSettings["ConnectString"].ToString());

    cn.Open();

    string str = "SELECT CustomerID,CustomerName FROM Customers ";

    using (SqlCommand cmd = new SqlCommand(str, cn))

    {

    SqlDataAdapter adp = new SqlDataAdapter(str, cn);

    DataSet ds = new DataSet();

    adp.Fill(ds);

    GridView1.DataSource = ds.Tables[0];

    GridView1.DataBind();

     

    }

    wpManager.DisplayMode = WebPartManager.DesignDisplayMode;

    }
    
    

12. Press F5 to run the web Page. 
    
    
    
    Figure 5