Load json data from any Web API and use LINQ to JSON to read and

display on grid using MVC

Understanding the Key Concepts

1. Web API
A Web API is an application programming interface for the web that provides endpoints for clients to
interact with, often delivering JSON data. For this example, we'll use a public API:
[Link]

2. JSON
JSON (JavaScript Object Notation) is a lightweight data format used for data interchange. It's easy to
read and write for humans and easy to parse and generate for machines.

3. LINQ
Language Integrated Query (LINQ) in C# allows querying objects, databases, XML, or JSON. It provides a
way to filter, select, and transform data in a readable and maintainable way.

4. Three-Step Approach

• Fetch JSON Data from the Web API.

• Parse and Query JSON using LINQ.
• Bind Data to a GridView for display.

Implementation in [Link] Core

Step 1: Create a New [Link] Core Project

1. Open Visual Studio and select File > New > Project.
2. Choose the [Link] Core Web Application template.
3. Select Web Application (Model-View-Controller).
4. Name your project and click Create.

Step 2: Fetch JSON Data

Use HttpClient to fetch JSON data from the Web API.

Code: [Link]
This service will handle HTTP requests to the Web API.

using [Link];
using [Link];

namespace [Link]
{
public class ApiService
{
private readonly HttpClient _httpClient;

public ApiService(HttpClient httpClient)

{
_httpClient = httpClient;
}

public async Task<string> GetJsonDataAsync(string url)

{
var response = await _httpClient.GetAsync(url);
if ([Link])
{
return await [Link]();
}
throw new HttpRequestException("Failed to fetch data from the API.");
}
}
}
Step 3: Process and Query JSON Data Using LINQ
Use [Link] to parse and query JSON data.

Code: [Link]
This class parses JSON and queries it using LINQ.

using [Link];
using [Link];
using [Link];

namespace [Link]
{
public static class JsonProcessor
{
public static List<dynamic> ProcessJson(string jsonData)
{
var jsonDocument = [Link](jsonData);
var jsonArray = [Link]();

return jsonArray
.Select(item => new
{
Id = [Link]("id").GetInt32(),
Title = [Link]("title").GetString(),
Body = [Link]("body").GetString()
})
.Cast<dynamic>()
.ToList();
}
}
}

Step 4: Display Data in a Razor View

Controller
Create a controller to fetch and pass data to the view.

using [Link];
using [Link];
using [Link];

namespace [Link]
{
public class DataController : Controller
{
private readonly ApiService _apiService;

public DataController(ApiService apiService)

{
_apiService = apiService;
}

public async Task<IActionResult> Index()

{
string apiUrl = "[Link]
string jsonData = await _apiService.GetJsonDataAsync(apiUrl);
var processedData = [Link](jsonData);

return View(processedData);
}
}
}

Razor View
Create a Razor View [Link] to display the data in a table.

html
@model List<dynamic>

<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
 <tr>
<td>@[Link]</td>
<td>@[Link]</td>
<td>@[Link]</td>
</tr>
}
</tbody>
</table>

Implementation in [Link] Web Forms

Step 1: Fetch JSON Data Using HttpClient
Code: [Link]
Use HttpClient to fetch JSON data.

using System;
using [Link];
using [Link];

namespace [Link]
{
public static class ApiHelper
{
public static async Task<string> FetchJsonDataAsync(string apiUrl)
{
using (HttpClient client = new HttpClient())
{
var response = await [Link](apiUrl);
if ([Link])
{
return await [Link]();
}
throw new Exception("Error fetching JSON data.");
}
}
}
}
Step 2: Parse JSON Data Using LINQ
Code: [Link]
Process JSON using [Link].

using [Link];
using [Link];

namespace [Link]
{
public static class JsonProcessor
{
public static List<dynamic> ProcessJson(string jsonData)
 {
var jsonArray = [Link](jsonData);

return jsonArray
.Select(item => new
{
Id = (int)item["id"],
Title = (string)item["title"],
Body = (string)item["body"]
})
.Cast<dynamic>()
.ToList();
}
}
}

Step 3: Display Data in GridView

ASPX Markup
html

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" />

Code-Behind
Fetch, process, and bind JSON data to GridView.

using System;

using [Link];

using [Link];

public partial class DisplayData : [Link]

{

protected async void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)
{

string apiUrl = "[Link]

string jsonData = await [Link](apiUrl);

var processedData = [Link](jsonData);

 [Link] = processedData;

[Link]();

Sample JSON API

The API [Link] provides:
json
[
{ "id": 1, "title": "Title 1", "body": "Body 1" },
{ "id": 2, "title": "Title 2", "body": "Body 2" }
]
Load json data from any Web API and use LINQ to JSON to read and
display on grid using [Link] Web Forms

1. Setup the [Link] Web Forms Project

1. Create a new [Link] Web Forms project in Visual Studio.
2. Add a new Web Form (e.g., [Link]).

2. Fetch JSON Data Using HttpClient

You can use HttpClient to fetch the JSON data from the Web API.

Code: [Link]
Add a helper class to fetch JSON data.

using System;
using [Link];
using [Link];

namespace [Link]
{
public static class ApiHelper
{
public static async Task<string> FetchJsonDataAsync(string apiUrl)
{
using (HttpClient client = new HttpClient())
{
HttpResponseMessage response = await [Link](apiUrl);
if ([Link])
{
return await [Link]();
}
throw new Exception("Error fetching JSON data.");
}
}
}
}
3. Parse and Process JSON Using LINQ
Use [Link] or [Link] for parsing JSON. For simplicity, we'll use
[Link].

Code: [Link]
Add a helper class to parse JSON and process it using LINQ.

using [Link];
using [Link];

namespace [Link]
{
public static class JsonProcessor
 {
public static List<dynamic> ProcessJson(string jsonData)
{
var jsonArray = [Link](jsonData);

return jsonArray
.Select(item => new
{
Id = (int)item["id"],
Title = (string)item["title"],
Body = (string)item["body"]
})
.Cast<dynamic>()
.ToList();
}
}
}
4. Create the User Interface (GridView)
In the [Link] file, add a GridView control.

Markup: [Link]
html
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="[Link]" Inherits="[Link]" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Display Data</title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" />
</form>
</body>
</html>

5. Fetch and Bind Data in Code-Behind

In the [Link] file, fetch the JSON data, process it using LINQ, and bind it to the
GridView.

Code-Behind: [Link]
csharp
using System;
using [Link];
using [Link];

public partial class DisplayData : [Link]

{
 protected async void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
try
{
// Define the Web API endpoint
string apiUrl = "[Link]

// Fetch JSON data

string jsonData = await [Link](apiUrl);

// Process JSON data using LINQ

var processedData = [Link](jsonData);

// Bind data to GridView

[Link] = processedData;
[Link]();
}
catch (Exception ex)
{
// Handle errors (e.g., display a message to the user)
[Link]($"<script>alert('Error: {[Link]}');</script>");
}
}
}
}

Example JSON Data

For the API [Link] the JSON response looks like

this:

json

[
{ "id": 1, "title": "Title 1", "body": "Body 1" },
{ "id": 2, "title": "Title 2", "body": "Body 2" },
{ "id": 3, "title": "Title 3", "body": "Body 3" }
]