ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial: Ajax

Showing posts with label Ajax. Show all posts

Saturday, July 4, 2015

How to add Ajax Toolkit to Visual Studio 2012, 2013

Introduction: In this article I will explain how to add Ajax Toolkit to Visual Studio 2012, 2013 from Nuget

Description:

In the previous article I have explained Swap the image OnClick using Jquery inasp.net and How to Change the image on MouseHover like shopping website usingJquery in asp.net

To add the Ajax Toolkit go to Tools>>Library Package manager >> Package Manger Console. Now copy and paste the below given command:

Install-Package AjaxControlToolkit

Ajax rating control example in asp.net

Vijay Saklani Ajax , Asp.Net

Introduction: In this article I will explain how to use the Ajax rating control in asp.net with database.

Description:

We see an option for rating on shopping website like FlipKart, SnapDeal, and Amazon etc… There is a rating control using this we can display the rating. In this example I have an Hotel and users will rate it. To implement the functionality follow the below given steps:

Auto refresh data in Gridview without loading whole page in asp.net

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will explain how we can Auto refresh data in Gridview without loading whole page in asp.net using ajax.

Description:

In the last article I have explained Add Meta Tag Code behind in asp.net, Encrypt and Decrypt Query String in asp.net, Create multiple Language website in Asp.net and Send Password Reset Link in Asp.net.

Add a webform to project. Drag and drop the Gridview, Update Panel control from Toolbox and desgin the .aspx as shown below:

BODY,TD

{

font-family: ·L³n¥¿¶ÂÅé, Tahoma, Arial, Verdana;

font-weight: normal;

font-size: 14px;

color: #000;

}

</style>

How to use Ajax CollapsiblePanelExtender control on Asp.net OR Ajax CollapsiblePanelExtender control Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this article I will try to explain how we can use the Ajax CollapsiblePanelExtender in Asp.net.

Description:

In the last article I have explained How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example, How to useAutoCompleteExtender Ajax control in Asp.net, How to use TabContainer AjaxControl in Asp.net and How to use Ajax FilteredTextBoxExtender control in Asp.net OR Ajax FilteredTextBoxExtender Example.

We use CollapsiblePanelExtender to create collapsible panel i.e. click on down arrow panel will expand and click on up arrow will collapse automatically. CollapsiblePanelExtender Properties:

TargetControlID: Panel ID to expand and collapse

CollapseControlID: ID used to collapse on click

ExpandControlID: ID used to expand on click

CollapsedImage: path of image used by ImageControlID when the panel is collasped

ExpandedImage: path of image used by ImageControlID when the panel is expand

TextLabelID: ID of the label where STATUS TEXT for the panel will be placed.

CollapsedText: text to show in control specified by TextLabelID when panel is collapsed

ExpandedText: text to show in control specified by TextLabelID when panel is expand

Collapsed: specifies that object should initially be colasped or expanded

ImageControlID: ID of image control where icon indicating the collapsed status of the panel. Extender will replace the image source with CollapsedImage and ExpandedImage.

AutoCollapse: automatically collaspe when mouse is moved over the panel. Automatically it’s true

AutoExpand: automatically expand when mouse is moved over the panel. Automatically it’s true

How to use Ajax FilteredTextBoxExtender control in Asp.net OR Ajax FilteredTextBoxExtender Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will explain how we can use the Ajax FilteredTextBoxExtender control in Asp.net.

FilteredTextBoxExtender

Description:

In the last article I have explained How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example, How to useAutoCompleteExtender Ajax control in Asp.net, How to use TabContainer AjaxControl in Asp.net and How to use ModalPopupExtender Ajax control in Asp.net OR ModalPopupExtender Ajax control Example.

FilteredTextBoxExtender used to prevent the user to enter invalid characters to Textbox. FilteredTextBoxExtender Properties:

TargetControlID: ID of Textbox for FilteredTextBoxExtender to operate on

FilterType: Filter type apply on Textbox, as a comma seprated combination of Numbers, Uppercase Letters, Lowercase Letters and Custom.

