Saturday, March 10, 2012

Moveable panel using ASP.Net AJAX


This is the example of moveable  panel using AJAX. After clicking login button one login screen will come and you can place the panel any where in your page. Open a AJAX enable ASP.Net page and paste the below code.





<%@ Page Language="C#" AutoEventWireup="true" CodeFile="change_location.aspx.cs" Inherits="change_location" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
.Dialog {
background: none repeat scroll 0 0 #E5E8D2;
border: 1px solid #466D77;
}
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.7;
xindex:-1;
}
</style>
   
   
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager> 
   
    <ajax:DragPanelExtender ID="dragpnl" runat="server" TargetControlID="pnllogin" DragHandleID="pnldrag"/>
<ajax:ModalPopupExtender ID="modalpopup1" runat="server" BackgroundCssClass="modalPopup" TargetControlID="btnshow" PopupControlID="pnllogin"/>
<asp:Button ID="btnshow" runat="server" Text="Show Login" />
<asp:Panel ID="pnllogin" runat="server">
<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:Black">
<img src="cross.jpg" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/> Enter Login Details</td>
</tr>
<tr>
<td>
<table width="100%" border="0" align="center" style="">
<!-- login id -->
<tr>
<td align="right">User ID:</td>
<td align="left">
<asp:TextBox ID="txtUsername" runat="server" OnTextChanged="txtUsername_TextChanged"></asp:TextBox>
</td>
</tr>
<!-- password -->
<tr>
<td align="right">Password:</td>
<td align="left">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" CssClass="Button" />
<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>
<script type="text/javascript">
function setBodyContentHeight() {
//Setting height of body to maintain position of drag panel
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> 

 
    </div>
    </form>
</body>
</html>

3 comments: