How To Use Ajax Dragable Panel with Java Script?

How to Use Ajax With Example?

What is Ajax - AJAX stands for Asynchronous JavaScript and XML.It is basically used to add script to the page which is executed and processed by the browser.Ajax is the combination of multiple technologies such as a CSS, JavaScript, CSS, DOM , and XHTML etc.

The ScriptManager Control:-

The ScriptManager control is the very important control and must be define on the page for other controls to work.

It has the basic syntax:

<asp:ScriptManager ID="Scriptmgr" runat="server">
</asp:ScriptManager>

The UpdatePanel Control :-The Update Panel  control inside it triggers a post back, the Update Panel intervenes to initiate the post asynchronously and update just that portion of the page.

<form id="form1" runat="server">
   <div>
      <asp:ScriptManager ID="scriptmgr" runat="server" />
   </div>
   
   <asp:UpdatePanel ID="updatep1" runat="server">
      <ContentTemplate>
         
      </ContentTemplate>
   </asp:UpdatePanel>
   
   
  
</form>

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server" >

<script type="text/javascript">

    function setBodyContentHeight() {

        document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";

    }

    setBodyContentHeight();

    function ClosePopup() {

        //Hide the modal popup - the update progress

        var popup = $find('<%= modalpopup1.ClientID %>');

        if (popup != null) {

            popup.hide();

        }

    }

</script> 

<script type="text/javascript">

    function setBodyContentHeight1() {

        document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";

    }

    setBodyContentHeight();

    function ClosePopup1() {

        //Hide the modal popup - the update progress

        var popup = $find('<%= ModalPopupExtender1.ClientID %>');

        if (popup != null) {

            popup.hide();

        }

    }

</script>

<style type="text/css">

    .Dialog {

background: none repeat scroll 0 0 #E5E8D2;

border: 0px solid #466D77;

        width: 134%;

    }

body {

font-family: Verdana,Tahoma,Arial !important;

font-size: 9pt;

}

.TitleBar {

background: url("images/titleBarBg.gif") repeat-x scroll left bottom #FAFAFA;

cursor: move;

}

.Button {

background: #E9E9E9;

border: 1px solid #9B9B9B;

padding: 0.1em;

vertical-align: middle;

}

.modalPopup

{

background-color: #696969;

filter: alpha(opacity=40);

opacity: 0.0;

xindex:0;

}

    #form1

    {

        background-color: #FFFFFF;

    }

    .style1

    {

        width: 128px;

    }

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

    <asp:DragPanelExtender ID="dragpnl" runat="server" TargetControlID="pnllogin"

        DragHandleID="pnldrag">

    </asp:DragPanelExtender>

<%--<ajax:dragpanelextender ID="dragpnl" runat="server" TargetControlID="pnllogin"

        DragHandleID="pnldrag"/>--%>

<%--<ajax:modalpopupextender ID="modalpopup1" runat="server"

        BackgroundCssClass="modalPopup" TargetControlID="btnshow"

        PopupControlID="pnllogin"/>--%>

        <div><asp:Panel ID="Panel111" runat="server" Width="436px">

<div style="width: 400px">

<asp:Panel ID="Panel21" runat="server">

<table class="Dialog">

<tr>

<td class="style1"><strong>Company Name&nbsp;</strong></td><td>

    <asp:TextBox ID="t1" runat="server"></asp:TextBox>

    </td><td>

        <asp:Button ID="btnshow" runat="server" BorderStyle="None"

            style="text-decoration: underline" Text="Add More Company" Width="201px"

            BackColor="#5E909C" BorderColor="#5E909C" />

        <asp:ModalPopupExtender ID="modalpopup1" runat="server"

            BackgroundCssClass="modalPopup" PopupControlID="pnllogin"

            TargetControlID="btnshow">

        </asp:ModalPopupExtender>

    </td>

</tr>

<tr>

<td class="style1"><strong>To</strong></td><td>

    <asp:TextBox ID="t2" runat="server"></asp:TextBox>

    </td><td></td>

</tr>

<tr>

<td class="style1"><strong>From&nbsp;&nbsp;</strong>&nbsp;&nbsp;</td><td>

    <asp:TextBox ID="t3" runat="server"></asp:TextBox>

    </td><td></td>

