Simple-List-ASP.NET-MVC for ASP.NET Core MVC CRUD Application with Web API

Project Overview

Technologies Used
ASP.NET Core 8 for building the MVC application and Web API.
Entity Framework Core for data access.
SQL Server for database storage.
jQuery for handling AJAX requests to perform CRUD operations asynchronously without page refresh.
Repository Pattern for separation of concerns and making the data access logic testable and reusable.
Bootstrap 5 for modal popups and UI components.

1. Project Setup
1.1. Prerequisites
Before setting up the project, ensure you have the following installed:

.NET SDK 8 or later.
SQL Server (for database storage).
Visual Studio (or any IDE that supports ASP.NET Core development).
1.2. Clone the Project
Clone the project from the repository or download the project as a ZIP file.

bash
Copy code
git clone  https://github.com/tleonmarks/Simple-List-ASP.NET-MVC.git
1.3. Install Dependencies
Navigate to the project folder and restore the NuGet packages.

bash
 
dotnet restore
1.4. Database Setup
Ensure that you have SQL Server installed. The project uses Entity Framework Core for database access. You'll need to set up the connection string in appsettings.json and then apply the migrations.

Modify appsettings.json to include your SQL Server connection string:
json
Copy code
{
  "ConnectionStrings": {
    "DefaultConnection": "Server=your-server-name;Database=CrudAppDB;Trusted_Connection=True;"
  }
}
Apply migrations:
bash
Copy code
dotnet ef database update
This will create the CrudAppDB database in your SQL Server instance.

2. Architecture Overview
The application follows a Layered Architecture with the following key components:

Model: Defines the entity that represents the product (e.g., Product).
Repository: Contains methods for interacting with the database using Entity Framework Core.
Controller: Handles the incoming HTTP requests and provides responses (both for the MVC views and API).
Views: Displays the user interface for managing products List.
AJAX: Used for making asynchronous calls to the backend without refreshing the page.
2.1. The Repository Pattern
The repository pattern is used to abstract away data access logic. The IProductRepository interface defines methods for CRUD operations, and ProductRepository implements these methods to interact with the database using Entity Framework Core.

3. MVC Operations (UI)
The MVC side of the application uses modal popups to create, edit, and delete products without refreshing the page.

3.1. Create a New Product
UI Action: A button triggers a modal form to input the new product's details (name, price).
Backend: When the form is submitted, an AJAX request is made to the POST /api/products endpoint.
Validation: Client-side validation checks for blank fields, and if invalid, errors are shown in the modal.
3.2. Edit a Product
UI Action: The user clicks the "Edit" button next to a product in the list, which loads the product details into a modal form.
Backend: An AJAX request is made to the PUT /api/products/{id} endpoint to update the product details.
Validation: Like the "Create" modal, input fields are validated, and error messages are shown in the modal.
3.3. Delete a Product
UI Action: The user clicks the "Delete" button next to a product, triggering a confirmation prompt. Upon confirmation, the product is deleted via an AJAX request to the DELETE /api/products/{id} endpoint.
Backend: A call is made to the backend to remove the product from the database.
3.4. jQuery AJAX
jQuery is used to make AJAX requests to the API endpoints. The frontend sends HTTP requests to the API without refreshing the page.

javascript
Copy code
// Example of AJAX call to create a new product
$('#createProductForm').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: '/api/products',
        data: JSON.stringify({
            Name: $('#productName').val(),
            Price: $('#productPrice').val()
        }),
        contentType: 'application/json',
        success: function (data) {
            // Handle success - update UI or show success message
        },
        error: function (xhr, status, error) {
            // Handle error - show validation errors
        }
    });
});
4. Web API Endpoints
4.1. Get All Products
Endpoint: GET /api/productapi
Description: Retrieves a list of all products.
Response: A list of products in JSON format.
Example:
json
Copy code
[
  {
    "productId": 1,
    "name": "Product A",
    "price": 25.99
  },
  {
    "productId": 2,
    "name": "Product B",
    "price": 30.99
  }
]
4.2. Get Product by ID
Endpoint: GET /api/productapi/{id}
Description: Retrieves a product by its ID.
Response: The product details or 404 Not Found if the product does not exist.
Example:
json
Copy code
{
  "productId": 1,
  "name": "Product A",
  "price": 25.99
}
4.3. Create a New Product
Endpoint: POST /api/productsapi
Description: Adds a new product to the system.
Request Body:
json
Copy code
{
  "name": "New Product",
  "price": 19.99
}
Response: The newly created product with a 201 Created status.
4.4. Update a Product
Endpoint: PUT /api/productapi/{id}
Description: Updates an existing product.
Request Body:
json
Copy code
{
  "productId": 1,
  "name": "Updated Product",
  "price": 29.99
}
Response: 204 No Content if the update is successful.
4.5. Delete a Product
Endpoint: DELETE /api/productapi/{id}
Description: Deletes a product by its ID.
Response: 204 No Content if the deletion is successful.
5. Error Handling

The application uses standard HTTP status codes to represent the result of an API request:
200 OK: Successful GET request or successful operation.
201 Created: Successfully created a new resource.
204 No Content: Successfully updated or deleted a resource.
400 Bad Request: The request is invalid or missing required data.
404 Not Found: The requested resource could not be found.
500 Internal Server Error: A server error occurred.