AJAX

Tuesday, September 1, 2015

September 01, 2015

Example of ConfirmButtonExtender control of ajax in ASP.NET

Introduction

In this article i will show you how to popup confirmation dialog box using ASP.NET C#. Also you can say example of Confirmation dialog box in asp.net. This thing is possible by two ways first one, you can use AJAX ConfirmButtonExtender and second one is JavaScript. I will show you how to use ConfirmButtonExtender of ajax in asp.net

You can check this video to do this things by two ways

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

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

<br />

<asp:Button ID="Button1" runat="server" Text="Delete Record" />

<cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server" BehaviorID="Button1_ConfirmButtonExtender" ConfirmText="Are you sure you want to delete it" TargetControlID="Button1" />

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

Thursday, August 13, 2015

AJAX ASP.NET

August 13, 2015

Ajax Password Strength and password indicator example in asp.net

Introduction

In this article i will learn about password strength control of ajax. Example of password indicator of ajax in asp.net. This example cover all such things which is related to password strength.

Description

i already explained about Always visible control example in ajax. Example of calendar extender using ajax. Example of Numeric UpDown Extender example using ajax. Example of Resizable control in asp.net. Slider Extender example in AJAX.

Source code :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.very{
background-color:gray;
color:white;
}
.weak{
background-color:Red;
color:white;

}
.average{
background-color:blue;
color:white;
}
.good{
background-color:orange;
color:green;
}
.excellent
{
background-color:green;
color:black;
}
.barline
{
border-style:solid;
border-width:2px;
width:190px;
padding:2px;

}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
Password:
<asp:TextBox TextMode="Password" ID="TextBox1" runat="server" Height="23px" Width="227px"></asp:TextBox>
 </div>
<p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<cc1:PasswordStrength PreferredPasswordLength="8" TargetControlID="TextBox1" ID="pwdstrength" runat="server" StrengthIndicatorType="Text" HelpStatusLabelID="Label1" MinimumNumericCharacters="1" MinimumSymbolCharacters="1" TextStrengthDescriptions="very;weak;average;good;excellent" />
</p>
<p>
 </p>
<p>
PassWord Indicator :
<asp:TextBox TextMode="Password" ID="TextBox2" runat="server" Height="23px" Width="227px"></asp:TextBox>
<cc1:PasswordStrength TextStrengthDescriptionStyles="very;weak;average;good;excellent" BarBorderCssClass="barline" PreferredPasswordLength="8" TargetControlID="TextBox2" ID="TextBox2_PasswordStrength" runat="server" StrengthIndicatorType="BarIndicator" HelpStatusLabelID="Label2" MinimumNumericCharacters="1" MinimumSymbolCharacters="1" TextStrengthDescriptions="very;weak;average;good;excellent" />

</p>
<p>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</p>

</form>
</body>
</html>
In this example TextStrengthDescriptionStyles cover all css classes which is covered in the example. StrengthIndicatorType define the appearance of the validator.

Code generate the following outout

Ajax Password Strength and password indicator example in asp.net

Sunday, May 18, 2014

AJAX

May 18, 2014

How to make Digital clock using ajax in asp.net

Using AJAX Technology you can change time at runtime in asp.net. So you can easily create web development in the asp.net. Here we will take a simple example, which shows time on the webpage also page will refreshed after 1 second .
ScriptManager : The ScriptManager control is the first AJAX server control in the toolbox. This control helps in implementing the ajax functionality in the asp.net website. You need to place this control on the webpage wherever AJAX functionality is required. In the absence of this control, no other Ajax server controls, such as Timer, UpdatePanel and UpdateProgress , can be added to the webpage. The ScriptManager control is responsible for managing client scripts for AJAX-enabled website . The Script Manager control use a ScriptManager class to manage AJAX script libraries and script files.

Timer Control : Sometimes , there can be a situation when you want to update the contents of the page after a specific interval. for example , there is a web page showing the stock prices where the price of the stock changes frequently. you are asked to update the stock prices after every minute . In this scenario , you need to use the Timer control . The Timer control contains a property named interval and an event named Tick.. The Interval property of the timer control is used to specify the desired time limit in second.
lets take an Example

Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )

<%@ Page Language="C#" %>

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

<script runat="server">

protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate >
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>

</ContentTemplate>
</asp:UpdatePanel>

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

OUTPUT

using ajax make a digital clock in asp.net

Sunday, December 29, 2013

AJAX

December 29, 2013

Computer Programming : TextBox WatermarkExtender control in Ajax with example

Computer Programming : TextBox WatermarkExtender is used to provide a tip to the user that specifies the type of parameter entered within the text box. This extender attaches to a TextBox control and displays a text within the text box when the web page render for the first time. When the user clicks the text box to insert values, the default text gets hidden.

Public Properties of TextBox Watermark Extender are

TargetControlID : Sets the .ID of the TextBox control to which you want to attach the extender

WatermarkText : Sets the text to display when the value in the text box is empty.

watermarkCssClass : Sets the CSS class for the text box when it is empty.

