In this article I will explain with an example, how to populate (bind) WebGrid using XML from URL in ASP.Net MVC.
The XML file will be downloaded from the URL using WebClient class and then WebGrid will be populated.
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 XML file will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.xml
<?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.IO;
using System.Net;
using System.Data;
 
 

Controller

The Controller consists of the following Action method.

Action method for handling GET operation

Inside this Action method, first the Security Protocol is set.
Note: For previous .Net Framework versions, please refer Using TLS1.2 in .Net 2.0, .Net 3.0, .Net 3.5 and .Net 4.0.
 
Next, the XML string is downloaded from URL using DownloadString method of the WebClient class.
 

DownloadString method

It accepts the following parameter:
address – The URL of the file to be downloaded.
Next, the DataSet class object is initialized and the XML string is read using StringReader class.
Then, the read XML string is stored in the DataSet using ReadXML method.
Finally, the DataSet is returned to the view.
Note: Though it is not a good practice to use DataSet or DataTable as Model in View in MVC architecture, thus user’s please make a note that this is just an informative article and does not recommend to use DataSet or DataTable as Model in View in ASP.Net MVC.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        ServicePointManager.Expect100Continue = true;
        ServicePointManager.SecurityProtocol = (SecurityProtocolType)3072;
        string xml = new WebClient().DownloadString("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.xml");
        using (DataSet ds = new DataSet())
        {
            using (StringReader sr = new StringReader(xml))
            {
                ds.ReadXml(sr);
            }
            return View(ds);
        }
    }
}
 
 

View

HTML Markup

Inside the View, the System.Data and System.Linq namespaces are inherited along with the DataSet which is declared as Model for the View.
The WebGrid is initialized with the Dynamic Anonymous Type collection by making use of LINQ i.e. the records from the DataTable are converted into Dynamic Anonymous Type collection and are assigned to the WebGrid.
The WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in WebGrid and also allows to set specific Header Text for the columns.
@using System.Data
@using System.Linq
 
@model DataSet
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: (from p in Model.Tables[0].AsEnumerable()
                                           select new
                                           {
                                               CustomerId = p.Field<string>("CustomerId"),
                                               Name = p.Field<string>("Name"),
                                               Country = p.Field<string>("Country")
                                           }));
}
 
<!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", "Customer Id"),
                webGrid.Column("Name", "Name"),
                webGrid.Column("Country", "Country")))
</body>
</html>
 
 

CSS Class

The following CSS classes are used to styling the WebGrid.
<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .Grid { border: 1px solid #ccc; border-collapse: collapse; }
    .Grid th { background-color: #F7F7F7; font-weight: bold; }
    .Grid th, .Grid td { padding: 5px;: 1px 1px solid }
    .Grid, .Grid table td { border: 0px solid #ccc; }
    .Grid th a, .Grid th a:visited { color: #333; }
</style>
 
 

Screenshot

ASP.Net MVC: Populate (Bind) WebGrid using XML from URL
 
 

Downloads

Download Code