In this article I will explain with an example, how to populate (bind) WebGrid using JSON data from URL in ASP.Net MVC.
In this article, the JSON file will be downloaded from the URL using WebClient class and then WebGrid will be populated.
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
The following Model Class consists of three properties.
public class CustomerModel
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
 
Namespaces
You need to import the following namespace.
using Newtonsoft.Json;
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, the JSON string is downloaded from the URL using DownloadString method and converted to the Generic List collection of CustomerModel class object using JSON.Net library.
Finally, the Generic List collection of CustomerModel object is returned to the view.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        ServicePointManager.Expect100Continue = true;
        ServicePointManager.SecurityProtocol = (SecurityProtocolType)3072;
        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
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.
Then, 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.
Note: If the columns are not specified then WebGrid will display all columns supplied by its source. It is very similar to the AutoGenerateColumns feature of the ASP.Net GridView.
 
@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>
 
 
Screenshot
Populate (Bind) WebGrid using JSON data from URL in ASP.Net MVC
 
 
Downloads
Download Code