how to calculate two textbox value using ajax in asp.net?
Printable View
how to calculate two textbox value using ajax in asp.net?
[I]1. Add a html page in your vs.net solution explorer and create xmlhttp object in javascript. Details...[/I]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]html[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]head[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]title[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][SIZE=2]Add Two Number[/SIZE][SIZE=2][COLOR=#0000ff]</< font>[/COLOR][SIZE=2][COLOR=#800000]title[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]script[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text/javascript"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][SIZE=2] xmlHttp[/SIZE]
[SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][SIZE=2] GetXmlHttpObject() [/SIZE][SIZE=2][COLOR=#008000]//create different XMLHttpRequest objects according to the different browsers[/COLOR][/SIZE]
[SIZE=2]{ [/SIZE][SIZE=2][COLOR=#008000]// u hv to create this boat(XMLHttpRequest) as u r going cross river without swim. [/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][SIZE=2] xmlHttp=[/SIZE][SIZE=2][COLOR=#0000ff]null[/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#0000ff]try[/COLOR][/SIZE][SIZE=2][COLOR=#008000]// u need to create different type of boat for different browser[/COLOR][/SIZE]
[SIZE=2]{ [/SIZE]
[SIZE=2]xmlHttp=[/SIZE][SIZE=2][COLOR=#0000ff]new[/COLOR][/SIZE][SIZE=2] XMLHttpRequest(); [/SIZE][SIZE=2][COLOR=#008000]// for Firefox, Opera 8.0+, Safari[/COLOR][/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff]catch[/COLOR][/SIZE][SIZE=2] (e)[/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#0000ff]try[/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2]xmlHttp=[/SIZE][SIZE=2][COLOR=#0000ff]new[/COLOR][/SIZE][SIZE=2] ActiveXObject([/SIZE][SIZE=2][COLOR=#800000]"Msxml2.XMLHTTP"[/COLOR][/SIZE][SIZE=2]); [/SIZE][SIZE=2][COLOR=#008000]//for Internet Explorer[/COLOR][/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff]catch[/COLOR][/SIZE][SIZE=2] (e)[/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2]xmlHttp=[/SIZE][SIZE=2][COLOR=#0000ff]new[/COLOR][/SIZE][SIZE=2] ActiveXObject([/SIZE][SIZE=2][COLOR=#800000]"Microsoft.XMLHTTP"[/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#008000]//for Internet Explorer, for big company n big big things[/COLOR][/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][SIZE=2] xmlHttp;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][SIZE=2] add() [/SIZE][SIZE=2][COLOR=#008000]//crate this function as u used it onclick[/COLOR][/SIZE]
[SIZE=2]{ [/SIZE]
[SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][SIZE=2] txt1 = document.getElementById([/SIZE][SIZE=2][COLOR=#800000]"Text1"[/COLOR][/SIZE][SIZE=2]).value; [/SIZE][SIZE=2][COLOR=#008000]//get the value type from txtbox1[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][SIZE=2] txt2 = document.getElementById([/SIZE][SIZE=2][COLOR=#800000]"Text2"[/COLOR][/SIZE][SIZE=2]).value; [/SIZE][SIZE=2][COLOR=#008000]//get the value type from txtbox1[/COLOR][/SIZE]
[SIZE=2]xmlHttp=GetXmlHttpObject() [/SIZE][SIZE=2][COLOR=#008000]// call httpxml object[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][SIZE=2] (xmlHttp==[/SIZE][SIZE=2][COLOR=#0000ff]null[/COLOR][/SIZE][SIZE=2]) [/SIZE][SIZE=2][COLOR=#008000]//check whethere u hv got any xmlhttp object[/COLOR][/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2]alert ([/SIZE][SIZE=2][COLOR=#800000]"Your browser does not support AJAX!"[/COLOR][/SIZE][SIZE=2]);[/SIZE]
[SIZE=2][COLOR=#0000ff]return[/COLOR][/SIZE][SIZE=2];[/SIZE]
[SIZE=2]} [/SIZE]
[SIZE=2][COLOR=#0000ff]var[/COLOR][/SIZE][SIZE=2] url=[/SIZE][SIZE=2][COLOR=#800000]"Default.aspx"[/COLOR][/SIZE][SIZE=2]; [/SIZE][SIZE=2][COLOR=#008000]//arrange query string to send user(God to the developer) input in your server[/COLOR][/SIZE]
[SIZE=2]url=url+[/SIZE][SIZE=2][COLOR=#800000]"?q1="[/COLOR][/SIZE][SIZE=2]+txt1+[/SIZE][SIZE=2][COLOR=#800000]"&q2="[/COLOR][/SIZE][SIZE=2]+txt2;[/SIZE]
[SIZE=2]url=url+[/SIZE][SIZE=2][COLOR=#800000]"&sid="[/COLOR][/SIZE][SIZE=2]+Math.random();[/SIZE]
[SIZE=2]xmlHttp.onreadystatechange=stateChanged; [/SIZE][SIZE=2][COLOR=#008000]//attach the object state to the callback function[/COLOR][/SIZE]
[SIZE=2]xmlHttp.open([/SIZE][SIZE=2][COLOR=#800000]"POST"[/COLOR][/SIZE][SIZE=2],url,[/SIZE][SIZE=2][COLOR=#0000ff]true[/COLOR][/SIZE][SIZE=2]); [/SIZE][SIZE=2][COLOR=#008000]//load the web page to link[/COLOR][/SIZE]
[SIZE=2]xmlHttp.send([/SIZE][SIZE=2][COLOR=#0000ff]null[/COLOR][/SIZE][SIZE=2]); [/SIZE][SIZE=2][COLOR=#008000]//send out request, now lets go to the oppsite site of river[/COLOR][/SIZE]
[SIZE=2]} [/SIZE]
[SIZE=2][COLOR=#0000ff]function[/COLOR][/SIZE][SIZE=2] stateChanged() [/SIZE]
[SIZE=2]{ [/SIZE]
[SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][SIZE=2] (xmlHttp.readyState==4) [/SIZE][SIZE=2][COLOR=#008000]//judge whether the asynchronous calling has finished[/COLOR][/SIZE]
[SIZE=2]{ [/SIZE]
[SIZE=2][COLOR=#0000ff]if[/COLOR][/SIZE][SIZE=2] (xmlHttp.status==200)[/SIZE][SIZE=2][COLOR=#008000]//when the status equals 200, then put the result in your html page[/COLOR][/SIZE]
[SIZE=2]{ [/SIZE]
[SIZE=2]document.getElementById([/SIZE][SIZE=2][COLOR=#800000]"Text3"[/COLOR][/SIZE][SIZE=2]).value=xmlHttp.responseText;[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][COLOR=#0000ff]</< font>[/COLOR][SIZE=2][COLOR=#800000]script[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</< font>[/COLOR][SIZE=2][COLOR=#800000]head[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]body[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2]Enter 1st Number:[/SIZE][SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]input[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]id[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Text1"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2]Enter 1st Number:[/SIZE][SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]input[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]id[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Text2"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]input[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]id[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="calculate"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]onclick[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="add()"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="button"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]value[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="calculate"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]input[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]id[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Text3"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]type[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="text"[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</< font>[/COLOR][SIZE=2][COLOR=#800000]body[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]</< font>[/COLOR][SIZE=2][COLOR=#800000]html[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=darkslategray][I]2. Add some more code in Default.aspx.cs[/I][/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]protected[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]void[/COLOR][/SIZE][SIZE=2] Page_Load([/SIZE][SIZE=2][COLOR=#0000ff]object[/COLOR][/SIZE][SIZE=2] sender, [/SIZE][SIZE=2][COLOR=#008080]EventArgs[/COLOR][/SIZE][SIZE=2] e)[/SIZE]
[SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#008000]//obtain the passed two parameter [/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]string[/COLOR][/SIZE][SIZE=2] txt1=Request.QueryString[[/SIZE][SIZE=2][COLOR=#800000]"q1"[/COLOR][/SIZE][SIZE=2]];[/SIZE]
[SIZE=2][COLOR=#0000ff]string[/COLOR][/SIZE][SIZE=2] txt2 = Request.QueryString[[/SIZE][SIZE=2][COLOR=#800000]"q2"[/COLOR][/SIZE][SIZE=2]];[/SIZE]
[SIZE=2][COLOR=#0000ff]decimal[/COLOR][/SIZE][SIZE=2] result =[/SIZE][SIZE=2][COLOR=#008080]Int32[/COLOR][/SIZE][SIZE=2].Parse(txt2) +[/SIZE][SIZE=2][COLOR=#008080]Int32[/COLOR][/SIZE][SIZE=2].Parse(txt1);[/SIZE]
[SIZE=2]Response.Write(result); [/SIZE][SIZE=2][COLOR=#008000]//return the result[/COLOR][/SIZE]
[SIZE=2]}[/SIZE]
[SIZE=2][I][COLOR=darkslategray]3. Delete all the tag from Default.aspx source view except pagedirective, its look like..[/COLOR][/I][/SIZE]
[SIZE=2][SIZE=2]<%[/SIZE][SIZE=2][COLOR=#0000ff]@[/COLOR][/SIZE][SIZE=2][COLOR=#800000]Page[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]Language[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="C#"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]AutoEventWireup[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="true"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]CodeFile[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="Default.aspx.cs"[/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]Inherits[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="_Default"[/COLOR][/SIZE][SIZE=2] %>[/SIZE]
[SIZE=2]Nothing else to add two text box value in ajax in asp.net without ajax framework.[/SIZE]
[SIZE=2]For more details how its working plz visite [URL]http://w3schools.com/ajax/default.asp[/URL] :)[/SIZE]
[/SIZE][/COLOR][/SIZE]
[/SIZE][/SIZE][/SIZE][/SIZE][/SIZE]