Friday, November 26, 2010

Web Parts Drag & Drop functionality in Pages

Please visit my new Web Site

It’s my first article on Web Parts. Basically it’s an introduction article how one can start to learn the high end feature of web parts. As you knew that most of the portal contains several block. In general the end user can not change the page block orientation or positioning which is termed as personalization. The Web Parts gives us the personalization facility with little code. That’s why the Web Parts is necessary to learn. In my below example I will show you how developers can provide the Drag & Drop facility to personalize end user UI.

To do that you have to understand only two things. The first one is WebPartManager & the second one is WebPartZone.

This server control manages the state of the zones per user basis. The most important part is you must place an WebPartManager server control in each page. But the situation is different for master page as we know. The another importance of the WebPartManager server control is to maintain the communication between different elements contained in a zone or within different zone. Let’s say in one zone you display the product list & in another zone you display the product details. Which means zones are dependent on each other. If you select a product in first zone then you must change the product details in next zone. For such type of cases communication is required done by WebPartManager.

WebPartZone contains the elements that you want to Drag & Drop. You can Drag & Drop contains from one zone to another zone. The WebPartManager just controls the zones. You cannot put zone contents into the rest of the pages which does not contain another zone.

Please note that by default creates ASPNETDB.MDF and stores it in the App_Data folder.

Start Example:
Add an Aspx page in your project. Write the below HTML markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebParts.aspx.cs" Inherits="WebParts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
    <title>An Example on Asp Web Parts</title>
    <form id="form1" runat="server">
        <asp:WebPartManager ID="WebPartManager1" runat="server" >
        <table border="1">
        <tr style="background:Blue">
        <td colspan="3">
        <h1 style="color:White">Welcome to</h1> 
        <asp:WebPartZone ID="WebPartZone1" runat="server" HeaderText="Enter Name">
            <asp:TextBox runat="server" ID="txtLastName" Title="Enter Last Name:"></asp:TextBox>
        <asp:WebPartZone ID="WebPartZone2" runat="server" HeaderText="Enter Name">
            <asp:TextBox runat="server" ID="txtMiddleName" Title="Enter Middle Name:"></asp:TextBox>
        <asp:WebPartZone ID="WebPartZone3" runat="server" HeaderText="Enter Name">
            <asp:TextBox runat="server" ID="txtFirstName" Title="Enter First Name:"></asp:TextBox>


Please note that control Title property will represent the section name of a zone.

Now run the page & you will get the below output:
Asp.Net Web Parts Introduction

In this scenario you will not get the Drag & Drop facility. Only get Minimize & close option in each zone. Because the Drag & Drop facility based on WebPartManager DisplayMode property. The default value is "Browse". If you change the mode from "Browse" to "Design" mode then you will get Drag & Drop Facility like below:

Asp.Net Web Parts Drag & Drop

To change the WebPartManager DisplayMode property just write the below code:
protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes[1];
            Response.Write("Current MODE= " + WebPartManager1.SupportedDisplayModes[1].Name + "");

Ok now test the page & start to learn Asp.Net Web Parts. Drag one content & Drop the selected content into another zone. Now run the page again & the interesting thing is the page retain your last zone orientations. Because stores your action into the ASPNETDB.MDF. Later on i will discuss zone to zone communication steps.


Anonymous said...

only working in IE not working in FireFox

Want to say something?

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash