DEV Community: Sergiy Korzh

How to add CRUD functionality in ASP.NET Core app in 10 minutes

Sergiy Korzh — Tue, 01 Jun 2021 06:15:36 +0000

Problem

One of the first tasks for most business applications is to implement CRUD (Create, Read, Update, Delete) operations for the main entities the app works with.

Every developer faces the following problems as part of solving the task:

The creation of CRUD pages and forms is very boring and time-consuming. Believe me, I’ve been there a lot of times.
If you do it manually, it can be very slow and error-prone (missed fields, forgotten validators, etc).
Of course, you can use the scaffolding tool provided by Visual Studio.
However, it’s also not a quick process either, because you need to run that tool for each model class.
As a result, you get many .cs and .cshtml files, which you'll have to edit manually if something in the default behavior or appearance doesn't suit your needs.
In the event of changes in the model classes, you'll need to update those generated controllers and pages manually
or regenerate the code and forms from scratch for each affected model class.
Moreover, even the built-in scaffolding doesn't provide some important, often essential functions such as paging or search.

Solution: EasyData library

To solve most (if not all) of those problems we created the EasyData library.
The main advantage of EasyData is that it employs a declarative approach.

The whole process can be split into two main steps:

You “describe” what data (entities and attributes) you want to work with and
how your application should work with that data (types, constraints, relations between entities, etc).
Based on this information, the EasyData library establishes an API endpoint for CRUD operations and a vanilla JavaScript-based UI
that lets your users perform those operations via the API.

The most wonderful thing here is that when using Entity Framework Core,
all you need for the first step (“describing” the data) is your DbContext.
Simply “feed” it to the library, and EasyData automatically extracts all the information needed to create the API endpoints and CRUD UI.

Quick demo

Here's a small introduction video that shows how EasyData works:

Getting Started

First of all, to test EasyData you can open and run one of the sample projects available in this repository.

Installing EasyData to your project takes the following three simple steps:

1. Install EasyData NuGet packages

EasyData.AspNetCore
EasyData.EntityFrameworkCore.Relational

2. Add EasyData middleware in `Startup.Configure`

using EasyData.Services;
.    .    .    .    .

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapEasyData(options => {
            options.UseDbContext<AppDbContext>();
        });

        endpoints.MapRazorPages();
    });

In the middleware options, we also specify the type of DbContext object that will be used as the source of the metadata.

3. Set up a catch-all page for all CRUD operations