Lets take a simple example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="watermark-example.aspx.cs" Inherits="watermark_example" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html>

Output

Computer Programming : Watermark Textbox example in asp.net

Friday, October 25, 2013

AJAX ASP.NET

October 25, 2013

Difference between ASP.NET and ASP.NET AJAX

ASP.NET

is a web development model, which is used to deliver interactive, data-driven Web application over the internet. It also consists of a large number of controls, such as a text boxes, button and labels for assembling , configuring, and manipulating code to create hyper Text Markup Language (HTML) pages. You can create ASP.NET application using any CLR compliant language such as Visual basic, C#, Visual c++ and j#. The main features of ASP.NET are as follows.

Better Performance – When you request a Web page for the first time after compiling ASP.NET code, the CLR complies the code and stores the cached copy of the result. Now, for any subsequent calls to the same pag, the cached copy of the result is retrieved instead of going back to the server.

Improved security –ASP.NET has four different methods of authentication:
1. Forms—Allows the ASP.NET application to use its own custom business logic for authentication.
2. Windows—Checks the identity of user against the Windows user accounts that are stored on the web Server. If the credentials of a user match with that of a Windows user account, then the user is authenticated.

Greater Scalability- The session states in ASP.NET are maintained in a separate process on a different machine or database. This enables cross-server sessions to occurs, solving the problem of Web forms when more web servers need to be added as the traffic grows.

Cookie-less Sessions—ASP.NET stores the session state even when the cookies in a Web Browser are disabled. In such a case, the session ID is passed as a part of the Uniform Resource Locator (URL).

Ajax,

formerly code named as Atlas, is an extension of ASP.NET for developing and implementing AJAX functionality. ASP.NET AJAX Includes both client-side and server-side components that allow the developers to create Web application that are capable to update the data on a website without a complete reload of the page

The following are the advantages of using AJAX:
Asynchronous – Enable asynchronous calls to the web server without making the users wait for the data.

The minimal transfer of the data –Helps in sending only a part of the modified data to the web server minimizing the network traffic and performing the operations quicker. This feature is useful in sites where restricted pipes are allowed for data transfer resulting in improved network performance.

Minimal processing on the web server – Minimizes the processing on the web server as only the necessary data needs to be sent. Now, the server is not required to send a full page back to the server.

Thursday, May 30, 2013

AJAX ASP.NET DOTNET

May 30, 2013

Computer Programming : Installing the ASP.NET AJAX control Toolkit, Example

The ASP.NET ACT is a shared source of projects created by the joint effort of Microsoft developers and ASP.NET and AJAX community; therefore it is not included within ASP.NET 3.5 Framework. In other words, the Toolkit is community supported and community driven . If you want avail the extended functionalities of the ASP.NET controls, you need to download and install the ASP.NET ACT manually. The ACT can be downloaded (available free of cost) with lots of additional AJAX controls and components. The Toolkit is continuously updated and a new release of Toolkit is available every couple of months.

Perform the following steps to install the ASP.NET AJAX control Toolkit.
Step-1 : Download the compressed file from http://ajaxcontroltoolkit.codeplex.com/releases/view/105897
Step-2 : Decompress the files to any location on your system and change its name to a desired name, say, AjaxControlToolKit.

Step-3: Create New WebSite in Visual Studio 2008 or later

Step-4: Open new dialog when you create new website. Choose Empty website in middle section also choose c-sharp(c#) for language in left section.After that click on OK Button

Step-5: Add New Webform from Solution Explorer.

Step-6: After Click on Add New Item you will a new dialog panel .

choose Webform in dialog panel also set name according to you.Click on Ok Button

Step-5 : Right click the ToolBox window . Then select Add Tab from the context menu.

Step-6 : Again Right click on ToolBox and choose item link from popup.

Step-7: Now Add AjaxControlToolKit.dll file from this Wizard

Step-8: Click on Browse Button

Step-9: Select AjaxControlToolkit.dll file from your harddrive.and add your toolkit to your toolbox

Step-10 : The Toolkit controls have been added to the toolbox.

Under the AjaxControlToolkit option, the names of the controls appear and are self-explanatory. This makes it easier to short out the associativity of the ToolKit's control with the ASP.NET controls

Wednesday, May 29, 2013

AJAX ASP.NET c# DOTNET

May 29, 2013

How to use Rating Control in AJAX

While surfing on the internet you see a lot of information and content , such as books , tutorials, songs ,movies,and the rest , which ask for user's feedback . This feedback provides a key metric to recognize the satisfaction of users. For this purpose , the owner of the materials provides a rating system that represents a set of stars , which can be used to receive feedback . The rating mechanism used by ASP.NET needs a synchronous postback. However you can use the rating control that made client callback without refreshing the entire page .

Properties of Rating Control :

AutoPostBack : Set to true if you want to perform a postback by clicking a rating item.

CurrentRating : Sets the initial rating value to display the selected rating item when the page is loaded.

MaxRating : Sets the maximum rating value that you want to allow to rate an item.

ReadOnly : Determine whether or not the rating can be changed.

StarCssClass : Sets the css class for the visible star.

WatingStarCssClass : Sets the css class for the star in waiting state.

FilledStarCssClass : Sets the CSS class for the star in filled state.

EmptyStarCssClass : Sets the CSS class for the star in an empty state.

RatingAlign : Set the alignment for the stars. The value can be either vertical or horizontal.

Saturday, May 25, 2013

AJAX ASP.NET c# DOTNET

May 25, 2013

Computer Programming : How to use RoundedCornerExtender in ASP.NET with Example

Computer Programming: As the name suggest , RoundedCornerExtender attaches and makes the corners of any ASP.NET controls round . It adds a background panel to any ASP.NET control so that the control appears with rounded corners. The overall height of the original control changes slightly . RoundedCornersExtender has only three important properties such as:

TargetControlId : Set the ID of the control whose corners are to be modified .

Radius : Set the Radius of the control corners . By default the value is 5 pixel.

Corners : Set the corners of the target control , which you want to round.

Before copy this code please add ajax ControlToolkit to your website/project

Lets Take an Example

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Panel ID="Panel1" runat="server" Width="300px" Height ="200px">

This is my panel control

visit : http://dotprogramming.blogspot.com

　

　
</asp:Panel>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID ="Panel1" Radius ="10" Corners ="All" BorderColor ="SkyBlue" Color ="Black">

　
</asp:RoundedCornersExtender>
</div>
</form>
</body>
</html>

OutPut

Wednesday, May 22, 2013

AJAX ASP.NET DOTNET

May 22, 2013

Computer Programming : How to use DropShadowExtender in AJAX with Example

DropShadowExtender enables you to add a drop shadow to an ASP.NET panel control . Using this extender , you can specify the width and opacity of the drop shadow as well as make the corners of the panel rounded to give the panel looks more attractive and professional .

Lets take an Example

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="Panel1" runat="server" Width="269px">
<asp:Login ID="Login1" runat="server"></asp:Login>
</asp:Panel>
<asp:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID ="Panel1" Opacity ="0.7" Rounded ="true" ></asp:DropShadowExtender>
</div>
</form>
</body>

</html>

OutPut:

Properties of DropShadowExtender

TargetControlID : Set the ID of the control or link on which you want to apply the DropShadow effect.

Width : Sets the width of the drop shadow . The default value for the width of the shadow in 5 pixels.

Opacity : Sets the opaqueness of the drop shadow . The value of the drop shadow opaqueness ranges from 0 to 1.0 . The default value for Opacity is 0.5.

TrackPosition : Sets the value to true if you want to track the position of the control to which this extender is attached.

Rounded : Sets the value to True if you want to make the corners of the drop shadow rounded.

Tuesday, May 21, 2013

AJAX ASP.NET DOTNET

May 21, 2013

How to use UpdatePanelAnimationExtender in AJAX

UpdatePanelAnimationExtender enables you to display animation while the UpdatePanel Control is performing an asynchronous postback . This extender applies animation to a very specific situation -- Where custom events need handling before and after an updatable region is refreshed . Therefore , this extender can be used only when the web page consists of an UpdatePanel control , UpdatePanelAnimationExtender has only three important properties.

Properties of UpdatePanelAnimationExtender

TargetControlID : Sets the ID of the UpdatePanel control whose updates results in animation effects.

OnUpdating : Set an event to play animation when the update is in progress.

OnUpdated : Sets an event to play the animation when the update is complete . The animation play if and only if there is some changes is the UpdatePanel control after the update.

AJAX ASP.NET DOTNET

May 21, 2013

How to Use AnimationExtender in AJAX

AnimationExtender allows you to utilize built-in animation framework with existing web pages in a more declarative way. This allow you to add a broad set of fancy animation effect to your website . Using AnimationExtender , The animation plays when certain event occurs on the target control , such as OnLoad , OnClick , OnMouseOver, and OnMouseOut. You can implement and control a variety of animated action using the built-in framework , such as resizing , fading , and moving a control.
lets take an Example

Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

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

<div>

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID ="Button1">

<Animations >

<OnMouseOver>

<Color Duration="2" StartValue="#ffffff" EndValue="#000000" Property="style" PropertyKey="background-color" />
</OnMouseOver>

<OnMouseOut>

<Color Duration="2" StartValue="#000000" EndValue="#ffffff" Property="style" PropertyKey="background-color" />

</OnMouseOut>

</Animations>

</asp:AnimationExtender>

</div>

</form>

</body>

</html>

OutPut of the code are:

Properties of AnimationExtender Control :

TargetControlID : Set the ID of the control whose event are fired to create animation effect.

OnLoad : Set an event to play the animation when the page is loaded.

OnMouseOver : Set an Event to play when the mouse moves over the target control.

OnMouseOut : Set an event to play when the mouse moves away from the target control.

OnHoverOver : Set an event to play when the mouse moves over the target control but it stop the OnHoverOut animation before it plays.

OnHoverOut : Set an event to play when the mouse moves away from the target control but it stop the OnHoverOver animation before it plays.