Introduction
In this post, I explain how to Fetch and Show Data from XML file using Jquery.In this tutorial, I am going to create an asp.net application where I will fetch the data present in XML format and display fetched content on the web page using Jquery.
Steps :
Step - 1: Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add an XML file into Project.
Right Click on Solution Explorer > Add > New existing item > Select XML File > Add.Step-3: Add a Webpage and Design for fetch and show data using Jquery.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.Jquery Code
<script src="Scripts/jquery-1.7.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnGetData").click(function () {
$("#UpdatePanel").html("Please wait...");
$.ajax({
url: "/cd_catalog.xml",
type: "GET",
dataType: "xml",
success: OnSuccess,
error: OnError
});
});
});
function OnSuccess(xml) {
var tableContent = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>TITLE</th>" +
"<th>ARTIST</th>" +
"<th>COUNTRY</th>" +
"<th>COMPANY</th>" +
"<th>PRICE</th>" +
"<th>YEAR</th>" +
"</tr>";
$(xml).find('CD').each(function () {
tableContent += "<tr>" +
"<td>" + $(this).find('TITLE').text() + "</td>" +
"<td>" + $(this).find('ARTIST').text() + "</td>" +
"<td>" + $(this).find('COUNTRY').text() + "</td>" +
"<td>" + $(this).find('COMPANY').text() + "</td>" +
"<td>" + $(this).find('PRICE').text() + "</td>" +
"<td>" + $(this).find('YEAR').text() + "</td>" +
"</tr>";
});
tableContent += "</table>";
$("#UpdatePanel").html(tableContent);
}
function OnError(data) {
$("#UpdatePanel").html("Error! Please try again.");
}
</script>
HTML Code
<h3>Populate Data from XML file using Jquery</h3>
<input id="btnGetData" type="button" value="Populate Data from XML File" />
<div id="UpdatePanel" style="padding:20px 10px">
</div>
Step-4: Run Application.
Related Post:
