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 (10) -

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

cctv
cctv United States
1/7/2015 3:15:40 AM #

thanks!

Kendrick
Kendrick United States
3/13/2015 10:52:58 PM #

<b>Video Game Tester Jobs- Sound Good? </b> <a href="f60734xas-k-cof2tbofyr82m9.hop.clickbank.net/; target="_top">Get Paid To Play Video Games!</a>

Markita
Markita United States
3/14/2015 12:09:09 AM #

Hi, You don�t know me but I want to share my weight loss method with you <a href="c75c5wpls-gxambzacngn7ldf3.hop.clickbank.net/; target="_top">Click to read more..</a>

Farookh Mansuri
Farookh Mansuri India
5/11/2015 8:21:03 PM #

nice article....

Carrol Bowlet
Carrol Bowlet United States
6/28/2015 12:07:39 PM #

Outstanding post but I was wanting to know if you could write a litte more on this subject? I'd be very grateful if you could elaborate a little bit further. Thank you!|

Weston Tecchio
Weston Tecchio United States
6/30/2015 2:06:33 PM #

I have been surfing online more than 4 hours today, yet I never found any interesting article like yours. It's pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the web will be a lot more useful than ever before.|

Romana Squibb
Romana Squibb United States
7/10/2015 10:02:45 AM #

Tailor your controls.

Mario Elsen
Mario Elsen United States
7/13/2015 2:39:25 AM #

It's a pity you don't have a donate button! I'd most certainly donate to this brilliant blog! I guess for now i'll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this website with my Facebook group. Chat soon!|

Kenna Wheelwright
Kenna Wheelwright United States
7/20/2015 11:07:25 AM #

diet plan for weight loss and muscle gain
diet plan for weight loss and muscle gain United States
7/21/2015 8:09:19 AM #

hi!,I love your writing very so much! percentage we communicate more about your post on AOL? I require an expert in this house to solve my problem. May be that is you! Taking a look ahead to see you. |

agua bentita santa fe
agua bentita santa fe United States
7/26/2015 4:59:02 PM #

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5