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

Screenshot from the tutorial

Developing Single Page Applications using ASP.NET Core: A Quick Guide

In today’s fast-paced web development landscape, Single Page Applications (SPAs) have become a popular choice for creating dynamic and responsive web apps. Leveraging ASP.NET Core, developers can build SPAs that provide a seamless user experience. In this guide, we will delve into the essentials of developing SPAs using ASP.NET Core, particularly focusing on how to read data efficiently.

What is a Single Page Application?

A Single Page Application is a web application that loads a single HTML page and dynamically updates the content as the user interacts with the app. This approach eliminates the need for full page reloads, resulting in a more fluid user experience.

Benefits of SPAs

• Improved Performance: SPAs load resources once, reducing server requests.
• Enhanced User Experience: They allow for smooth transitions and interactions.
• Reduced Server Load: Only necessary data is sent and received.

Getting Started with ASP.NET Core

Before diving into the specifics of data reading in SPAs, ensure you have the following prerequisites:

• .NET SDK: Download and install the latest version of the .NET SDK from the official site.
• IDE: Use Visual Studio, Visual Studio Code, or any other code editor of your choice.
• Node.js: For managing front-end dependencies.

Creating an ASP.NET Core Project

To create a new ASP.NET Core project for your SPA, run the following command in your terminal:

dotnet new webapp -n MySinglePageApp
cd MySinglePageApp

This command creates a new web application project named MySinglePageApp.

Setting Up the Client-Side Framework

While ASP.NET Core serves as the backend, you can choose any front-end framework to build your SPA. Popular choices include React, Angular, and Vue.js. In this tutorial, we'll focus on using React.

Installing React

Navigate to your project directory and run the following command to set up React:

npx create-react-app client

This command creates a new React application inside a folder named client.

Configuring API Endpoints

To read data in your SPA, you need to set up API endpoints in your ASP.NET Core backend. Here’s how to create a simple API that serves data.

Creating a Data Model

Start by creating a simple data model. For instance, let's create a Product model.

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Setting Up the Controller

Next, create a controller to manage your API requests. In the Controllers folder, create a file named ProductsController.cs:

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    private static List<Product> products = new List<Product>
    {
        new Product { Id = 1, Name = "Product 1", Price = 10.00M },
        new Product { Id = 2, Name = "Product 2", Price = 15.50M },
    };

    [HttpGet]
    public ActionResult<IEnumerable<Product>> GetProducts()
    {
        return Ok(products);
    }
}

In this example, the GetProducts method returns a static list of products.

Connecting the Frontend to the Backend

Now that we have our API in place, let’s connect the React app to the ASP.NET Core backend.

Fetching Data using Axios

Install Axios in the React app to handle HTTP requests:

cd client
npm install axios

Creating a Component to Display Products

In your React app, create a component named ProductList.js:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const ProductList = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await axios.get('/api/products');
            setProducts(response.data);
        };

        fetchProducts();
    }, []);

    return (
        <div>
            <h1>Product List</h1>
            <ul>
                {products.map((product) => (
                    <li key={product.id}>{product.name} - ${product.price}</li>
                ))}
            </ul>
        </div>
    );
};

export default ProductList;

Rendering the Component

Finally, render the ProductList component in your main App.js file:

import React from 'react';
import ProductList from './ProductList';

function App() {
    return (
        <div className="App">
            <ProductList />
        </div>
    );
}

export default App;

Running Your Application

Now it's time to run your application. In the ASP.NET Core project directory, run:

dotnet run

Then, in a new terminal, navigate to the client directory and start the React app:

npm start

Open your browser and navigate to http://localhost:3000. You should see the product list populated from your ASP.NET Core API.

Conclusion

Congratulations! You’ve just built a simple Single Page Application using ASP.NET Core and React. This tutorial covered the basics of setting up your development environment, creating an API, and connecting your frontend to read data.

Next Steps

• Explore additional features like routing, state management, and authentication.
• Consider adding more sophisticated data handling, such as CRUD operations.
• Optimize your SPA for performance and user experience.

By continuously learning and experimenting, you can create powerful SPAs that cater to modern web demands. 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