DropPanelExtender Control in AJAX Using ASP.NET

Davin Martyn
12y
12.3k
0
0

Article

Introduction

AJAX (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help, we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

JavaScript
XML
Asynchronous Call to the server

DragPanelExtenderControl

The DragPanelExtender makes it extremely simple to add a 'drag' to your controls. The DragPanelExtender targets any ASP.NET Panel and allows additional parameters that signifies the control to use as the "Drag Handle". With the help of this control we can move our panel from one place to another on the client side. The user can freely drag the Panel around the web page using the drag handle.

DragPanelExtender Control Properties

TargetControlID
BehaviorID
DragHandleID
Enabled

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

Drag Panel control, Label, Button, HiddenField

Step 4 : Go to Default.aspx page[Source]option and drag panel. Inside the Panel control add another Panel Control "Panel2".

Code :

<asp:Panel ID="Panel1" runat="server" Width="250px">
                     <asp:Panel ID="Panel2" runat="server" Width="125%" Height="115%"
                         BorderWidth="3px" BorderStyle="Ridge"
                        BorderColor="#0066FF" BackColor="#66FFCC">
                         PLEASE DRAG THIS CONTROL
                    </asp:Panel>
                </asp:Panel>

Step 5 : Go to Default.aspx page[Design] option drag DragPanelExtender control from AjaxControlToolkit.

Step 6 : Now click on the DragPanelExtender Control properties and define TargetControlID. BehaviorID.

Code :

<asp:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1">
</asp:DragPanelExtender>

Step 7 : Now add a script to maintain the position of the Panel after postback. We will be adding a HiddenField which will store the position of the dragged panel. The value has been initially set to "1".

Code :

<asp:HiddenField ID="HiddenField1" runat="server" Value="1" />

Create JavaScript

<script type="text/javascript" language="javascript">
            function pageLoad() {
                $find('DragP1').add_move(savePanelPosition);
                var elem = $get("<%=HiddenField1.ClientID%>");
                if (elem.value != "0") {
                    var temp = new Array();
                    temp = elem.value.split(';');
                    $find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
                }
            }
            function savePanelPosition() {
                var elem = $find('DragP1').get_element();
                var loc = $common.getLocation(elem);
                var elem1 = $get("<%=HiddenField1.ClientID%>");
                elem1.value = loc.x + ';' + loc.y;
            }
        </script>

Step 8 : Drag and drop a ScriptManager control to the form. Also add a <div> tag to the page with the following properties.

<form id="form1" runat="server" style="background-color: #808080">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
         <div style="height: 100px; width: 350px; padding: 8px; background-color: #E0B49E;">

Step 9 : Go to the Default.aspx page option and write a code.

Code :

<form id="form1" runat="server" style="background-color: #808080">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
         <div style="height: 100px; width: 350px; padding: 8px; background-color: #E0B49E;">
                <asp:Panel ID="Panel1" runat="server" Width="250px">
                     <asp:Panel ID="Panel2" runat="server" Width="125%" Height="115%"
                         BorderWidth="3px" BorderStyle="Ridge"
                        BorderColor="#0066FF" BackColor="#66FFCC">
                         PLEASE DRAG THIS CONTROL
                    </asp:Panel>
                </asp:Panel>
            </div>
        </div>
        <asp:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
            DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1"
        </asp:DragPanelExtender>
        <script type="text/javascript" language="javascript">
          function pageLoad() {
                $find('DragP1').add_move(savePanelPosition);
                var elem = $get("<%=HiddenField1.ClientID%>");
                if (elem.value != "0") {
                    var temp = new Array();
                    temp = elem.value.split(';');
                    $find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
                }
            }
            function savePanelPosition() {
                var elem = $find('DragP1').get_element();
                var loc = $common.getLocation(elem);
                var elem1 = $get("<%=HiddenField1.ClientID%>");
                elem1.value = loc.x + ';' + loc.y;
            }
        </script>
    <asp:HiddenField ID="HiddenField1" runat="server" Value="1" />
    </form>
</body>

Step 10 : Now run the application by Pressing F5.