Post
Ask Question

JQuery Read a XML File

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:

xml file
                                                                   Image 1

Below is my jQuery and aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Read a XML using jQuery</title>  
  7.     <style>  
  8.         .html, body  
  9.         {  
  10.             font-family: Verdana;  
  11.             font-size: 12px;  
  12.             background: Skyblue;  
  13.         }  
  14.         #dvContent label  
  15.         {  
  16.             padding: 2px 10px;  
  17.             text-align: left;  
  18.             width: 120px;  
  19.             display: block;  
  20.             float: left;  
  21.             border: 1px solid Red;  
  22.         }  
  23.     </style>  
  24.   
  25.     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>  
  26.   
  27.     <script type="text/javascript">  
  28.   
  29.         $(document).ready(function() {  
  30.             $('#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/>");  
  31.             $.ajax({  
  32.                 type: "GET",  
  33.                 url: "EmployeeData.xml",  
  34.                 dataType: "xml",  
  35.                 success: function(xml) {  
  36.                     $(xml).find('Employees').each(function() {  
  37.                         $('#dvContent').append("<p><label>" +  
  38.                     $(this).find('EmployeeID').text() + "</label><label>" +  
  39.                     $(this).find('Name').text() + "</label><label>" +  
  40.                     $(this).find('JoiningDate').text() + "</label><label>" +  
  41.                     $(this).find('CompanyName').text() + "</label><label>" +  
  42.                     $(this).find('Address').text() + "</label></p><br/>");  
  43.                     });  
  44.                 },  
  45.                 error: function() {  
  46.                     alert("Error occured in Reading XML.");  
  47.                 }  
  48.             });  
  49.         });  
  50.                
  51.     </script>  
  52.   
  53. </head>  
  54. <body>  
  55.     <form id="form1" runat="server">  
  56.     <div>  
  57.         <span style="font-size: 16pt; text-align: center; width: 100%">Read XML using jQuery</span></div>  
  58.     <div id="dvContent">  
  59.     </div>  
  60.     </form>  
  61. </body>  
  62. </html>  
Now Run the application:

read xml using Jquery
                                                                        Image 2