Asp.net Zero Application Practice-official example PhoneBook Learning 1, zerophonebook

Asp.net Zero Application Practice-official example PhoneBook Learning 1, zerophonebook

For Zero: ASP. NET Core & Angular 2 + (aspnet-zero-core-3.1.0 ).

This version has two official solution Folders: Angular (front-end) and aspnet-core (backend service ).

Before starting the following steps, you must be able to successfully publish the program. For background services, you only need to run the program. If any error is reported, install the required plug-in as prompted. Angular is troublesome, and many items are installed. We recommend that you use yarn. You can download this file and install it successfully.

I have not changed the solution name, and still use the default solution name MyCompanyName. AbpZeroTemplate. Therefore, the following file names are different from the phonebook sample document on the official website.

The procedure is as follows:

1. temporarily disable multi-tenant in the src/***. core/*** CoreModule. cs file of the background service solution.

[DependsOn(typeof(AbpZeroCoreModule))]public class PhoneBookCoreModule : AbpModule{    public override void PreInitialize()    {        //some other code...                //Enable this line to create a multi-tenant application.        Configuration.MultiTenancy.IsEnabled = false;                //some other code...            }}

2. Add a new menu item. App \ shared \ layout \ side-bar.component.ts in front-end Angular solution (show side-bar.component.html file) Add the following code under the dashboard

　　new SideBarMenuItem("PhoneBook", null, "icon-notebook", "/app/main/phonebook")

3. Add code to src/***. core/Localization/AbpZeroTemplate. xml (default English font) in the background solution. If there is a corresponding Chinese name, you can add a Chinese name to the corresponding Chinese file. All unspecified languages are in English by default.

<text name="PhoneBook">Phone Book</text> 

4. Add route app \ main \ main-routing.module.ts in front Angular solution

{Path: 'dashboard', component: DashboardComponent, data: {permission: 'pages. Tenant. dashboard '}},

{Path: 'phonebook', component: PhoneBookComponent}

In this case, phoneBookComponent reports an error and ignores it.

5. Create a New phonebook folder in the Angular solution app/main and create the phonebookcocomponent. ts file. The Code is as follows:

import { Component, Injector } from '@angular/core';import { AppComponentBase } from '@shared/common/app-component-base';import { appModuleAnimation } from '@shared/animations/routerTransition';@Component({    templateUrl: './phonebook.component.html',    animations: [appModuleAnimation()]})export class PhoneBookComponent extends AppComponentBase {    constructor(        injector: Injector    ) {        super(injector);    }}

6. Solve the error in step 4. Add the import code in the main-routing.module.ts:

import { PhoneBookComponent } from './phonebook/phonebook.component';

 

7. Create a phonebook.component.html file in Angular solution app/main/phonebook. The Code is as follows:

<div [@routerTransition]>    <div class="row margin-bottom-5">        <div class="col-xs-12">            <div class="page-head">                <div class="page-title">                    
 
8. Add the following yellow code to the app/main. module. ts file of Angular solution.
import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { ModalModule, TabsModule, TooltipModule } from 'ng2-bootstrap';import { UtilsModule } from '@shared/utils/utils.module'import { AppCommonModule } from '@app/shared/common/app-common.module'import { MainRoutingModule } from './main-routing.module'import { MainComponent } from './main.component'import { DashboardComponent } from './dashboard/dashboard.component';import { PhoneBookComponent } from './phonebook/phonebook.component';@NgModule({    imports: [        BrowserModule,        CommonModule,        FormsModule,        ModalModule.forRoot(),        TabsModule.forRoot(),        TooltipModule.forRoot(),        UtilsModule,        AppCommonModule,        MainRoutingModule    ],    declarations: [        MainComponent,        DashboardComponent,        PhoneBookComponent    ]})export class MainModule { }
Refresh the front-end page and click phone book. The following page is displayed.

 
9. Create an object class person. Create the People folder in. Core in the background solution, and then create the following Person. cs class in the People folder.
using System.ComponentModel.DataAnnotations;using System.ComponentModel.DataAnnotations.Schema;using Abp.Domain.Entities.Auditing;namespace Acme.PhoneBook.People{    [Table("PbPersons")]    public class Person : FullAuditedEntity    {        public const int MaxNameLength = 32;        public const int MaxSurnameLength = 32;        public const int MaxEmailAddressLength = 255;        [Required]        [MaxLength(MaxNameLength)]        public virtual string Name { get; set; }        [Required]        [MaxLength(MaxSurnameLength)]        public virtual string Surname { get; set; }        [MaxLength(MaxEmailAddressLength)]        public virtual string EmailAddress { get; set; }    }}
 
10. Add the following yellow flag code to the *** DbContext. cs file in the. EntityFramework in the background solution.
public class ******DbContext : AbpZeroDbContext<Tenant, Role, User>{    public virtual IDbSet<Person> Persons { get; set; }            //...other code}
11. Use the code first migration function of EntityFramework to update the database to create the PdPersons table.
Locate the. EntityFramework folder in the windows command prompt command line tool. Enter "dotnet ef migrations add" Added_Persons_Table "and press Enter.
I reported an error when performing this step. The C: \ Program Files \ dotnet \ shared \ Microsoft. NETCore. App directory contains no version 1.1.0. I didn't install command line.
. Net core 1.1 sdk. Official website directly download can: https://www.microsoft.com/net/core#windowscmd. After installation, the database is successfully updated.
 
12. Create initial vertex data for the newly created PdPersons table.
Create the InitialPeopleCreator. cs class in the Migrations/seed/host in the. EntityFramework space of the background solution.

 
Class Code:
using System.Linq;using Acme.PhoneBook.EntityFramework;using Acme.PhoneBook.People;namespace Acme.PhoneBook.Migrations.Seed.Host{    public class InitialPeopleCreator    {        private readonly PhoneBookDbContext _context;        public InitialPeopleCreator(PhoneBookDbContext context)        {            _context = context;        }        public void Create()        {            var douglas = _context.Persons.FirstOrDefault(p => p.EmailAddress == "douglas.adams@fortytwo.com");            if (douglas == null)            {                _context.Persons.Add(                    new Person                    {                        Name = "Douglas",                        Surname = "Adams",                        EmailAddress = "douglas.adams@fortytwo.com"                    });            }            var asimov = _context.Persons.FirstOrDefault(p => p.EmailAddress == "isaac.asimov@foundation.org");            if (asimov == null)            {                _context.Persons.Add(                    new Person                    {                        Name = "Isaac",                        Surname = "Asimov",                        EmailAddress = "isaac.asimov@foundation.org"                    });            }        }    }}
 
 
13. Add the following yellow flag code to the InitialHostDbBuilder. cs class in the Migrations/seed/host in the. EntityFramework space.
public class InitialHostDbBuilder{    //existing codes...        public void Create()    {        //existing code...        new InitialPeopleCreator(_context).Create();        _context.SaveChanges();    }}
Then, execute the code "dotnet ef database update" in the command line. View the existing data in the PdPersons table.
14. Create a person application service-create an interface class.
 
 
Not complete...