MY.NET Tutorials: Ajax

How to implement Ajax Balloon Popup Extender on Asp.net website

On 22:43:00 By RAMASHANKER VERMA // No comments:

Hi Friend, Today we will learn about Balloon popup Extender control in asp.net.This control display a popup message which can contain any information when you move your mouse and focus to a TextBox control.This control supports three Balloon style properties

Balloon
Rectangle
Custom

You can choose three size of this style properties

Small
Medium
Large

If you want to choose Balloon Style Property Custom then you have to set CustumCssUrl Property to point to a custom Stylesheet.

This Popup can be set to 5 positions

TopRight
TopLeft
BottomLeft
BottomRight
Auto

If you select value the Auto then the position of BalloonPopup will be determined automatically based on available space.

This popup will be displayed when any user move your mouse or click on textBox.

There are some step to implement this whole concepts as shown below:-

3

How to use PagingBulletedListExtender Control on ASP.NET Web Page Easily

On 22:06:00 By RAMASHANKER VERMA // No comments:

The PagingaBulletedListExtender Control is used to display the different contents in the form of the bulleted list on the indices clicked.It provides client-side sorted paging.In this you can specify the number of characters that you want to use for creating heading indices or maximum number of items to display per index.This control uses page able grid control to page through the items of the BulletedList control.This extender control is useful when the web page contains a long list of items.this control is helpful to organize all the bound items in pages and displays links of each of them. This control is every helpful in paging so we have to know about it in detail. before use this control You have to install Ajaxtoolkit on your visual studio first.
There are some important properties of this control as given below:-

3

How to use Gravatar images on your asp.net web forms easily

On 00:40:00 By RAMASHANKER VERMA // No comments:

Introduction:- The Gravatar control is an asp.net control that enables you to use gravatar images on your asp.net web pages.This control is very simple to use.You have to just set some Gravatar control's properties like Email, size,Rating DefaultImageBehavior, DefaultImage etc.For this, First you have to Register on http://www.gravatar.com .After that upload your required images which you want to render on your website or blogs.You will get an URL link for every image.Here we will display gravatar images using help of gravatar control.
Before using this concepts you have to Install Ajax toolkit on your visual studio.
There are some properties of Gravatar control as given below:-

Email :-This is a required property,You have an email associated with gravatar.
Size:- This is helpful to render the customize size of images on web page.
Rating:- This is helpful to display the acceptable rating of image.
DefaultImageBehavior:-This property is helpful to display the image when a gravatar is not associated with an email account.There are some possible options as given below:-

MysteryMan:-This is helpful to display the same image of an anonymous profile of a man(a MysteryMan) for all unrecognized email.
Identicon:- This is helpful to generate different geometric pattern for each unrecognized email.
Wavatar:- This is helpful to generate a different face of image for unrecognized email.
MonsterId:-A different image of a monster is generated for each unrecognized email.
Retro:- This helpful to generate 8 bit arcade-style face for each unrecognized email.

5. DefaultImage:- This is required a URL of the image.This image will be displayed,if the gravatar image can not be displayed because of unacceptable rating or the email account is not associated with gravatar.com.

3

How to Display Area Chart Graph on Asp.Net Website easily

On 21:12:00 By RAMASHANKER VERMA // 1 comment:

Hi Friend, Today we will learn "How to Draw a Graph of Area Chart on asp.net web page".Here we will calculate the production of the Wheat and Rice in different years in India. This is very simple ,you have to just focus on below concept.I have already draw many charts ,you can learn it from below links as given below.

Before implementing this concepts you have to Install Ajax Toolkit on your visual studio first.

There are some properties of Area chart graph as given below:-

3

How to Display Bubble Chart on ASP.NET Website using Ajax Technology

On 00:56:00 By RAMASHANKER VERMA // No comments:

Hi Friend, Today we will learn about Bubble chart concepts in ASP.NET.Here we will display the Students increased % marks in differnet subjects using Bubble chart.Previously i have already explained some charts also as given below:-

