Code Generator 3

Generate code for an ASP.NET Core 6 + Entity Framework Core website, using WebApi for a RESTFUL API service, and an Angular 14 font-end using TypeScript & Bootstrap 5.

To get started, just rename the Web.Sample.config and configure it to your environment. (CodeGenerator runs on (old) ASP.NET v4, but the outputs are for modern (2022) targets, so don't be put off!)

• Set the connection string
• Set your name, email and password so you can log in on first run
• Set the localhost url that the website will run on
• Run the app and add your first Project!

You will need Website 3, which you can find here, as the project into which your generated code will be placed, if you deploy the code from CodeGenerator directly/automatically into your target website.

Creating a project automatically adds a User entity with fields for Id, Email, First Name, Last Name, Full Name and Disabled. (The Full Name is a database-calculated field.)

You can immediately generate (and deploy) the code from this initial setup. The screenshot below shows the generated code for the User entity:

In the above screenshot, you can see the tabs for each of the different files that Code Generator 3 will produce, including:

• Model: creates the class which EFCore will use to generate a table in the database
• TypeScriptModel: creates the TypeScript model to work with in your front-end Angular app
• Enums: if you need to use Enums as fields
• DTO: The REST API converts your Model classes to DTOs before returning them to the webpage, allowing better control
• SettingsDTO: a generic settings DTO
• DbContext: creates part of the DBContext class for EF Core
• Controller: creates a WEB API controller for the RESTful API
• GeneratedModule: this creates a generated.module.ts for all generated components
• SharedModule: this creates a shared.module.ts for functionality shared between your generated & custom components
• AppRouter: creates the generated.routes.ts file for Angular routing
• ApiResource: creates a typescript service file for each entity, e.g. user.service.ts
• ListHtml: creates the HTML for searching/listing each entity
• ListTypeScript: creates the TypeScript for searching/listing each entity
• EditHtml: creates the HTML for adding/editing/deleting each entity
• EditTypeScript: creates the TypeScript for adding/editing/deleting each entity
• AppSelectHtml: creates the selector directive for selecting entities from lists (think of it as an advanced TypeAhead)
• AppSelectTypeScript: creates the selector directive for selecting entities from lists (think of it as an advanced TypeAhead)
• SelectModalHtml: creates the modal directive for selecting entities from lists (think of it as an advanced TypeAhead)
• SelectModalTypeScript: creates the modal directive for selecting entities from lists (think of it as an advanced TypeAhead)
• Sort Html (not in screenshot): if your entity has a sort field, this loads the full list of records for the user to sort with drag-drop functionality.
• Sort TypeScript (not in screenshot): if your entity has a sort field, this loads the full list of records for the user to sort with drag-drop functionality.

These outputs can be deployed directly into your target project if you have set up the RootPath value in your web.config, as well as the WebPath & ModelsPath values in the Project screen.

Of course, the generated code doesn't give you everything you need for a fully functional website. For that you need Website 3.

To get Website 3 to run, simply configure your appsettings.json and environment.ts files (samples provided).

What you first run Website 3, you will be asked for a login (Name, Email, Password). Once you're logged in, you will be able to see the generated code as shown below:

The User search/list page:

The User add/edit/delete page:

Of course, there is more, such as adding relationships between entities, having hierarchical relationships, etc. The screenshot below, for example, shows how a searchable relationship between two entities is produced using a modal window that lets you search - in this case, searching the list of users.

Feel free to get in touch for more assistance: twitter.com/capesean