Read XML file using jQuery in MVC3 Razor

In this article we will see how to read xml file using jQuery in MVC3 Razor.
We have explained two examples:

• Creating table rows from XML nodes.
• Populating dropdown using jQuery from XML.

We have used ASP.NET MVC 3 Razor as platform. 

We have added two xml files to the solution, one for each example. We have use jQuery's ajax method to get the file from the location. The nodes from the xml is read using jQuery.

 Create table nodes from XML nodes:

HTML

<table id="target" border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>City</th>
</tr>
</table>

<input type="button" value="Click" id="readXML" />
    

We have created a table element with headers defined for table and one button. On click of button the XML file is read and table td's are prepared and appended to the table.

jQuery

    <script type="text/javascript">
        $(document).ready(function () {
            $("#readXML").click(function () {
                $.ajax({
                    url: '../../Content/XML/Employee.xml',    // name of file with our data
                    dataType: 'xml',    // type of file we will be reading
                    success: parseXML,     // name of function to call when done reading file
                    error: loadfail     // name of function to call when failed to read
                });
            });
        });

        function parseXML(document) {
            $(document).find("Employee").each(function () {
                var tr = "<tr><td>" + $(this).find("Id").text() + "</td><td>" + $(this).find("Name").text() + "</td>" + "<td>" + $(this).find("City").text() + "</td></tr>";
                $("#target").append(tr);
            });
        function loadfail()
        {
        }
        }
</script>
    

We have used ajax post to read the XML file and then the XML file is read to create table data. On success of ajax post parseXML method is called which accepts the document parameter which is used to access the nodes of XML file.

XML

        <?xml version="1.0" encoding="utf-8" ?>
        <Employees>
          <Employee>
            <Id>1</Id>
            <Name>Cesc Fabregas</Name>
            <City>Barcelona</City>
          </Employee>
          <Employee>
            <Id>2</Id>
            <Name>Thierry Henry</Name>
            <City>Los Angeles</City>
          </Employee>
          <Employee>
            <Id>3</Id>
            <Name>Mesut Ozil</Name>
            <City>London</City>
          </Employee>
        </Employees>
    

We have used the above XML file.

Snapshots:
Before click

After click

Populating dropdown from XML:

HTML:

        <select id="target"></select>
        <input type="button" value="Click" id="readXML" />
    

The HTML has a simple select element which renders empty dropdown list and a button, on click of this button we will read the xml and populate the dropdown list.

jQuery:

        <script type="text/javascript">
            $(document).ready(function () {
                $("#readXML").click(function () {
                    $.ajax({
                        url: '../../Content/XML/Dropdown.xml',    // name of file with our data
                        dataType: 'xml',    // type of file we will be reading
                        success: parseXML,     // name of function to call when done reading file
                        error: loadfail     // name of function to call when failed to read
                    });
                });
            });

            function parseXML(document) {
                $(document).find("player").each(function () {
                    var optionLabel = $(this).find('text').text();
                    var optionValue = $(this).find('value').text();
                    $("#target").append(
    '<option value="' + optionValue + '">' + optionLabel + '</option>'
     );
                });
            }

            function loadfail() {
            }
</script>
    

Using jQuery, on button click we read the xml file. We have used jQuery ajax post to read the xml file. The xml nodes are read on success of ajax post and read data is appended to the dropdown list.

XML:

        <?xml version="1.0" encoding="utf-8" ?>
        <Players>
          <player>
            <value>1</value>
            <text>Thierry Henry</text>
          </player>
          <player>
            <value>2</value>
            <text>Cesc Fabregas</text>
          </player>
          <player>
            <value>3</value>
            <text>Jack Wilshere</text>
          </player>
          <player>
            <value>4</value>
            <text>Mesut Ozil</text>
          </player>
          <player>
            <value>5</value>
            <text>Santi Cazorla</text>
          </player>
          <player>
            <value>6</value>
            <text>Tomas Rocisky</text>
          </player>
        </Players>
    

Snapshots:

Before click

After click