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" %>
  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>
  25. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
  27. <script type="text/javascript">
  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. });
  51. </script>
  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