JQuery Read a XML File

Rahul Saxena
10y
8.1k
0
1
25
Blog

ReadXMLUsing jQuery.zip

In this blog, 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 occured 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>