In this article I will explain with an example, how to populate (bind) WebGrid using JSON data from URL in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

JSON File URL

The following API will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json
The API returns the following JSON.
[
  {
    "CustomerId": 1,
    "Name": "John Hammond",
    "Country": "United States"
  },
  {
    "CustomerId": 2,
    "Name": "Mudassar Khan",
    "Country": "India"
  },
  {
    "CustomerId": 3,
    "Name": "Suzanne Mathews",
    "Country": "France"
  },
  {
    "CustomerId": 4,
    "Name": "Robert Schidner",
    "Country": "Russia"
  }
]
 
 

Model

The Model class consists of following properties.
public class CustomerModel
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
 

Namespaces

You will need to import the following namespaces.
using System.Net;
using Newtonsoft.Json;
 
 

Controller

The Controller consists of following Action method.

Action method for handling GET operation

Inside this Action method, first the Security Protocol is set.
Then, the JSON string is downloaded from the URL using DownloadString method of WebClient class.

DownloadString method

It accepts the following parameter:
address – The URL of the file to be downloaded.
 
Then, the JSON string is converted into a Generic List collection of CustomerModel class object using DeserializeObject method of JsonConvert class.
Finally, the Generic List collection of CustomerModel class object is returned to the view.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        //Setting TLS 1.2 protocol.
        ServicePointManager.Expect100Continue = true;
        ServicePointManager.SecurityProtocol = (SecurityProtocolType)3072;
 
        // Fetch the JSON string from URL.
        string json = new WebClient().DownloadString("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json");
 
        List<CustomerModel> customers = JsonConvert.DeserializeObject<List<CustomerModel>>(json);
        return View(customers);
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line CustomerModel is declared as Model for the View.
The WebGrid is initialized with the Model i.e. IEnumerable collection of CustomerModel class objects as source.
Note: For more details on how to use WebGrid in ASP.Net MVC, please refer my article WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
@model IEnumerable<WebGrid_JSON_URL_MVC.Models.CustomerModel>
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model);
}
 
<!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; border:1px solid #ccc; }
    .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 JSON data from URL
 
 

Downloads

Download Code