Developing Single Page Applications using ASP.Net Core - Update Record

Screenshot from the tutorial

Developing Single Page Applications using ASP.Net Core: Updating Records

In the world of web development, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experience. Leveraging frameworks like ASP.NET Core makes developing SPAs more efficient and manageable. In this blog post, we will discuss how to update records in a Single Page Application using ASP.NET Core, based on insights from a recent YouTube video titled "Developing Single Page Applications using ASP.Net Core - Update Record".

What is a Single Page Application (SPA)?

A Single Page Application is a web application that loads a single HTML page and dynamically updates content as the user interacts with the app. This approach minimizes page reloads and enhances user experience by providing a fluid and responsive interface.

Why Use ASP.NET Core for SPAs?

ASP.NET Core is a robust framework for building web applications, offering:

• Cross-platform capabilities.
• High performance.
• Built-in dependency injection.
• A rich ecosystem of libraries and tools.

Setting Up Your ASP.NET Core Project

Before diving into updating records, ensure that you have an ASP.NET Core project set up. If you’re starting from scratch, you can create a new ASP.NET Core Web Application using the following command:

dotnet new webapp -n MySpaApp

Navigate to your project directory:

cd MySpaApp

Creating the Data Model

For our SPA, we will need a data model to represent the records we want to update. Here’s an example of a simple data model for a Product:

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

Building the API Controller

Next, we’ll create an API controller to handle HTTP requests related to our Product model. In the Controllers folder, create a file named ProductsController.cs:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

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

    [HttpPut("{id}")]
    public IActionResult UpdateProduct(int id, [FromBody] Product updatedProduct)
    {
        var product = _products.FirstOrDefault(p => p.Id == id);
        if (product == null)
        {
            return NotFound();
        }

        product.Name = updatedProduct.Name;
        product.Price = updatedProduct.Price;

        return NoContent();
    }
}

Explanation of the Code

• Route: The route attribute defines how the API endpoint is accessed.
• UpdateProduct method: This method receives the product ID and updated product data. It searches for the product in the list and updates its properties. If the product is not found, it returns a 404 Not Found status.

Creating the Frontend to Handle Updates

Once the backend is ready, we need to create a frontend that allows users to update the product records. Assuming you are using a framework like React or Angular, you can create a simple form to achieve this.

Example Using Fetch API

Here’s how you might implement a simple function to update records using the Fetch API in JavaScript:

async function updateProduct(productId, updatedData) {
    const response = await fetch(`https://localhost:5001/api/products/${productId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedData)
    });

    if (response.ok) {
        console.log("Product updated successfully!");
    } else {
        console.error("Failed to update product.");
    }
}

Using the Function

You can call this function when a user submits an update form:

<form id="updateProductForm">
    <input type="text" id="productName" placeholder="Product Name" required />
    <input type="number" id="productPrice" placeholder="Product Price" required />
    <button type="submit">Update Product</button>
</form>

<script>
    document.getElementById("updateProductForm").addEventListener("submit", async (event) => {
        event.preventDefault();
        
        const productId = 1; // replace with actual product ID
        const updatedData = {
            Name: document.getElementById("productName").value,
            Price: parseFloat(document.getElementById("productPrice").value)
        };

        await updateProduct(productId, updatedData);
    });
</script>

Conclusion

Updating records in a Single Page Application using ASP.NET Core involves creating a robust API, handling user interactions gracefully, and ensuring a seamless experience. With the combination of ASP.NET Core's powerful features and modern JavaScript frameworks, developers can create dynamic and engaging applications.

For more detailed insights, consider watching the original YouTube video titled "Developing Single Page Applications using ASP.Net Core - Update Record" for a hands-on demonstration. 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