ValidChars: If Filtertype is Custom than use this property otherwise ignore.

How to use ModalPopupExtender Ajax control in Asp.net OR ModalPopupExtender Ajax control Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this article I will try to explain how we can use the ModalPopupExtender Ajax control in Asp.net.

Description:

We use the ModalPopup control to display the data in popup. Add a new webform to project. Add the below given style between Head Tag:

#login

{

min-width:200px;

height:110px;

background-color:#c2e4f0;

border:1px solid;

padding:15px 15px;

border-radius:4px;

-webkit-box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);

-moz-box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);

box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);

}

.modal

{

background-color:#333333;

filter:alpha(opacity=70);

opacity:0.7;

}

</style>

How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this article I will try to explain how e can use the Ajax NumericUpDownExtender control in asp.net.

Description:
In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to use AutoCompleteExtender Ajax control in Asp.net, How to use TabContainer Ajax Control in Asp.net, How to use Ajax Balloonpopupextender control in Asp.net.

NumericUpDownExtender can be attached to Textbox control to add up and down buttons that increase and decrease the value in Textbox. NumericUpDownExtender properties:

TargetControlID: ID of the Textbox

RefValues:List of the value separated by semicolons(;) to be used for numeric up and down

Width: Combined sixe of Textbox and Up/Down buttons

ServiceDownPath/ServiceUpPath: Path to a web service that returns the data used to get next or previous value.

ServiceDownMethod/ServiceUpMethod: web services method that returns the data to get next and previous value

TargetButtonUpID/TargetButtonUpID: Custom Up/Down buttons

How to use Ajax BalloonPopupExtender control in Asp.net OR Ajax BalloonPopupExtender Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will try to explain how we can use Ajax BalloonPopupExtender in Asp.net.

We use the BalloonPopupExtender control to display the popup which contains the content e.g. for help information. BalloonPopupExtender properties:

TargetControlID: ID of the control to attach

BalloonPopupControlID: ID of the control to display

BalloonSize: Optional setting for specify the size of balloon popup i.e. small, medium and large

BalloonStyle: Optional setting specify the theme of balloon popup i.e. Cloud, Rectangle and custom

DisplayOnMouseOver:Optional setting whether to display the balloon popup on the client on MouseOver event or not.

How to use Ajax PopupControlExtender in Asp.net OR Ajax PopupControlExtender Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this article I will try to explain how we can use Ajax PopupControlExtender control in Asp.net.

Description:

In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to use AutoCompleteExtender Ajax control in Asp.net, How to use TabContainer Ajax Control in Asp.net.

Ajax PopupControlExtender control used to open a popup window to display additional information. Popup Control Properties:

TargetControlID: ID of the control to attach to

PopupControlID: ID of the control to display

Position: Optional setting for specify the Popup position i.e. Left, Right, Top, Bottom, Center

CommitProperty: Optional setting specify the control being extend that should be set with the result of the popup

Add a webform to project. Drag and drop the control from Toolbox. Desgin the .aspx page as shown below:

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

</asp:ScriptManager>

<table><tr><td>Qualification:</td><td><asp:TextBox ID="txtqualification" runat="server"></asp:TextBox></td></tr>

<asp:TextBox ID="txtcalender" runat="server"></asp:TextBox></td></tr>

</table>

<asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="txtqualification" PopupControlID="panel1"

Position="Right"

CommitProperty="value">

</asp:PopupControlExtender>

<asp:PopupControlExtender ID="PopupControlExtender2" runat="server" TargetControlID="txtcalender" PopupControlID="pan2" Position="Bottom" CommitProperty="value">

</asp:PopupControlExtender>

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:RadioButtonList ID="RadioButtonList1" runat="server"

AutoPostBack="True" BorderColor="#336699" BorderStyle="Solid"

Width="130px" BorderWidth="1" BackColor="#dadada"

onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">

