This tutorial will show you how to use AJAX with C#.NET to change any part of your web page, without reloading the page (click here for an example). By using the XMLHttpRequest object and split values produced from C#.NET at lightning fast response times, you can change many parts of your website instantly. Simply download the completed working project and modify the code to work on your website to design various AJAX projects with C#.NET like an advanced search, chatrooms, IM’s or whatever. You can go through the 3 documents which include all the instructions you need, or read on…
Index.html
The document / front end that the user will see
1. Include the AJAX code / JavaScript needed to generate the different html parts
Code:
<script src="ajax.js" type="text/javascript"></script>
2. You can call the ”fncResults” function in the <body> tag’s “onload” event to initiate the AJAX result, or you can use various other controls like the textbox’s “onKeyUp”, or a dropdown list’s “onChange” event. Use a value in the brackets to determine what control was last changed to initiate the AJAX request.
Code:
<body onLoad="fncResults(0);">
OR
<select onChange="fncResults(1);">
OR
<input type="text" onKeyUp="fncResults(2);">
3. Add span tags with IDs around AJAX loading gifs which will notify the user when an AJAX request is being processed.
Code:
<span id="spnLoaderSquare"><img src="ajax-loader.gif" /></span>
<span id="spnLoaderType"><img src="ajax-loader.gif" /></span>
<span id="spnLoaderPut"><img src="ajax-loader.gif" /></span>
4. Place span tags and assign an ID to each which will be used to apply dynamic html values in from the ajax.js document using the “innerHTML” property
Code:
<tr>
<td height="25%">r1</td>
<td><span id="spn_R1_C1"></span></td>
<td><span id="spn_R1_C2"></span></td>
<td><span id="spn_R1_C3"></span></td>
</tr>
Ajax.js
The AJAX / JavaScript code needed to retrieve the values from ajax.aspx, and display them in index.html
Note: Simply change the values where it is marked: //CHANGE to match your content
1. This snippet will display or remove the AJAX loading gif when necessary to notify the user that the AJAX info is loading. Change the values ('spnLoaderPut', 'spnLoaderType', 'spnLoaderSquare') to the span tag IDs on your HTML page where you like the loading gif/s to display.
Code:
fncVisibility('spnLoaderPut', 'inline');
fncVisibility('spnLoaderType', 'inline');
fncVisibility('spnLoaderSquare', 'inline');
Code:
fncVisibility('spnLoaderPut', ‘none’);
fncVisibility('spnLoaderType', ‘none’);
fncVisibility('spnLoaderSquare', ‘none’);
2. The following code specifies the path to the C#.NET document where the dynamic values can be retrieved from, and also allow you to pass values using a query string.
Code:
var strUrl = "ajax.aspx";
strUrl = strUrl + "?put=" + document.getElementById("ddlPut").options[document.getElementById("ddlPut").selectedIndex].value;
strUrl = strUrl + "&typing=" + document.getElementById("txtType").value;
strUrl = strUrl + "&square=" + document.getElementById("ddlSquare").options[document.getElementById("ddlSquare").selectedIndex].value;
strUrl = strUrl + "&lastchanged=" + strObject;
3. After retrieving the string produced from the C#.NET document, split the values by assigning the string to an array, then apply each value individually to the different sections of your HTML document. The string is split by the value “[CWAsplit]” in the C#.NET document
Code:
var strCWAsplit = objXmlHttp.responseText.split("[CWAsplit]")
if(strCWAsplit[0]){document.getElementById("spn_R1_C1").innerHTML=strCWAsplit[0];}
if(strCWAsplit[1]){document.getElementById("spn_R1_C2").innerHTML=strCWAsplit[1];}
if(strCWAsplit[2]){document.getElementById("spn_R1_C3").innerHTML=strCWAsplit[2];}
if(strCWAsplit[3]){document.getElementById("spn_R2_C1").innerHTML=strCWAsplit[3];}
if(strCWAsplit[4]){document.getElementById("spn_R2_C2").innerHTML=strCWAsplit[4];}
if(strCWAsplit[5]){document.getElementById("spn_R2_C3").innerHTML=strCWAsplit[5];}
if(strCWAsplit[6]){document.getElementById("spn_R3_C1").innerHTML=strCWAsplit[6];}
if(strCWAsplit[7]){document.getElementById("spn_R3_C2").innerHTML=strCWAsplit[7];}
if(strCWAsplit[8]){document.getElementById("spn_R3_C3").innerHTML=strCWAsplit[8];}
if(strCWAsplit[9]){document.getElementById("spnResult").innerHTML=strCWAsplit[9];}
Ajax.aspx
The code behind that will produce the dynamic split values to be retrieved in ajax.js
Basically what this document does is to print one string value that has split anchor points ("[CWAsplit]") which will be split into any amount of values to apply to various parts of the index.html document. See the attached file for more info
Ajax c#
Reply With Quote