Before implementing this concepts you have to Install Ajax Toolkit on your visual studio first.

There are some properties of Bubble chart graph as given below:-

ChartHeight :- This is used to customize the Height of Bubble chart.
ChartWidth :- This is used to customize the Width of Bubble chart.
ChartTitle :- This is used to set the title of the chart.
ChartTitleColor:-This is used to set the font color of the chart title.
BaseLineColor :-This is helpful to set the color of the base line of the chart.
XAxisLineColor:-This is used to set the color of the X Axis line of the chart.
YAxisLineColor:-This is used to set the color of the Y Axis line of the chart.
XAxisLine :- This is used to set the interval size for the X axis line of the chart.
YAxisLine :- This is used to set the interval size for the Y axis line of the chart.
BubbleSizes :-This is used to set the number of different sizes of the bubbles.

There are some BubbleChartValue Properties as given below:-

3

How to display static Pie chart Graph on asp.net website

On 16:33:00 By RAMASHANKER VERMA // No comments:

Hi friend, Today,we will learn"How to display Pie chart graph on asp.net website".Here we will draw a student marks in different subjects(Math,Science,English and History) in Pie graph.Before implementing this concepts,You have install Ajax toolkit in your visual studio.
I have already explained following Graphs...

There are some properties of Pie graph as given below:-

ChartHeight:- This is helpful to customize the height of the chart.
ChartWitdh:- This is helpful to customize the width of the chart.
ChartTitle:- This properties is helpful to set the title of the chart.
ChartTitleColor:-This properties is helpful to set the color of the chart title.

There are some Pie char value properties as given below:-

Category:-This properties helpful to provides name for a particular pie chart value.
Data:-This is helpful to provides data for a particular pie chart value.
PieChartValueColor:-This is helpful to set the color of segment for a particular pie chart value.
PieChartValueStrokeColor:- This is used to set the stroke color of segment for a particular pie chart value.

3

How to display static Line Chart Graph on ASP.NET Web Page

On 16:31:00 By RAMASHANKER VERMA // No comments:

Hi Friend, Today we will learn about Line Chart control in asp.net.Here you can easily display the Line Graph of any predefined data.I have already display the Bar graph of predefined data.Same concepts will be used in Line Graph also but you have to change somethings as given below. Here I have represented three persons(Rajesh,Kiran and Sachin) earning details in this Line Graph .Before implementing this concepts ,you have to install Ajax Toolkit in your visual studio.
There are some some steps to implement this whole concepts as given below:-

3

How to display a Static BarChart in asp.net using Ajax Technology

On 02:24:00 By RAMASHANKER VERMA // No comments:

Hi friend ,today we will learn about bar chart control in asp.net.Here you can easily display the bar char with the help of some predefined data of different persons for different years.Here we will display the different type of data of Ram,Mohan and Neha for different years (2001-2008) in this bar chart.Before implementing this concepts, you have to install ajax toolkit in your visual studio.
There are some properties of this BarChart as given below:-

ChartHeight :- This is helpful to customize the height of the bar chart.
ChartWidth :- This is helpful to customize the width of the bar chart.
ChartType :- This is helpful to view the bar chart either column(StakedColumn) or Row(Bar,Stackedbar)
ChartTitle:- This is used to set the title of the bar chart.
CategoryAxis:- Here you have to put some set of values to create a bar chart .
ValueAxisLines:-Here you have to set the interval size for the value axis line.
ChartTitleColor:-This is used to set the color of your chart title.
CategoryAxisLineColor:-This is helpful to set the color of the category axis line.
BaseLineColor:-This is helpful to set the color of the base lines of the chart.
ValueAxisLineColor:- This is helpful to set the color of the value axis lines

There are some properties of the BarChartSeries as given below:-

Name:-This is a required property.
BarColor:- This is helpful to set the color of the bar for a particular series.
Data:- This property is used to set the data for a particular series.

3

