Developing Single Page Applications using ASP.Net Core - Display Data

Screenshot from the tutorial

Developing Single Page Applications using ASP.Net Core: Display Data

In today’s fast-paced digital world, Single Page Applications (SPAs) have become a popular trend due to their ability to provide a smooth user experience. This blog post will guide you through the process of developing an SPA using ASP.Net Core, with a focus on displaying data effectively.

What is a Single Page Application?

A Single Page Application is a web application that loads a single HTML page and dynamically updates that page as the user interacts with the app. This approach results in faster navigation and a more fluid user experience, as it minimizes the need for full-page reloads.

Why Choose ASP.Net Core for SPAs?

ASP.Net Core is a powerful framework for building modern web applications. Here are a few reasons to choose it for developing SPAs:

• Cross-Platform: ASP.Net Core runs on Windows, macOS, and Linux.
• Performance: It is lightweight and designed for high-performance applications.
• Easy Integration with JavaScript Frameworks: ASP.Net Core works seamlessly with popular JavaScript frameworks such as React, Angular, and Vue.js.

Setting Up Your ASP.Net Core SPA

Prerequisites

Before we dive into the code, ensure you have the following installed on your machine:

• .NET SDK
• A code editor (Visual Studio, Visual Studio Code, or similar)

Step 1: Create a New ASP.Net Core Project

Open your terminal and run the following command to create a new ASP.Net Core project:

dotnet new webapp -n MySinglePageApp

This command creates a new web application named MySinglePageApp.

Step 2: Navigate to Your Project Directory

Change your directory to the newly created project:

cd MySinglePageApp

Step 3: Add a Data Model

To display data, you first need a model. Create a new folder named Models and add a class called Item.cs:

using System;

namespace MySinglePageApp.Models
{
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }
}

Step 4: Create a Sample Data Repository

Next, create a sample data repository to simulate data fetching. In the Models folder, add a class named ItemRepository.cs:

using System.Collections.Generic;
using System.Linq;

namespace MySinglePageApp.Models
{
    public class ItemRepository
    {
        private List<Item> items = new List<Item>
        {
            new Item { Id = 1, Name = "Item 1", Description = "Description for Item 1" },
            new Item { Id = 2, Name = "Item 2", Description = "Description for Item 2" },
            new Item { Id = 3, Name = "Item 3", Description = "Description for Item 3" }
        };

        public IEnumerable<Item> GetAllItems()
        {
            return items;
        }
    }
}

Step 5: Add a Controller

Create a new folder named Controllers, then add a controller called ItemsController.cs:

using Microsoft.AspNetCore.Mvc;
using MySinglePageApp.Models;

namespace MySinglePageApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ItemsController : ControllerBase
    {
        private readonly ItemRepository _repository;

        public ItemsController()
        {
            _repository = new ItemRepository();
        }

        [HttpGet]
        public IActionResult Get()
        {
            return Ok(_repository.GetAllItems());
        }
    }
}

Step 6: Configure Routing

Open Startup.cs and ensure that the routing is set up to use the new API controller. In the Configure method, add the following:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

Step 7: Running the Application

Now, run your application using:

dotnet run

Navigate to http://localhost:5000/api/items in your web browser. You should see a JSON response containing the sample items.

Displaying Data in the Frontend

At this point, we have set up the backend to serve data. The next step is to create a simple frontend to display this data.

Step 8: Create a Basic HTML Page

In the wwwroot folder, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page Application</title>
</head>
<body>
    <h1>Items List</h1>
    <div id="items"></div>

    <script>
        fetch('/api/items')
            .then(response => response.json())
            .then(data => {
                const itemsDiv = document.getElementById('items');
                data.forEach(item => {
                    itemsDiv.innerHTML += `<h2>${item.name}</h2><p>${item.description}</p>`;
                });
            });
    </script>
</body>
</html>

Step 9: Test the Application

Refresh your browser, and you should see the items being displayed dynamically from the API!

Conclusion

Congratulations! You have successfully developed a Single Page Application using ASP.Net Core, displaying data from a sample API. This tutorial covered the basic setup and implementation, but there is a wealth of additional features and functionalities you can explore, such as routing, state management, and UI frameworks.

For further learning, consider diving into advanced topics like authentication, state management with Redux or Vuex, or integrating with libraries like Axios for more robust API handling.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios