How to Implement CRUD forms with React and ASP.Net Core

by

In this tutorial I'll be building a high performance ASP.Net Core React.js Single Page Application that implements CRUD forms with validation without using Redux or JQuery (React makes JQuery virtually obsolete). In case you're not familiar with the acronym it means: Create, Read, Update, and Delete. I'll be using Visual Studio 2017 Community with ASP.Net Core 2.0, React.js, and EntityFramework with a SQL Server 2014 Express backend but most any version of SQL Server should do. This tutorial assumes that you are familiar with Visual Studio and ASP.NET applications and have written some C# and Javascript code, at least at a rudimentary level.

Building our React Application

Visual Studio 2017 includes a basic React project template, so we'll be starting with that. Let's create our project...

  1. Open Visual Studio and select New Project.
  2. From the New Project dialog box, select .NET Core and then ASP.Net Core Web Application (fig 1)
    fig 1
    fig 1
  3. From the ASP.Net Core Web Application dialog box, select React.js. (fig 2)
    fig 2
    fig 2
  4. Name the application 'TestReactMovieApplication'.

Building our Models

Our models consist of three classes: Actor, Movie, and MovieActor, which simply defines the relationship between movies and actors. Let's start by creating a new Class. In Visual Studio, right-click on the project, select Add, then New Class. Call the new class models.cs (fig 2.1).


fig 2.1
fig 2.1

Next open the models.cs file and type out the Actor class as show below (fig 2.2). Then do the same for the Movie and MovieActor classes shown below that (figs 2.3 and 2.4). Note our models.cs file will contain all three classes in order to reduce file-sprawl.


fig 2.2
fig 2.2
fig 2.3
fig 2.3
fig 2.4
fig 2.4

Next we'll need to create a database context for EntityFramework. Right click on your project, select Add, then Class. Give the file the name AppDbContext.cs. Then open the new file and type the following code (fig 2.5). Note that we have pluralized the names of the DBSets. This helps us easily differentiate the models from the datasets. Also since our MovieActor table has a compound primary key, we need to specify that in the OnModelCreating() method.


fig 2.5
fig 2.5

We'll need to add the DbContext to the project services. We're also going to specify a JSON option that will maintain the case of our field names rather than changing them to camelCase, which is the default. (This will break the Microsoft Fetch Data example - don't be alarmed. If you want to fix it simply capitalize the first letter of each of the field names in the renderForecastsTable() method and the WeatherForecast interface in components/FetchData.tsx) Open startup.cs in your project root and make sure the ConfigureServices() method looks like the following (fig 2.5.1).


fig 2.5.1
fig 2.5.1

Configuring the Application

tsconfig.json

Since we'll be writing quite a bit of TypeScript, we're going to turn TypeScript's 'strict' mode off to make our life easier. In tsconfig.json, which lives in the root of your application, let's set 'strict' to false as shown below.

"compilerOptions": { "strict": false

Connection String

We'll set our connection string in appsettings.json, also in the root of our application (fig 2.6). Your connection string should look similiar to the one shown, however your server name may be different depending on what you specified when you installed SQL Server.


fig 2.6
fig 2.6

Anatomy of a React TS Application

At this point I'd like to digress and talk about the anatomy of our React.js application. This tutorial will follow an MVC (model, view, controller) methodology except that instead of server-side views we will have client side React components acting as our views. I also want to talk about the structure of our React application in a bit more detail.

The Project

When you create an ASP.NET Core React application, you'll find the following project items (fig 7). The most important things to know are: that we no longer user server-side views (instead we have React components under the ClientApp folder); that the client script must be "compiled" (performed by webpack); that the client script is "transpiled" (converted from TypeScript to ES5 or ES6 per your tsconfig.json file); that all server to client communication happens using AJAX and JSON.


fig 7
fig 7

Models

As well as the server side models that we created above (models.cs in fig 7), React requires client-side models. We'll be creating a client-side models file with essentially the same structure except for the datatypes (TypeScript datatypes are simpler and fewer) and without any of the ASP.Net data attributes.

Components (Views)

In our React application, we'll be building client-side components (in ClientApp\components) to act as the "views" of our application (fig 10). As in traditional Asp.Net MVC applications we will create a folder for each component (model). However, rather than creating five views, we will perform all of our CRUD operations with just three, which will simplify maintenance of our views.


fig 10
fig 10

Also, each component will have its own .css file. This is a big improvement over a global styles.css file in which everything affects everything else. The only thing to know about the component css file is that it will only ever affect itself and any children that it contains.

Controllers

As in traditional Asp.Net MVC applications, our React application will have one controller for each model, i.e. we will have three separate controllers (fig 11).
fig 11
fig 11

There will be a few differences in our controllers compared to a traditional MVC controller. All of our controllers will be WebAPI controllers and all methods will return JSON data. This has the advantage of allowing us to leverage our application to also serve mobile applications. Secondly, in following many WebAPI practices we will use the HTTP methods PUT and POST for edit and create respectively. So instead of a Create method we will have a POST method, and instead of an Edit method we will have a PUT method.

That concludes Part 1 of this tutorial. Stick around. In Part 2 we'll be creating our components.

ReactTS/ReactTurbo-splash128.png ReactTS/ReactTurbo-splash128.png

React Turbo Scaffolding

Scaffold your entire ASP.NET Core application with a single button click.

  • 100% React Component architechture
  • Full CRUD support
  • Built-in validation
  • Built-in sorting and paging and much, much more!

Learn more »


Part 2: Building our React components


Return to Index

Comment Form is loading comments...