In this article I am going to explain how we can read a
xml file using jQuery in asp.net c#.
Below is my xml file:
Image 1.
Below is my jQuery and aspx code:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Read a XML using jQuery</title>
<style>
.html, body
{
font-family:
Verdana;
font-size:
12px;
background:
Skyblue;
}
#dvContent label
{
padding:
2px 10px;
text-align:
left;
width:
120px;
display:
block;
float:
left;
border:
1px solid Red;
}
</style>
<script
type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
$('#dvContent').append("<p><label><strong>Employee
ID</strong></label><label><strong>Name</strong></label><label><strong>Joining
Date</strong></label><label><strong>Company Name</strong></label>
<label><strong>Address</strong></label></p><br/>");
$.ajax({
type: "GET",
url: "EmployeeData.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Employees').each(function()
{
$('#dvContent').append("<p><label>"
+
$(this).find('EmployeeID').text() + "</label><label>"
+
$(this).find('Name').text() + "</label><label>"
+
$(this).find('JoiningDate').text() + "</label><label>"
+
$(this).find('CompanyName').text() + "</label><label>"
+
$(this).find('Address').text() + "</label></p><br/>");
});
},
error: function()
{
alert("Error occurred in Reading XML.");
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<span
style="font-size: 16pt; text-align: center; width: 100%">Read
XML using jQuery</span></div>
<div
id="dvContent">
</div>
</form>
</body>
</html>
Now Run the application:
Image 2.