How to implement PasswordStrength Extender Control in ASP.NET Website

On 14:02:00 By RAMASHANKER VERMA // No comments:

The PasswordStrengthExtender Control targets a TextBox control that is used for entering Passwords.When user starts typing the text in text box ,this control calculates the strength of the text using different specified properties.Here i have set different properties such as TargetControlID, DisplayPosition , PrefixText,StrengthIndicatorType, MinimumLowerCaseCharacters, MinimumNumericCharacters, MinimumSymbolCharacters, PreferredPasswordLength, TextStrengthDescriptions, StrengthStyles.You can see it in source file.

First,You have to install Ajax Toolkit in your visual studio.
There are some steps to implement this whole concepts in asp.net website as given below:-
Step 1: First open your visual studio -->File-->New -->Web Site--> Select ASP.NET Empty website-->OK-->Open Solution Explorer window-->Add a New Web form (Default.aspx)--> drag and drop TookitScriptManager, text box and button controls as shown below:-

3

How to make the Corners of any ASP.NET controls Round using Concepts of Ajax

On 12:33:00 By RAMASHANKER VERMA // No comments:

This is very useful for the asp.net developers to make the asp.net controls round.For this , RoundedCornersExtender control is used to make the corners of any asp.net controls round.This control adds a background panel to an asp.net control so that the control,when rendered on a web page appears with rounded corners.There are some properties of this RoundedCornersExtender as given below:-

TargetControlID:- It sets the ID of the control whose corners are to be modified.
Corners:-It is helpful to sets the corners of the target control,which you want to round.
Radius:-It sets the radius of the rounded corners by default this value is 5 pixel.

You have to install AjaxToolkit in your visual studio before use RoundedCornersExtender control.

Step 1:- First open your visual studio-->File-->New-->Website-->Select Asp.net Empty Website-->OK -->Open Solution Explorer Window -->Add a New Web Form(Default.aspx)-->First Drag and drop AjaxToolKit and Panel Control-->After that inside Panel Control,drag and drop Text Box and Button controls as shown below:-

3

How to implement ConfirmButtonExtender Control on ASP.NET Website easily

On 01:43:00 By RAMASHANKER VERMA // No comments:

Hi Friend , Today we will learn about ConfirmButtonExtender Control.This control displays a message to the user at the click event of the Button control. Here You will ask for the confirmation when the user clicks the button to fire some event.This popup will help users to correct the errors in the form if any.In this application,when you click the submit button,a message appears with the Confirmation dialog box.You can use your custom dialog box also.
There are some properties of ConfirmButtonExtender Control as given below:-

TargetControlID:-It is helpful to set the ID of the Button control to which the extender control attached.
ConfirmText:-It sets the text that is displayed whit in the confirm dialog box.
DisplayModelPopupID:-It sets the ID of a ModalPopupExtender control to use as a confirm dialog box.
OnClentCancel:-This specifies the client-side script that executes when the cancel button is clicked in the confirm dialog box.
ConfirmOnFormSubmit:- It determines,whether or not the confirm dialog box should wait when the form submits to display.

3

How to use ListSearchExtender control on ASP.NET Web page using concepts of Ajax Technology

On 00:58:00 By RAMASHANKER VERMA // No comments:

Hi Friend,Today we will learn "How to Implement ListSearchExtender control on asp.net website". This control allows you to perform an incremental search for the desired items in the DropDownList or List Box control by typing a stream of texts.This control is very helpful, if you have more values (items) in your database.Using this control ,you can easily find the data by typing the word incrementally.This is generally used in filling Form's websites.
There are some properties of this control as given below:-

TargetControlID:-It sets the ID of the List Box or DropDownList control to which the extender control is attached.
PromptText:-It is helpful to sets the message that is displayed when the List Box or DropDownList control receives focus.
PromptPosition:- It is helpful to determine the position of the message relative to the target control.It can be either Top or Bottom.The default position is Top.
QueryTimeout:-It sets the time that resets the search query just after the timeout and no match found.
QueryPatten:-It specifies how the typed characters should be used inn the search query.
IsSorted:-It determines whether or not the items added to the list should be sorted.

3

How to upload images using ajax AsynFileUpload Control and Create a Photo gallery of your friends like Google+ and Facebook in asp.net

On 17:21:00 By RAMASHANKER VERMA // No comments:

The AsynFileUpload Ajax control enables you to upload the files asynchronously on server.The uploading of files can be confirmed at both the server and client side. You can save the uploaded images by using SaveAs() method.This control works the uploads the files without doing any post pack. This control shows the Loading image while file uploading is in process .There are different coloring options for showing the file upload.

Green color to indicate the file is uploaded successfully
Red color to indicate the file upload is not successful

Sql server database is used to save the uploaded image by AsynFileUpload control.Here i have used a DataList control to display the uploaded images.In this Data List Control you can create your friends photo gallery like google+ and Facebook. For this application, you have to install AjaxToolkit first on your visual studio.You can install it easily from Here.

There are different concepts that you can implement by using this concepts.

You can create your image gallery by using Grid View and Repeater control also in asp.net application.
You can use this AsynFileUpload control on your asp.net Form like IBPS.
You can use this concepts in asp.net 3 tier architecture also.
You can save your file path in .mdf database in asp.net.
You can use secure connections in your .net applications.

3

How to use ModelPopupExtender Control in asp.net website

On 14:04:00 By RAMASHANKER VERMA // No comments:

Introduction :- The ModelPopupExtender control enables you to display the simple text of the page content of the user by displaying a model pop-up window.When the pop-up window appears,the remainder of the web page grays out,preventing you from interacting with page.However, at that time, you can interact with the pop-up window contents.This (ModelPopupExtender) popup is fired by onclick event on the target controls.
There are some properties of ModelPopupExtender Control as given below:-

3

How to Use TextBoxWhatermarkExtender control on ASP.NET Website

On 17:11:00 By RAMASHANKER VERMA // No comments:

Introduction :- The TextBoxWhatermarkExtender control is used to provide a tip 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 renders for the first time. when the user clicks the text box to insert values,the default text gets hidden. If you have not installed ajax toolkit ,You can install it from here.
There are some properties of this extender control as given below:-
1.) TargetControlID :- It sets the ID of the TextBox control to which you want to attach the extender control.
2.) TargetControlID :- It sets text to display when the value in the text box is empty.
3.) WhatmarkCssClass :- It sets the Css class for text box when it is empty.

3

How to Use Rating Concepts on ASP.NET Web Page

On 13:29:00 By RAMASHANKER VERMA // No comments:

Introduction :- While we are accessing a web page on the internet then you will see, a web page request for user's feedback.This feed back provides a key metric to recognize the satisfaction of users. So, the owner of the materials provides a rating system that represent a set of stars, which can be used to receive the feedback.The rating mechanism used by ASP.NET needs a synchronous postback. Here i have used ten rating stars.You can see it after run this application. If you are not installing AjaxToolKit on your visual studio, You can install it from here.
There are some important properties of rating control as given below:-

AutoPostBack :- It sets to true if you want to perform a postback by clicking a rating item.
CurrentRating : - It sets the initial rating value to display the selected rating item when the page is loaded.
MaxRating :- It sets the maximum rating value that you want to allow to rate an item.
StarCssClass :- It sets the CSS class for the visible star.
RatingAlign :-It sets an alignment for the starts.Vertical or Horizontal.
Tag :- It sets the custom parameter to pass to the ClientCallBack event.
ReadOnly :- It determines whether or not the rating can be changed.
RatingDirection :- It sets the rating direction.The value can be Left To Right ,Top To Bottom or Right To Left, Bottom To Top .
WaitingStarCssClass :- It sets the CSS class for the star in the filled state.
FilledStarCssClass :- It sets the CSS class for the the star in the filled state.
EmptyStarCssClass :- It sets the CSS class for the the star in the Empty state.
OnChanged :- It sets the clientCallBack event to fire when the rating item is changed.

