Talk in computer language.: March 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" %>

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager runat="server" ID="Scrptman">

</asp:ScriptManager>

<td valign="middle"><asp:Panel BackColor="BlueViolet" Height="200px"

runat="server" ID="MainPanel" Width="50%" HorizontalAlign="Center">

<tr>

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" %>

<title>Untitled Page</title>

.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>

<asp:ScriptManager ID="scriptmanager1" runat="server">

</asp:ScriptManager>

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">

<table>

<tr>

<td>

UserName:

</td>

<td>

<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" ontextchanged="txtUsername_TextChanged"/>

</td>

<td>

<asp:Image ID="imgstatus" runat="server" Width="17px" Height="17px"/>

<asp:Label ID="lblStatus" runat="server"></asp:Label>

</div>

</td>

</tr>

</table>

<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">

<title>Untitled Page</title>

.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>

<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">

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

<img src="cross.jpg" align="right" style="cursor:pointer" alt="Close" onclick="ClosePopup()"/> Enter Login Details</td>

</tr>

<tr>

<td>

<tr>

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

</td>

</tr>

<tr>

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

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

</td>

</tr>

<tr>

<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>

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

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</div>

</asp:Panel>

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>

Talk in computer language.

Saturday, March 10, 2012

ASP.Net AJAX rounded shape area

ASP.Net AJAX application to check use avability

Moveable panel using ASP.Net AJAX

About Me