This article demonstrates how to read data from xml file with jquery in asp.net. I have used jQuery.get method of jquery to read xml file. JQuery.get method load data from server. JQuery.get method takes url, data, success and datatype parameters.
Syntax
jQuery.get (url, [data,] [success (data, textStatus, jqXHR),] [dataType])
Let’s start.
Step 1: Firstly, I have created a Patient.xml file, which contains xml node named patient, each patient data consist of id, name and data attributes.
<?xmlversion="1.0"encoding="utf-8" ?>
<Patients>
<patient>
<ID>1</ID>
<Name>Aamir</Name>
<Gender>25</Gender>
</patient>
<patient>
<ID>2</ID>
<Name>Hasan</Name>
<Gender>21</Gender>
</patient>
<patient>
<ID>3</ID>
<Name>Awais</Name>
<Gender>21</Gender>
</patient>
<patient>
<ID>4</ID>
<Name>john</Name>
<Gender>55</Gender>
</patient>
<patient>
<ID>5</ID>
<Name>Bill Gate</Name>
<Gender>66</Gender>
</patient>
</Patients>
Step 2: I have added Microsoft cdn jquery and jquery Block UI plugin references.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38"></script>
Step 3: document.ready function will not be excuted until the DOM will not be ready.
$(function () {
// your code
});
Step 4: Inside document.ready, I have sent request to read xml file, xml data will return. Now, we will use find method to match the text through each loop and append into div called msg. Before $.get method sent request to server, we will locked the screen to perform any activity on the page through $.blockUI() method after data will be returned from server we will unlocked the page through $.unblockUI() method.
$(function () {
$.blockUI();
$.get('Patient.xml', function (data) {
$('#msg').append("<p><label><strong>Id</strong></label>
<label><strong>Name</strong></label>
<label><strong>Gender</strong></label></p>");
$(data).find('patient').each(function () {
$('#msg').append("<p><label>" +
$(this).find('ID').text() + "</label><label>" +
$(this).find('Name').text() + "</label><label>" +
$(this).find('Gender').text() + "</label></p>");
});
});
$.unblockUI();
});
Step 5: I have added div tag inside form tag to print content.
<div id="msg"> </div>
Note: You cannot make cross-domain request.
Here’s is the full code of your page.
<head runat="server">
<title> Read data from xml file with jquery in asp.net</title>
<style>
.html, body
{
font-family: Verdana;
font-size: 12px;
}
#msg
{
position: relative;
width: 400px;
}
#msg p
{
padding: 5px 0;
margin: 0;
}
#msg label
{
padding: 2px 10px;
text-align: left;
width: 100px;
display: block;
float: left;
border-bottom: 1px solid #f5f5f5;
}
#msg p label
{
white-space: normal;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38"></script>
<script type="text/javascript">
$(function () {
$.blockUI();
$.get('Patient.xml', function (data) {
$('#msg').append("<p><label><strong>Id</strong></label>
<label><strong>Name</strong></label>
<label><strong>Gender</strong></label></p>");
$(data).find('patient').each(function () {
$('#msg').append("<p><label>" +
$(this).find('ID').text() + "</label><label>" +
$(this).find('Name').text() + "</label><label>" +
$(this).find('Gender').text() + "</label></p>");
});
});
$.unblockUI();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="msg">
<div class="clear">
</div>
</div>
</form>
</body>
</html>
I have used firebug tool in firefox browser to see returned xml data request from server as shown below.
Output
Download
Read-data-from-xml-file-with-jquery.rar (1.27 kb)
Click here to see live demo