Get Data of other page on current page
During Development, It might happen that you want to show html data from some other page into your main page or you want to send a database request from your main page to some other page and expects the resultant data back in a formatted output into your current page and that too, without your page getting refreshed.
This article will show how you can achieve the above scenario through Ajax
1) Define a control and an event on which you want to make a ajax request
<select name="company" onchange="showCompany(this.value)">
2) Declare a JavaScript function to handle event declared in step 1
function showCompany(str) {
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
else // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", "GetCompany.aspx?CompId=" + str, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
}
This javascript function will be called whenever select option value changes. As you can see, we are making an XMLHTTPREquest to GetCompany.aspx page. We are also passing a parameter to this requested page; value of this parameter is taken from the value of the select html control.
3) In GetCompany.aspx, we declare a property to store the value of the parameter passed from main page as shown in step 2.
if (Request.QueryString["CompId"] != null)
{
CompanyID = Request.QueryString["CompId"].ToString();
}
4) Using this property, we will retrieve the data from the database or any other data source.
In this example, I have used a simple list called Lstcomp to store data and then, I have used linq to query this data.
Company comp = Lstcmsomp.Where(x => x.CompanyId.Equals(CompId)).SingleOrDefault() as Company;
5) Data retrieved in step 4 is then formatted and is sent back to the main page
public string GetData()
{
Company comp = cd.GetCompanyData(CompanyID);
sb.Append("<table cellpadding='10' border=1>");
sb.Append("<tr><td>CompanyId</td><td>"+comp.CompanyId+"</td></tr>");
sb.Append("<tr><td>CompanyName</td><td>"+comp.CompanyName+"</td></tr>");
sb.Append("<tr><td>CEOName</td><td>"+comp.CEOName+"</td></tr>");
sb.Append("<tr><td>HeadQuarter</td><td>"+comp.HeadQuarter+"</td></tr>");
sb.Append("</table>");
return sb.ToString();
}
Note that the Html Formatted Data received from requested page will not be shown in the source code of your main page
Demo:
When the browser loads, output of the browser is as follows:
On selecting the company, request is made onto other page and the html output of that page is shown in our current page. Output of the browser is as follows:
Thus we have seen how to make an Ajax request to Show HTML content of other page onto the current page.
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Get Set Value of any HTML element using jquery-Val function
How to encode and decode HTML request in ASP.NET
Why and how to create RSS feeds in C#
Simple Ajax client server Example
Ways of implementing AJAX
How AJAX Works, advantages and disadvantages
Get Data of other page on current page
Change attributes of HTML elements at runtime
Tips and tricks with ajax calendar
Show Update Progress Animation-Ajax
Post Comment