Exploring ASP.NET MVC

CRUD Operations and Modern Development Practices

Discover a comprehensive "Swiss army knife" project that demonstrates multiple approaches to CRUD operations, UI implementations, deployment strategies, and modern DevOps practices in ASP.NET MVC.

SampleMVCCrud Home Page
SampleMvcCRUD Application Home Page

Project Overview

I often find myself trying out new approaches and methods to tackle different challenges. That's where the SampleMvcCRUD project comes in. It has become something of a "Swiss army knife" for me to test out different approaches and to experiment with upgrades to the latest versions of both the .Net Core version and NuGet package versions.

As we know, CRUD operations form the backbone of many applications, and it's essential to have a solid understanding of how to implement them. The SampleMvcCRUD project provides multiple ways of implementing these operations using different approaches in Microsoft .Net.

I wanted to share my experience with a GitHub project to demonstrate ASP.Net MVC applications with CRUD – create, read, update, and delete operations. This is a tour of the project, explaining everything from the different approaches used to implement CRUD operations to the various deployment options available.

GitHub Repository

Complete source code and documentation

View on GitHub
VSCode.dev

Explore code directly in browser

Open in VSCode
Microsoft Learn

Official ASP.NET documentation

Learn ASP.NET

The Models & Data Generation

The SampleMvcCRUD project includes a model called Employee that includes Department to show lookup techniques. The model supports an image that can be set for each Employee, and the images are stored on the file system of the application. Additionally, the code generates MOCK sample data so that every time you run the application, you get a different set of data.

Data Model Interfaces

public interface IEmployee
{
  int Age { get; set; }
  string? Country { get; set; }
  Department Department { get; set; }
  int DepartmentId { get; set; }
  int? ManagerId { get; set; }
  string Name { get; set; }
  string? ProfilePicture { get; set; }
  string? State { get; set; }
}
public interface IDepartment
{
  string Description { get; set; }
  ICollection>Employee< Employees { get; set; }
  string Name { get; set; }
}
Fresh Data Every Time

To get fresh random test data, I used the Bogus library. Bogus is a fake data generator for .NET languages like C#, F#, and VB.NET, and it's a great way to generate sample data for testing purposes. With Bogus, you can quickly create fake data for your application testing needs.

In SampleMvcCRUD, I used the in-memory SQLite database and Bogus to generate fresh test data on every execution of the application. This approach ensures that the application is tested with a different set of data each time it is run, making it easier to identify any potential issues that may arise. By using Bogus, I was able to create realistic-looking data, including names, ages, states, and departments, to simulate a real-world scenario. h5.mb-3.text-success Data Generation with Bogus

public static List<Employee> GetEmployeeList(int generateCount)
{
  var states = new string[] { "Alabama", "Alaska", "Arizona",  };
  var fakeEmployees = new Faker<Employee>()
    // Call for objects that have complex initialization
    .CustomInstantiator(f => new Employee())
      .RuleFor(u => u.Name, (f, u) => f.Name.FullName())
      .RuleFor(u => u.Age, f => f.Random.Number(18, 70))
      .RuleFor(u => u.DepartmentId, f => f.Random.Number(1, 6))
      .RuleFor(u => u.Country, "USA")
      .RuleFor(u => u.State, f => f.Random.ListItem(states))
      .FinishWith((f, u) => { });
  return fakeEmployees.Generate(generateCount);
}

Overall, the Bogus library is a great tool to have in your toolbox as a .NET developer. It can help you generate sample data for testing purposes and ensure that your application is functioning correctly. For more information, check out a.text-decoration-none(href='https://github.com/bchavez/Bogus', target='_blank', rel='noopener noreferrer') the Bogus library on GitHub | .

User Interface Options

User interface (UI) is the point of interaction between a user and a software application. It includes all the visual and interactive elements of the application that users see and use to interact with the system. In the context of SampleMvcCRUD, the UI is the part of the application that allows users to create, read, update, and delete data from the system.

Three Main Approaches

There are three main approaches demonstrated in this project. Each approach should render the same results. These are just different techniques to achieve the same goal.

The choice of the UI implementation approach depends on the specific requirements of the application. If the application requires high interactivity and real-time updates, then the SPA approach may be the best option. If the application requires a clear separation between the presentation layer and the business logic, then the server-side MVC approach may be more appropriate. If the application needs to combine the benefits of both approaches, then the AJAX-based MVC approach may be the best option.

Single JavaScript Page

The first approach is a single JavaScript page that calls the included API endpoints. This approach is perfect for developers who prefer to keep the UI and the backend separate.

MVC Form Pages

This approach is MVC form pages with a single page (CSHTML) for each controller endpoint. This approach is ideal for developers who want to keep things simple.

MVC with AJAX

This approach is an MVC form page using JavaScript AJAX technology to make calls to the API endpoints to respond to user requests. This approach is perfect for developers who want to create a more dynamic and responsive UI.

Razor Pages

Another user interface implementation option available for ASP.Net MVC is Razor Pages. In this approach, the logic for handling requests and rendering views is contained in a single Razor page, rather than a separate controller and view.

SampleMVCCrud Razor Pages
SampleMvcCRUD Razor Pages Implementation

Advanced Features

Profile Pictures

