Saturday, March 10, 2012

ASP.Net AJAX rounded shape area


This is the example of ASP.Net AJAX rounded corner extender. Paste below code in your ASP.Net AJAX enable web page.



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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="Scrptman">
    </asp:ScriptManager>
    <div align="center">
    <table width="50%" >
    <tr align="center">
   
    <td valign="middle"><asp:Panel BackColor="BlueViolet" Height="200px"
        runat="server" ID="MainPanel" Width="50%" HorizontalAlign="Center">
   <table align="center" style="height:100px;">
  
   <tr>
   <td align="center" valign="middle">
     This is ASP.Net AJAX rounded corner extender
  
   </td></tr></table>
   </asp:Panel>
   
    </td></tr></table>
   
     <cc1:RoundedCornersExtender Corners="All" Radius="10" TargetControlID="MainPanel"
          ID="RoundedCornersExtender1" runat="server"></cc1:RoundedCornersExtender>
    </div>
    </form>
 
</body>
</html>

ASP.Net AJAX application to check use avability


This program is for check whether a username is already taken or not. Copy and paste below code into a AJAX enable ASP.Net page and edit database connection section according to your database setting.



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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
   
<style type="text/css">
.waitingdiv {
background-color: #F5F8FA;
border: 1px solid #5A768E;
color: #333333;
font-size: 93%;
margin-bottom: 1em;
margin-top: 0.2em;
padding: 8px 12px;
width: 8.4em;
}
</style>
   
   
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptmanager1" runat="server">
    </asp:ScriptManager>

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
var state = document.getElementById('loadingdiv').style.display;
if (state == 'block') {
document.getElementById('loadingdiv').style.display = 'none';
} else {
document.getElementById('loadingdiv').style.display = 'block';
}
args.get_postBackElement().disabled = true;
}
</script>


<asp:UpdatePanel ID="PnlUsrDetails" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
UserName:
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" ontextchanged="txtUsername_TextChanged"/>
</td>
<td>
<div id="checkusername" runat="server"  visible="false">
<asp:Image ID="imgstatus" runat="server" Width="17px" Height="17px"/>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
</div>
</td>
</tr>
</table>
<div class="waitingdiv" id="loadingdiv" style="display:none; margin-left:5.3em">
<img src="LoaderClockIcon.gif" alt="Loading" style="height: 30px" />Please wait...
</div>
</ContentTemplate>
</asp:UpdatePanel>

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

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>