3

How to implement UpdatePanelAnimatonExtender Control on ASP.NET Website

On 13:27:00 By RAMASHANKER VERMA // No comments:

Introduction :- The UpdatePanelAnimatonExtender Control 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 and updatable region is refreshed and therefore, can be used only when the web page consists of n UpdatePanel control. If you have not installed AjaxToolkit on your visual studio, you can install it from from Here.
There are some important properties of UpdatePanelAnimatonExtender Control as given below:-

TargetControlID :-It sets the ID of the control whose updates results in animation effects.
OnUpdating :-It sets an event to play animation when the update is in progress.
OnUpdated:- It sets an event to play the animation when the update is complete.The animation plays if and only if there is some change in the UpdatePanel control after the update.

3

How to Use AnimationExtender Control on ASP.NET Website

On 20:42:00 By RAMASHANKER VERMA // No comments:

Introduction :- The AnimationExtender control allows you to utilize built-in animation Framework with existing web pages in a more declarative way. This control allows you to add a broad set of fancy animation effects to your website. The animation plays when certan event occurs on the target control, such as OnClick, OnLoad, OnMouseOver and OnMouseout . we can implement and control a variety of animated actions using the built-in framework,such as fading ,resizing and moving a control. This control is more helpful in web development. If you are not installing AjaxToolKit then you can install it from Here.
There are some important properties of AnimationExtender control as given below:-

TargetControlID:- It sets the ID of the control whose events are fired to create animation effects.
OnLoad :- It sets an event to play the animation when the page loaded.
OnClick :- It sets an event to play when the target control is clicked.
OnHoverOver :- It sets an event to play when the mouse moves over the target control but it stops the animation created by the OnHoverOut property before it plays.
OnHoverOut :- It sets an event to play when the mouse moves away from the target control but it stops the animation created by the OnHoverOver property before it plays.
OnMouseOver :- It sets an event to play when the mouse moves over the target control.
OnMouseOut :- It sets an event to play when the mouse moves away from the target control.

3

How to Use TabContainer Control on ASP.NET Website

On 00:05:00 By RAMASHANKER VERMA // No comments:

Introduction :- The TabContainer control provides multiple views in web page. Microsoft has released new products, such as window 7c , Internet Explorer, Microsoft Office 2007/2010 ,with tabbed version. This version is released for graphics purpose only. The TabContainer Control enables you to create a tabbed interface,where clicking each tab displays different contents.Switching from one tab to other does not need a postback. If you are not install AjaxToolKit then first install it from Here .
There are some properties of TabContainer control as given below:-

ActiveTabChanged :- It sets an event that is fired on the server-side when a tab is changed after a postback.
OnClientActiveTabChanged:- It attaches a JavaScript function to the client-side tab-changed event.
ActiveTabIndex :- It sets the tab index that remains visible when the page renders for the first time.
CssClass : - It sets the CSS class to define custom look fr tabs.It overrides the already defined custom look settings.
ScrollBars:- It determines whether or not the scrollbars should be displayed.-
Hieght :- It sets the height of the body of tabs.
Width :- It sets the width of the body of tabs.

3

How to implement Accordion Control on ASP.NET Web page

On 12:55:00 By RAMASHANKER VERMA // No comments:

Introduction :- The Accordion control allows you to group multiple collapsible panels in a single control. At the same time, It also manages the Collapsed and expanded state of each panel , therefore ,expanding one panel at a time. It Means,the accordion control does not support expanding two or more panels simultaneously.Instead , the header templates of all the panels are always visible so that you can click it to display the hidden contents.By default ,the Accordion control opens with one panel as expanded. The Accordion control enables you to provide multiple panes simultaneously on the web page among which only one pane can be displayed at a time.It is similar to the collapsiblePanelExtender control.
Before using this control ,you have to install Ajax Toolkit on your visual studio. You can install it from here .

3