If you're using Razor Pages, add a new page (for example EasyData.chstml). If it’s MVC, you'll need a controller and a view.
This page will "catch" all URLs that begin with a certain prefix (/easydata by default but it's configurable). So, we use a special catch-all parameter in the route definition ("/easydata/{**entity}").

We also add EasyData styles and the script file (easydata.min.js), which renders the data-management UI and handles all CRUD operations on the client-side.

@page "/easydata/{**entity}"
@{
    ViewData["Title"] = "EasyData";
}
<link rel="stylesheet" href="https://cdn.korzh.com/ed/1.2.2/easydata.min.css" />

<div id="EasyDataContainer"></div>

@section Scripts {
    <script src="https://cdn.korzh.com/ed/1.2.2/easydata.min.js" type="text/javascript"></script>
    <script>
        window.addEventListener('load', function () {
            new easydata.crud.EasyDataViewDispatcher().run()
        });
    </script>
}

That’s it. Now you can run your web app, open the /easydata URL and enjoy CRUD functionality.

The result will be something like this:

List view screen for one entity:

"Edit Record" dialog:

"Lookup" dialog (was opened from "Edit Record"):

How it works

Let's briefly go over how all this magic works.
As we mentioned before EasyData takes care of three main things:

It collects database metadata.
It establishes an API for the main CRUD operations.
It renders UI (again, based on the metadata) and processes all user interactions in that UI.

Let’s explore all these parts in detail.

Metadata

Metadata is the data about your data: what entities (tables) are stored in your database,
how they're connected, what attributes (fields) they have, what the types of attributes are
and what the constraints are with respect to the values we can store in those attributes.

EasyData collects metadata (in one way or another) and stores it in the instance of MetaData class.
This object contains the list of entities (tables), the attributes (fields) for each entity, the connections between entities,
and some additional information used in API and during UI rendering and processing.

To fill the MetaData object, we specify a metadata loader. In the example above, we did it with the UseDbContext call.
So, the metadata is loaded from a DbConext object. Currently (in version 1.2) this is the only metadata loader available.
In future versions, it will be possible to load metadata directly from a DbConnection object or perhaps with some other method.

EasyData middleware

EasyData middleware is responsible for establishing a REST API for all CRUD (and not only) operations initiated by the client side.

To add the middleware to your pipeline use MapEasyData extension function inside UseEndpoints configuration delegate:

   app.UseEndpoints(endpoints =>
    {
       endpoints.MapEasyData(options => {
            options.UseDbContext<AppDbContext>();
        });
    }

This call should be made before MapMvc or MapRazorPages.
By default, EasyData middleware is assigned to /api/easydata endpoint, but you can change it via the configuration function (action) passed in the parameter.

The only thing that's required in order to configure for MapEasyData is to tell it where to take the metadata.
Currently, there's just one option available: getting metadata from a DbContext.
So, that’s why we add UseDbContext<AppDbContext>() call in the example above.
Besides getting metadata, UseDbContext also provides our middleware with all the means for performing CRUD operations (via the DbContext object).

EasyData UI root page

The third part of the EasyData setup process is the page where the CRUD user interface is rendered.
It must be a so-called "catch-all" Razor page or MVC view.
By default, this page must be opened for any path that starts with the /easydata/ prefix.
(So, all paths like /easydata/student or /easydata/invoice must be processed by this page.)

NB: /easydata is the default prefix.
You can use another name, but in this case, it will be necessary to specify it in the options of our RootDispatcherView object.

Our catch-all page can contain any HTML element of your choice.
However, to ensure the visualization and normal operation of the CRUD UI, it must include the following 4 elements:

<link> element with a reference to EasyData CSS file (easydata.min.cs)
Container (empty div element), in which our interface will be displayed.
By default, it must have the ID EasyDataContainer, but this can also be configured with options.
<script> element with a reference to easydata.min.js.
And a small script that creates and launches the EasyDataViewDispatcher object on page load.

An example of the simplest “catch-all” page you can see in the Getting Started section above.

Wrapping up

Currently, EasyData can work with .NET Core 3.1 and .NET 5.
Obviously, all ASP.NET Core and Entity Framework Core versions that can work with the specified releases of .NET (Core) are supported.
However, it won't be a problem to add support for previous versions of .NET Core or even .NET Framework 4.x.
If anyone needs it, please submit an issue in EasyData's GitHub repository.

EasyData can be a good tool with which to quickly prototype a new project or create a POC (proof of concept)
when we already understand what data we'll need but don't want to spend a lot of time on the simplest operations with that data.
However, we hope that in time it will be possible to fully use this solution in the production environment.

So, we look forward to hearing from you with any comments or advice you may have. Of course, don't forget to ad a start for the EasyData repository on GitHub, especially if this library helped you and saved some time.

So, we look forward to hearing from you with any comments or advice you may have.
Of course, don't forget to add a star for the EasyData repository on GitHub,
especially if this library helped you and saved some time.

How to add extra user claims in ASP.NET Core web-app

Sergiy Korzh — Fri, 26 Jul 2019 09:09:03 +0000

Introduction

ASP.NET Core has sufficiently developed tools for implementing authentication and authorization mechanisms in your projects. These tools are available out-of-the-box and rather simple in configuring. Even the starting web-project created with Visual Studio wizard already includes all the necessary parts of the authorization subsystem (Registration/Login/User Profile forms, Reset password procedure, etc.)

However, some at first glance, simple tasks require a deeper understanding of the internal structure of ASP.NET Core Identity.

In this article, we will discuss one of these tasks and suggest a solution to it using the claims-based approach.

Problem

Let's suppose we created a new ASP.NET Core project using one of the default templates and chose "Individual user account" option for "Authentication".

Now when we start that newly created project and register new user we will see something like Hello YourEmailAddress@YourCompany.com in the top right part of the index web-page.

Obviously, such kind of greeting is useless in a real-world application and you would like to see the name of the currently logged user there instead (e.g. Hello John Doe).

Let's figure out how to do it.

Solution

Here we guess you are already familiar with the claims and claims-based approach for authorization used in ASP.NET Core Identity. If not - please read ASP.NET Core Security article first.

To achieve our goal we need to do 2 things:

Add necessary information to the list of the claims attached to the user's identity.
Have a simple way of getting that info when needed.

But before implementing these two tasks we will need to add a new ContactName field to our model class and update our registration and user management pages accordingly.

0. Preparations

Before we can add a new claim to a user object (the one you can access via HttpContext.User) we need a place to store that additional info somewhere.
Here I am going to describe how to get this done for a new ASP.NET Core project built by a default template.

If you work on some real-world project - most probably you already did similar changes before.
In this case, you can skip this "preparations" section and move right to the next one.

1. New ApplicationUser class

Add a new ApplicationUser class with `ContactName' property:

public class ApplicationUser : IdentityUser
{
    public string ContactName { get; set; }
}

Of course, you can add more properties to store some additional information with the user account.
For example: FirstName, LastName, Country, Address, etc. All of them can be placed to claims the same way as ContactName we discuss here.

2. Replace `IdentityUser` with `ApplicationUser`

Now you need to replace IdentityUser with ApplicationUser everywhere in your project.

The default ASP.NET Core template uses predefined IdentityUser type everywhere.
Since we what to use ApplicationUser instead of it - we need to search for all inclusions of IdentityUser in your project and replace with ApplicationUser.

It will include your DbContext class, one line in Startup class (in ConfigureServices method) and two lines with @inject directives in _LoginPartial.cshtml view.

Here is how your new ApplicationDbContext class will look like after that:

public class ApplicationDbContext : IdentityDbContext<ApplicationUser, IdentityRole, string>
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
    {
    }
}

3. Update your database.

Now you need to add a new migration and then update your DB.
Just run the following 2 commands from your project's folder:

dotnet ef migrations add AddUserContactName

dotnet ef database update

4. Update "User Profile" page

Finally, we will need to add our new field to the "User Profile" page to make it possible for users to modify it.

The default ASP.NET Core template uses all identity-related pages directly from a special Razor UI library (Microsoft.AspNetCore.Identity.UI).
The good news is: we can override any of those pages if we want. Here are the steps we need to do:

Right-click on your project in VS and select Add | New Scaffolding item.
In the "Add Scaffold" dialog select Identity on the left side tree and then Identity in the main list and click "Add".
In the dialog that appears select only Account\Manage\Index page and then click on "Add" as well.
When the process is finished you will find a new page 'Index.cshtml' in Areas/Identity/Pages folder.
After that make the following changes to that Index page:

In the Index.cshtml itself add the following piece of markup right before update-profile-button button.

<div class="form-group">
  <label asp-for="Input.ContactName"></label>
  <input asp-for="Input.ContactName" class="form-control" />
  <span asp-validation-for="Input.ContactName" class="text-danger"></span>
</div>

Then, in the code-behind file Index.cshtml.cs we need to modify the view model:

public class InputModel
{
    .   .   .   .   .   .

    public string ContactName { get; set; }
}

then the OnGetAsync method:

public async Task<IActionResult> OnGetAsync()
{
    .   .   .   .   .   .

    Input = new InputModel
    {
        Email = email,
        PhoneNumber = phoneNumber,
        ContactName = user.ContactName //add this line
    };

    .   .   .   .   .   .

}

and the OnPutAsync:

public async Task<IActionResult> OnPostAsync()
{
    .    .    .    .    .    .    .

    if (Input.ContactName != user.ContactName) {
        user.ContactName = Input.ContactName;
        await _userManager.UpdateAsync(user);
    }

    await _signInManager.RefreshSignInAsync(user);
    StatusMessage = "Your profile has been updated";
    return RedirectToPage();
}

So, after all the changes described above your User Profile page after that registration will look like this:

Now, all the preparations are finished we can return back to our main task.

1. Adding the contact name to the claims

A funny thing: the main task is much easier than all the preparations we made before. :)
Moreover, it became even easier because of some changes in version 2.2 of ASP.NET Core (in comparison with version 2.0 as we described before )

There are only two simple steps:

Create own claims principal factory

We need an implementation IUserClaimsPrincipalFactory which will add necessary information (ContactName in our case) to the user claims.
The simplest way to do it - is to derive our new class from the default implementation of IUserClaimsPrincipalFactory and override one method: GenerateClaimsAsync:

public class MyUserClaimsPrincipalFactory : UserClaimsPrincipalFactory<ApplicationUser>
{
    public MyUserClaimsPrincipalFactory(
        UserManager<ApplicationUser> userManager,
        IOptions<IdentityOptions> optionsAccessor)
        : base(userManager, optionsAccessor)
    {
    }

    protected override async Task<ClaimsIdentity> GenerateClaimsAsync(ApplicationUser user)
    {
        var identity = await base.GenerateClaimsAsync(user);
        identity.AddClaim(new Claim("ContactName", user.ContactName ?? "[Click to edit profile]"));
        return identity;
    }
}

Register new class in DI container

Then we need to register our new class in the dependency injection container.
The best way for that - to use AddClaimsPrincipalFactory extension method:

public void ConfigureServices(IServiceCollection services) 
{
    .     .     .     .      .
    services.AddDefaultIdentity<ApplicationUser>()
        .AddDefaultUI(UIFramework.Bootstrap4)
        .AddEntityFrameworkStores<ApplicationDbContext>()
        .AddClaimsPrincipalFactory<MyUserClaimsPrincipalFactory>();  //<---- add this line
}

2. Accessing new claim from the views

Now we have a new claim associated with our user's identity. That's fine. But how we can get it and render on our view(s)?
Easy. Any view in your application has access to User object which is an instance of ClaimsPrincipal class.

This object actually holds the list of all claims associated with the current user and you can call its FindFirst method to get the necessary claim and then read the Value property of that claim.

So, we just need to open _LoginPartical.cshtml file in Pages/Shared/ (or Views/Shared/) folder and replace the following line:

<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @User.Identity.Name!</a>

with this one:

<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @(User.FindFirst("ContactName").Value)!</a>

Now you instead of something like Hello john.doe@yourcompany.com at the top of your web-page you should see something like this:

That's all for now. Enjoy!

The article was originally posted on Korzh.com blog.

DEV Community: Sergiy Korzh

How to add CRUD functionality in ASP.NET Core app in 10 minutes

Problem

Solution: EasyData library

Quick demo

Getting Started

1. Install EasyData NuGet packages

2. Add EasyData middleware in Startup.Configure

3. Set up a catch-all page for all CRUD operations

List view screen for one entity:

"Edit Record" dialog:

"Lookup" dialog (was opened from "Edit Record"):

How it works

Metadata

EasyData middleware

EasyData UI root page

Wrapping up

How to add extra user claims in ASP.NET Core web-app

Introduction

Problem

Solution

0. Preparations

1. New ApplicationUser class

2. Replace IdentityUser with ApplicationUser

3. Update your database.

4. Update "User Profile" page

1. Adding the contact name to the claims

Create own claims principal factory

Register new class in DI container

2. Accessing new claim from the views

2. Add EasyData middleware in `Startup.Configure`

2. Replace `IdentityUser` with `ApplicationUser`