Dotnetplace.com

.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here

Advertise

Loading...


Posted by Aamir Hasan   on Tuesday, October 11, 2011 Total Views:  

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"> &nbsp;</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

Tags: , ,
Category: All | ASP.NET | jQuery
Protected by Copyscape Online Plagiarism Tool

Comments (2) -

john
john United States
10/16/2011 3:40:52 AM #

Grt work

asdfads
asdfads United States
1/24/2012 4:30:38 PM #

asdfasdf

y
y United States
4/30/2012 10:18:31 AM #

adfasdf

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5