One of the features I wanted to add to the SampleMvcCRUD application was the ability to upload profile pictures for employees. There are various ways to achieve this, including storing the images in a database or on a cloud storage service like Amazon S3. However, after some consideration, I decided to keep things simple and store the images directly on the local file system of the application.

SampleMVCCrud Profile Picture
Employee Profile Picture Upload

To implement this feature, I added a new field to the Employee model to store the file path of the profile picture. Then, I created a new view in the EmployeeController for uploading the image file and saving it to the local file system. I used the built-in System.IO namespace in .Net Core to handle file input/output operations.

PivotTable.js

Adding a Pivot Table feature can enhance the user experience and provide powerful data analysis capabilities. A pivot table is a data summarization tool used in spreadsheets and databases, which allows for the quick and easy analysis of large amounts of data.

PivotTable.JS Animation
Interactive PivotTable.js Demo

PivotTable.js is an open-source JavaScript library that provides a simple and powerful way to create pivot tables in web applications. It allows developers to easily create dynamic, drag-and-drop pivot tables that work with large datasets.

Enhanced Data Analysis

Implementing a Pivot Table feature using PivotTable.js provides valuable insights and improves the user experience. Users can quickly analyze and visualize data, and the drag-and-drop functionality makes it easy to change the layout of the table to explore different relationships between the data.

SampleMVCCrud Pivot Table
SampleMvcCRUD PivotTable Implementation

Application Deployment Options

Deploying an application is just as important as developing it, and the SampleMvcCRUD project demonstrates several deployment options. When it comes to deploying an application, there are many cloud computing options available. For this application, I chose to demonstrate 2 of these options as they are the most common.

Infrastructure as a Service (IaaS)

IaaS is the more basic category of cloud computing, which allows you to rent IT infrastructure like servers, virtual machines, storage, networks, and operating systems from a cloud provider on a pay-as-you-go basis. With IaaS, you have more control over the infrastructure and can choose exactly what you need to run your application.

Platform as a Service (PaaS)

PaaS is a higher-level service that provides a pre-configured platform for application development and deployment. This includes everything from the operating system to the middleware, database management, and application runtime environment. With PaaS, you don't need to worry about the underlying infrastructure.

Current Deployment Environments

Azure Virtual Machine

.NET 9 IaaS deployment

Visit Site
Azure App Service

.NET 9 Linux via GitHub Actions

Visit Site
Docker Hub

.NET 7 Linux from Docker Hub

Visit Site

DevOps & Containerization

What is DevOps?

DevOps is a relatively new approach to software development that combines development and operations teams to work collaboratively throughout the entire software development life cycle. At its core, DevOps is a philosophy that emphasizes the importance of communication and collaboration between these teams to deliver high-quality software at a faster pace.

Continuous Integration & Deployment (CI/CD)

One of the key concepts of DevOps is Continuous Integration and Continuous Deployment (CI/CD), which involves automating the process of building, testing, and deploying software. This helps to ensure that any new code changes are thoroughly tested and deployed quickly and efficiently.

GitHub Actions enables developers to create automated workflows, triggered by events such as a pull request, that can build, test, and deploy their code automatically. These workflows can include gates that check that any new code compiles and passes automated tests before it is merged into the main branch of the repository.

GitHub Action for SampleMvcCRUD
GitHub Actions CI/CD Pipeline Configuration

Application Containerization

Containerization is another important aspect of DevOps that involves packaging an application into a container that can be deployed consistently across different environments. Docker is a popular containerization platform that allows developers to build, test, and deploy their applications in a standardized way.

Docker Benefits
  • Consistent deployment across environments
  • Simplified dependency management
  • Reduced environment-specific issues
  • Easy scaling and orchestration
Deployment Process
  1. Build container image
  2. Test in development
  3. Push to Docker Hub
  4. Deploy to production
DockerHub container for SampleMvcCRUD
SampleMvcCRUD Docker Hub Repository

Containerization is a powerful tool for modern application development and deployment, allowing developers to easily package and deploy applications across multiple environments with consistency and reliability. While there are some potential drawbacks to containerization, these can generally be mitigated with careful planning and management and the benefits of containerization make it well worth considering for any modern application deployment.

Lifelong Learning Journey

Continuous Improvement

As a lifelong learner, I'm always seeking out new techniques and approaches to improve my development skills. That's why I wanted to share my experience with a GitHub project that demonstrates ASP.Net MVC applications with CRUD operations.

The SampleMvcCRUD project has become something of a "Swiss Army knife" for me, allowing me to test out new approaches and methods, as well as upgrades to the latest versions of both .NET Core and NuGet packages.

In this project, I have explored multiple ways to implement CRUD operations using different approaches in Microsoft .NET frameworks. I have also discussed the use of containerization, continuous integration and deployment (CI/CD), and other modern development practices.

Never Stop Learning

And the learning never stops. For example, I only recently added a section on the use of the Bogus library to create sample data on every run of the application. This is just one example of how we're always experimenting with new tools and techniques to improve our development skills.

So if you're a fellow lifelong learner, I invite you to follow the SampleMvcCRUD project and see what new updates and techniques have been added. And if you have any suggestions or ideas for new sections or features, feel free to let me know – because as developers, we're always learning.