How to use TabContainer Ajax Control in Asp.net OR TabContainer Ajax Control Example

Vijay Saklani Ajax , Ajax TabContainer

Introduction: In this article I have try to explain how we can use the TabContainer Ajax control in Asp.net.

Description:

In the last article I have explained How to install Ajax control Toolkit in Visual Studio, How to useAutoCompleteExtender Ajax control in Asp.net, How to Upload multiple filesusing AjaxFileUpload and save path to database in Asp.net.

We use the TabContainer Control to show/display the a lot of information on one page. TabContainer contain the set of Tabs. TabPanel define HeaderText and ContentTemplate.

Add a new webform to project. Drag and drop the TabContainer Control from Toolbox. Design your page as shown below:

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

</asp:ScriptManager>

<asp:TabContainer ID="TabContainer1" runat="server">

<asp:TabPanel ID="tab1" runat="server" HeaderText="Employee Detail">

<table>

<tr><td>Employee Name:</td><td>Rakesh</td></tr>

<tr><td>Address:</td><td>#1219 Sec 40B CHD</td></tr>

<tr><td>City:</td><td>Chandigarh</td></tr>

<tr><td>Phone No.:</td><td>1523451245</td></tr>

</table>

</ContentTemplate>

</asp:TabPanel>

<asp:TabPanel ID="tab2" runat="server" HeaderText="Employee Qualification">

<table>

<tr><td>Professional Qualification:</td><td>B.Tech.</td></tr>

<tr><td>College Name:</td><td>ABCDE</td></tr>

<tr><td>University:</td><td>ABCD</td></tr>

<tr><td>Percentage:</td><td>85%</td></tr>

</table>

</ContentTemplate>

How to use PasswordStrength Ajax Control in Asp.net OR PasswordStrength Ajax control Example

Vijay Saklani Ajax , Asp.Net

Introduction: in this post I have try to explain how we can use the PasswordStrength Ajax Control in Asp.net.

Description:

Add a webform to project. After that put the blow given style in between Head Tag:

.txtpass

{

background-color:none;

font-weight:bold;

}

.Border

{

border:1px solid;

width: 180px;

padding:2px;

}

VeryPoor

{

background: Red;

color:White;

font-weight:bold;

}

.Weak

{

background: Gray;

color:White;

font-weight:bold;

}

.Average

{

background: orange;

color:black;

font-weight:bold;

}

.Good

{

background: blue;

color:White;

font-weight:bold;

}

.Excellent

{

background: Green;

color:White;

font-weight:bold;

}

.lbltext

{

font-weight:bold;

}

</style>

How to Use Accordion Ajax Control in Asp.net

Vijay Saklani Accordion , Ajax

Introduction: In this article I have explain how to use Accordion Ajax control in Asp.net.

Description:

Add a webform to project. Put the below given style in between Head tag:

.Header

{

background-color:Navy;

color:White;

margin-top:4px;

padding:4px;

width:30%;

font-size:20px;

font-weight:bold;

}

.content

{

width:30%;

background-color:none;

}

</style>

After that drag and drop the Accordion Ajax control from Toolbox.

How to use AutoCompleteExtender Ajax Control in Asp.net OR AutoCompleteExtender Ajax Control Example

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will try to explain how we can use the AutoCompleteExtender Ajax Control in Asp.net.

Description:

In the last article I have explained How to install Ajax control Toolkit in Visual Studio , How to upload multiple files using AjaxFileUpload and save path to Database in asp.net , How to use Ajax UpdateProgress Control in Asp.net.

I have a table PRODUCTS. Here PRODUCT_ID is primary key and auto increment.

PRODUCT_ID	int
PRODUCT_NAME	varchar(50)

Add a webform to project. Drag and drop the AutoCompleteExtender , ScriptManager control from Toolbox as mention below:

<tr><b>AutoCompleteExtender Example</b></tr>

<tr><td>Product Name:</td><td><asp:TextBox ID="txtproduct" runat="server"></asp:TextBox></td></tr></table>

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

