Parse/Read XML Having Nested Nodes To Display As A List In ASP.NET MVC

Overview

In this article, we will learn how to parse XML having nested nodes in C#. This will help in a situation where the Server is returning XML as its response.

In this application, I am using an XML file that is saved on a local machine. This application reads the XML file and then associates the XML node values to the model which will display as a list. In real time, if the Server returns XML string as a response, we can directly parse the XML string instead of saving it in a file to read.

Below is the XML that is used in this application.

(userlist.xml) 

<?xml version="1.0"?>
<Users>
    <user>
        <id>1</id>
        <name>Emma watson</name>
        <gender>Male</gender>
        <mobile>4557841155</mobile>
        <address>
            <streetname>Street1</streetname>
            <city>Pune</city>
            <pin>400043</pin>
        </address>
    </user>
    <user>
        <id>2</id>
        <name>Fred ordan</name>
        <gender>Female</gender>
        <mobile>4557841155</mobile>
        <address>
            <streetname>Street2</streetname>
            <city>Mumbai</city>
            <pin>400041</pin>
        </address>
    </user>
    <user>
        <id>3</id>
        <name>John Cena</name>
        <gender>Male</gender>
        <mobile>4557841155</mobile>
        <address>
            <streetname>Street3</streetname>
            <city>Pune</city>
            <pin>400045</pin>
        </address>
    </user>
    <user>
        <id>4</id>
        <name>Wilson ordan</name>
        <gender>Male</gender>
        <mobile>4557841155</mobile>
        <address>
            <streetname>Street4</streetname>
            <city>Pune</city>
            <pin>400043</pin>
        </address>
    </user>
    <user>
        <id>5</id>
        <name>Robort John</name>
        <gender>Male</gender>
        <mobile>4557841155</mobile>
        <address>
            <streetname>Street5</streetname>
            <city>Pune</city>
            <pin>400042</pin>
        </address>
    </user>
</Users>

Step 1

Create an MVC web application.

Step 2

Create UsersModel and UsersController in "Models" and "Controllers" folders respectively.

Step 3

Define properties for “UsersModel” as shown below.

namespace Xml_MVC.Models
{
    public class UsersModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Mobile { get; set; }
        public string StreetName { get; set; }
        public string City { get; set; }
        public string Pin { get; set; }
    }
}

Step 4

Create a ListView for user list.

Go to UsersController -> right click on Index() action -> select "Add View".

 In Add View window, keep the View name as Index, select template of List type, select the model class UsersModel, and click "Add".

You will see a View page with the following code.

@model IEnumerable<Xml_MVC.Models.UsersModel>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Mobile)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StreetName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.City)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Pin)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Mobile)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StreetName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.City)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Pin)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
</table>

* Don’t run the View now, as there is no data in the Model  and it will return an error.

Step 5

As said earlier, we are parsing the XML which is saved on local machine, so we need an upload control in the View to upload the XML file. Let’s go for it. 

@using (Html.BeginForm("Upload", "Users", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="upload_file">
        <input type="file" id="fileUpload" name="fileUpload" style="float:left" /><input type="submit" value="Get User List" />
    </div>
}

The file upload control has to be added inside HTML Form helper as we are performing a post action on file upload.

enctype = "multipart/form-data" - This is an encoding type that allows files to be sent through a POST request. Without this encoding, the files cannot be sent through POST. The enctype attribute specifies how the form-data should be encoded when submitting it to the Server.

As we are using the same View for file upload and display user list, let’s set a flag called @ViewBag.ShowList to show/hide the user list. Here, we are not performing any CRUD operations on the list. I am going to remove the unwanted code from the View.

Below is the final User List View code.

@model IEnumerable<Xml_MVC.Models.UsersModel>
@{
    ViewBag.Title = "User List";
}
<h2>Display User List</h2>
@using (Html.BeginForm("Upload", "Users", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="upload_file">
        <input type="file" id="fileUpload" name="fileUpload" style="float:left" /><input type="submit" value="Get User List" />
    </div>
    if (@ViewBag.ShowList)
    {
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Gender)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Mobile)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.StreetName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.City)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Pin)
                </th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Gender)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Mobile)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.StreetName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.City)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Pin)
                    </td>
                </tr>
            }
        </table>
    }

Step 6

Now, let's come to the actual implementation of UsersController. Create an action method called Upload() of request type POST.

1. Make sure to include the below namespaces.
   

   using System.Xml;
   using Xml_MVC.Models; (Xml_MVC - > project where the models are present)

2. Create a list type Model Oobject and go for parsing as below.
   

   List<UsersModel> userList = new List<UsersModel>();
               var file = Request.Files[0];
               if (file != null && file.ContentLength > 0)
               {
                   XmlDocument xmldoc = new XmlDocument();
                   xmldoc.Load(file.InputStream);
                   UsersModel user;
                   XmlNodeList usernodes = xmldoc.SelectNodes("Users/user");
                   foreach (XmlNode usr in usernodes)
                   {
                       user = new UsersModel();
                       user.Id = Convert.ToInt32(usr["id"].InnerText);
                       user.Name = usr["name"].InnerText;
                       user.Gender = usr["gender"].InnerText;
                       user.Mobile = usr["mobile"].InnerText;
                       XmlNodeList addrNodes = usr.SelectNodes("address");
                       foreach (XmlNode addrn in addrNodes)
                       {
                           user.StreetName = addrn["streetname"].InnerText;
                           user.City = addrn["city"].InnerText;
                           user.Pin = addrn["pin"].InnerText;
                       }
                       userList.Add(user);
                   }
                   TempData["userData"] = userList;
               }
               return RedirectToAction("Index");

3. XmlDocument - It represents an XML document which can be used to load, validate, edit, and add XML in a document.
   

   XmlNodeList - It represents an ordered collection of nodes and can retrieve a node at the given index.

   XmlNode - It represents a single node in the XML document and can access the attributes of the node.

   TempData["userData"] - It is used to save the user object which can be accessed in the Index() action method to display user list.

4. Go to the Index() action and add the below code.
   

   public ActionResult Index()
           {
               if (TempData["userData"] == null)
               {
                   ViewBag.ShowList = false;
                   return View();
               }
               else
               {
                   List<UsersModel> lst = (List<UsersModel>)TempData["userData"];
                   ViewBag.ShowList = true;
                   return View(lst);
               }
           }

Step 7

Below is the full code of UsersController.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Xml;
using Xml_MVC.Models;

namespace Xml_MVC.Controllers
{
    public class UsersController : Controller
    {
        // GET: Users
        public ActionResult Index()
        {
            if (TempData["userData"] == null)
            {
                ViewBag.ShowList = false;
                return View();
            }
            else
            {
                List<UsersModel> lst = (List<UsersModel>)TempData["userData"];
                ViewBag.ShowList = true;
                return View(lst);
            }
        }
        [HttpPost]
        public ActionResult Upload()
        {
            try
            {
                List<UsersModel> userList = new List<UsersModel>();
                var file = Request.Files[0];
                if (file != null && file.ContentLength > 0)
                {
                    XmlDocument xmldoc = new XmlDocument();
                    xmldoc.Load(file.InputStream);
                    UsersModel user;
                    XmlNodeList usernodes = xmldoc.SelectNodes("Users/user");
                    foreach (XmlNode usr in usernodes)
                    {
                        user = new UsersModel();
                        user.Id = Convert.ToInt32(usr["id"].InnerText);
                        user.Name = usr["name"].InnerText;
                        user.Gender = usr["gender"].InnerText;
                        user.Mobile = usr["mobile"].InnerText;
                        XmlNodeList addrNodes = usr.SelectNodes("address");
                        foreach (XmlNode addrn in addrNodes)
                        {
                            user.StreetName = addrn["streetname"].InnerText;
                            user.City = addrn["city"].InnerText;
                            user.Pin = addrn["pin"].InnerText;
                        }
                        userList.Add(user);
                    }
                    TempData["userData"] = userList;
                }
                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                var error = ex;
                throw;
            }
        }
    }
}

Step 8

Run the project and go for the Users View.

Step 9

Choose the file from computer and click on "Get User List" button.


Step 10

Below is the user list table extracted from userlist.xml file.