</tr>

    <tr>

        <td class="style1">

            <strong>Achivement</strong></td>

        <td>

            <asp:TextBox ID="t5" runat="server" TextMode="MultiLine" Width="158px"></asp:TextBox>

        </td>

        <td>

            <asp:Button ID="btnshow1" runat="server" BorderStyle="None" ForeColor="#333333"

                style="text-decoration: underline" Text="Add More Achivement"

                Width="194px" BackColor="#5E909C" />

            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

                BackgroundCssClass="modalPopup" PopupControlID="Panel11"

                TargetControlID="btnshow1">

            </asp:ModalPopupExtender>

        </td>

    </tr>

    <tr>

        <td class="style1">

            &nbsp;</td>

        <td>

            <asp:Button ID="Button6" runat="server" BorderColor="Gray" BorderStyle="None"

                Text="Submit" />

        </td>

        <td>

            &nbsp;</td>

    </tr>

</table></asp:Panel>

            </asp:Panel>

</div>

</div>

    <strong>&nbsp;&nbsp;&nbsp; </strong>

<asp:Panel ID="pnllogin" runat="server" Width="436px">

<div style="width: 400px">

<asp:Panel ID="pnldrag" runat="server">

<table class="Dialog" width="100%">

<tr style= " background-image:url(bg_filter_header.gif)" class="TitleBar">

<td style="color:white">

<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/>

    Company Details</td>

</tr>

<tr>

<td>

<table width="100%" border="0px" align="left" style="">

<!-- login id -->

<tr>

<td align="right">Company Name:</td>

<td align="left">

<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>

</td>

</tr>

<!-- password -->

<tr>

<td align="right">To:</td>

<td align="left">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</td>

</tr>

    <tr>

        <td align="right">

            From</td>

        <td align="left">

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

        </td>

    </tr>

    <tr>

        <td align="right">

            Achivement</td>

        <td align="left">

            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

        </td>

    </tr>

<tr>

<td></td>

<td>

<asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="Button"

        onclick="btnsubmit_Click" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="Button"  />

</td>                            

</tr>

<tr>

<td align="right">

<input type="checkbox" />

</td>

<td align="left">Remember User ID</td>                              

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</div>

</asp:Panel>

    <asp:DragPanelExtender ID="DragPanelExtender12" runat="server"

        TargetControlID="Panel11" DragHandleID="pnllogin2">

    </asp:DragPanelExtender>

<%--<ajax:dragpanelextender ID="DragPanelExtender12" runat="server"

        TargetControlID="Panel11" DragHandleID="pnllogin2"/>--%>

<%--<ajax:modalpopupextender ID="ModalPopupExtender1" runat="server"

        BackgroundCssClass="modalPopup" TargetControlID="btnshow1"

        PopupControlID="Panel11"/>--%>

<asp:Panel ID="Panel11" runat="server" Width="435px">

<div style="width: 400px">

<asp:Panel ID="pnllogin2" runat="server">

<table class="Dialog" width="100%">

<tr style= " background-image:url(bg_filter_header.gif)" class="TitleBar">

<td style="color:white">

<img src="close.gif" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup1()"/>

    Achivement&nbsp; Details</td>

</tr>

<tr>

<td>

<table width="100%" border="0px" align="center" style="">

<!-- login id -->

<tr>

<td align="right">Achivement</td>

<td align="left">

<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

</td>

</tr>

<!-- password -->

<tr>

<td align="right">&nbsp;</td>

<td align="left">

    <asp:Button ID="Button4" runat="server" CssClass="Button" Text="Submit"

        onclick="Button4_Click" />

    <asp:Button ID="Button5" runat="server" CssClass="Button" Text="Cancel" />

</td>

</tr>

    <tr>

        <td align="right">

            &nbsp;</td>

        <td align="left">

            &nbsp;</td>

    </tr>

    <tr>

        <td align="right">

            &nbsp;</td>

        <td align="left">

            &nbsp;</td>

    </tr>

<tr>

<td></td>

<td>

    &nbsp;</td>                           

</tr>

<tr>

<td align="right">

    &nbsp;</td>

<td align="left">&nbsp;</td>                               

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</div>

</asp:Panel></ContentTemplate>

</asp:UpdatePanel>

</asp:Content>