</asp:ScriptManager>

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtproduct" ServiceMethod="GETPRODUCT" MinimumPrefixLength="1" EnableCaching="false" CompletionSetCount="10" CompletionInterval="100"></asp:AutoCompleteExtender>

How to upload multiple files using AjaxFileUpload and save path to Database in Asp.net

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will explain how we can upload the multiple files and save their path to Database using AjaxFileUpload control in Asp.net.

Description:

In last article I explained How to install Ajax controlToolkit in Visual Studio. I have created a table IMAGE_PATH. Here IMAGE_ID is primary key.

IMAGE_PATH	int
IMAGE_PATH	varchar(MAX)

Add a new webform to project. Drag and drop the ScriptManager from Ajax Extensions. After that take the AjaxFileUpload control from Toolbox as shown below:

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

</asp:ScriptManager>

<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete1"/>

Note: we can validate the uploaded file via their extension using AllowedFileTypes Property of AjaxFileUpload control.

How to install/add Ajax Control Toolkit in Visual Studio

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will explain how to add/install the Ajax control Toolkit to Visual Studio.

Description:

1. Download the Ajax control Toolkit from below given link:

http://ajaxcontroltoolkit.codeplex.com/releases/view/105897 or http://ajaxcontroltoolkit.codeplex.com/

2. Go to Toolbox>Right click> Add Tab and enter tab name (Ajax Control Toolkit).

3. Right click on Tab (Ajax Control Toolkit) and choose Items.

After that browse the location of Ajax Control Toolkit, select the Ajaxcontroltoolkit.dll and

How to use Ajax UpdateProgress Control in Asp.net

Vijay Saklani Ajax , Asp.Net

Introduction: In this post I will explain you we can use the Ajax Updateprogress control in Asp.net.

Description:

Open Visual Studio>File>New>Website. After that Add a new webform to website>Go to Toolbox>Ajax Extensions.

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

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

Saturday, July 4, 2015

How to add Ajax Toolkit to Visual Studio 2012, 2013

Wednesday, June 10, 2015

Ajax rating control example in asp.net

Tuesday, September 10, 2013

Auto refresh data in Gridview without loading whole page in asp.net

Saturday, August 17, 2013

How to use Ajax CollapsiblePanelExtender control on Asp.net OR Ajax CollapsiblePanelExtender control Example

Thursday, August 8, 2013

How to use Ajax FilteredTextBoxExtender control in Asp.net OR Ajax FilteredTextBoxExtender Example

Wednesday, July 31, 2013

How to use ModalPopupExtender Ajax control in Asp.net OR ModalPopupExtender Ajax control Example

Wednesday, July 17, 2013

How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example

Tuesday, July 16, 2013

How to use Ajax BalloonPopupExtender control in Asp.net OR Ajax BalloonPopupExtender Example

Friday, July 12, 2013

How to use Ajax PopupControlExtender in Asp.net OR Ajax PopupControlExtender Example

Thursday, July 11, 2013

How to use TabContainer Ajax Control in Asp.net OR TabContainer Ajax Control Example

Monday, July 8, 2013

How to use PasswordStrength Ajax Control in Asp.net OR PasswordStrength Ajax control Example

Thursday, July 4, 2013

How to Use Accordion Ajax Control in Asp.net

Tuesday, July 2, 2013

How to use AutoCompleteExtender Ajax Control in Asp.net OR AutoCompleteExtender Ajax Control Example

In the last article I have explained How to install Ajax control Toolkit in Visual Studio , How to upload multiple files using AjaxFileUpload and save path to Database in asp.net , How to use Ajax UpdateProgress Control in Asp.net.

Sunday, June 16, 2013

How to upload multiple files using AjaxFileUpload and save path to Database in Asp.net

Wednesday, May 15, 2013

How to install/add Ajax Control Toolkit in Visual Studio

Tuesday, May 14, 2013

How to use Ajax UpdateProgress Control in Asp.net

Popular Posts

Labels