In this article I will explain with an example, how to read and display XML file data in WebGrid in ASP.Net MVC Razor.
The XML data will be read from an XML file and the fetched XML records will be displayed in WebGrid using Model class in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
XML File
The following is the XML file consisting of records of Customers. The XML file is saved with the name Customers.xml in a folder named XML inside the project folder.
<?xml version="1.0" standalone="yes"?>
<Customers>
  <Customer>
    <Id>1</Id>
    <Name>John Hammond</Name>
    <Country>United States</Country>
  </Customer>
  <Customer>
    <Id>2</Id>
    <Name>Mudassar Khan</Name>
    <Country>India</Country>
  </Customer>
  <Customer>
    <Id>3</Id>
    <Name>Suzanne Mathews</Name>
    <Country>France</Country>
  </Customer>
  <Customer>
    <Id>4</Id>
    <Name>Robert Schidner</Name>
    <Country>Russia</Country>
  </Customer>
</Customers>
 
 
Namespaces
You will need to import the following namespaces.
using System.Xml;
using System.Collections.Generic;
 
 
Model
Following is a Model class named CustomerModel with three properties i.e. CustomerId, Name and Country.
public class CustomerModel
{
    ///<summary>
    /// Gets or sets CustomerId.
    ///</summary>
    public int CustomerId { get; set; }
 
    ///<summary>
    /// Gets or sets Name.
    ///</summary>
    public string Name { get; set; }
 
    ///<summary>
    /// Gets or sets Country.
    ///</summary>
    public string Country { get; set; }
}
 
 
Controller
The Controller consists of one Action method.
Action method for handling GET operation
Inside the Index Action method, the XML file is read using the XmlDocument class object.
Then the Customer Node is selected using XPath query and a loop is executed over all the selected Nodes.
Inside the loop, the values are extracted from each Child Node and assigned to appropriate property of the Model class object and a Generic list collection of Model class objects is prepared.
Finally, the Generic list collection of Model class objects is returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<CustomerModel> customers = new List<CustomerModel>();
 
        //Load the XML file in XmlDocument.
        XmlDocument doc = new XmlDocument();
        doc.Load(Server.MapPath("~/XML/Customers.xml"));
 
        //Loop through the selected Nodes.
        foreach (XmlNode node in doc.SelectNodes("/Customers/Customer"))
        {
            //Fetch the Node values and assign it to Model.
            customers.Add(new CustomerModel
            {
                CustomerId = int.Parse(node["Id"].InnerText),
                Name = node["Name"].InnerText,
                Country = node["Country"].InnerText
            });
        }
 
        return View(customers);
    }
}
 
 
View
Inside the View, in the very first line the CustomerModel class is declared as IEnumerable which specifies that the Model will be available as a Collection.
The WebGrid is initialized with the Model i.e. IEnumerable collection of CustomerModel class objects as source.
Note: For more information on usage of WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
@using WebGrid_Xml_MVC.Models;
@model IEnumerable<CustomerModel>
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @webGrid.GetHtml(
    htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
    columns: webGrid.Columns(
                webGrid.Column("CustomerId", "CustomerId"),
                webGrid.Column("Name", "Name"),
                webGrid.Column("Country", "Country")))
</body>
</html>
 
 
Screenshot
Display XML File data in WebGrid in ASP.Net MVC
 
 
Downloads
Download Code