ASP.NET 核心 - Controller 无法将字段识别为枚举

Question

很直接的问题。 Angular 12 + ASP.NET 核心 6 和以下端点说CreateRoomCommand是null ，因为它不能隐式地将房间类型转换为枚举房间类型。

这是来自前端的请求。

ValueKind = Object: "{"name":"876","roomType":"1","seats":"65","department":{"id":2,"shortName":"МТМ"," fullName":"Материалознание и технология на материалите"}}"

这意味着 RoomType 实际上是一个字符串，而不是 integer，这就是为什么它不能隐式转换它的原因。

如果我将 RoomType 更改为 string 然后RoomType = (RoomType)Convert.ToInt32(request.RoomType) ，它可以工作，但看起来很糟糕。 有更好的解决方法吗？

[HttpPost]
public async Task<ActionResult<int>> Create(CreateRoomCommand command)
{
    return await Mediator.Send(command).ConfigureAwait(false);
}

public enum RoomType
{
    LectureHall = 1,
    SeminarHall = 2,
    LaboratoryHall = 3,
    ComputerHall = 4,
    Other = 5
}

public class CreateRoomCommand : IRequest<int>
{
    public string Name { get; set; }
    public RoomType RoomType { get; set; }
    public int Seats { get; set; }
    public DepartmentDto Department { get; set; }
}

public class DepartmentDto : IMapFrom<Department>
{
    public int Id { get; set; }

    public string ShortName { get; set; }

    public string FullName { get; set; }
}

import { Department } from './department';

export enum RoomType {
  LectureHall = 1,
  SeminarHall = 2,
  LaboratoryHall = 3,
  ComputerHall = 4,
  Other = 5
}

export const RoomDescription: Record<RoomType, string> = {
  [RoomType.LectureHall]: 'Лекционни зали',
  [RoomType.SeminarHall]: 'Семинарни зали',
  [RoomType.LaboratoryHall]: 'Лабораторни зали',
  [RoomType.ComputerHall]: 'Компютърни зали',
  [RoomType.Other]: 'Други зали'
};

export const roomTypes = Object.entries(RoomDescription).map(([k, v]) => ({ key: k, value: v }));

export interface Room {
  id?: number;
  name?: string;
  roomType?: RoomType;
  seats?: number;
  department?: Department;
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { environment } from '@env';
import { Room } from '@core/types';

@Injectable({
  providedIn: 'root'
})
export class RoomService {
  private actionUrl: string;

  constructor(private httpClient: HttpClient) {
    this.actionUrl = `${environment.apiUrl}/Rooms`;
  }

  getAllRooms() {
    return this.httpClient.get<Room[]>(this.actionUrl);
  }

  getRoomById(id: number) {
    return this.httpClient.get<Room>(`${this.actionUrl}/${id}`);
  }

  addRoom(room: Room) {
    console.log(room);

    return this.httpClient.post<Room>(this.actionUrl, room);
  }

  updateRoom(room: Room) {
    return this.httpClient.put<Room>(`${this.actionUrl}/${room.id}`, room);
  }

  deleteRoom(ids: number[]) {
    return this.httpClient.delete(`${this.actionUrl}?id=${ids.toString()}`);
  }
}

编辑：

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { finalize, Observable, Subject, takeUntil } from 'rxjs';

import { Department, Room, RoomDescription, RoomType, roomTypes } from '@core/types';
import { RoomService } from './room.service';
import { ConfirmationService, MessageService, PrimeNGConfig } from 'primeng/api';
import { BreadcrumbService } from '@core/services';
import { Table } from 'primeng/table';
import { mapIdProperties } from '@shared/utils';
import { DepartmentService } from './department.service';

@Component({
  selector: 'app-rooms',
  templateUrl: './rooms.component.html'
})
export class RoomsComponent implements OnInit, OnDestroy {
  roomDialog: boolean;
  rooms: Room[];
  room: Room;
  selectedRooms: Room[];
  submitted: boolean;
  loading: boolean = true;
  roomTypes = roomTypes;

  departments: Department[] = [];

  private allRooms$: Observable<Room[]>;
  private componentDestroyed$ = new Subject<boolean>();

  @ViewChild('dt') table: Table;

  constructor(
    private roomService: RoomService,
    private departmentService: DepartmentService,
    private messageService: MessageService,
    private confirmationService: ConfirmationService,
    private breadcrumbService: BreadcrumbService,
    private primengConfig: PrimeNGConfig
  ) {
    this.breadcrumbService.setItems([{ label: 'Зали' }]);

    this.initRoomList();
  }

  ngOnInit(): void {
    this.allRooms$.pipe(takeUntil(this.componentDestroyed$)).subscribe((data) => {
      this.rooms = data;
      this.loading = false;
    });

    this.departmentService
      .getAllDepartments()
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe((values: Department[]) => {
        this.departments = values;
      });

    this.primengConfig.ripple = true;
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next(true);
    this.componentDestroyed$.complete();
  }

  getRoomType(roomType: RoomType) {
    return RoomDescription[roomType];
  }

  applyFilterGlobal($event: any) {
    this.table.filterGlobal(($event.target as HTMLInputElement).value, 'contains');
  }

  openNew() {
    this.room = {};
    this.submitted = false;
    this.roomDialog = true;
  }

  deleteSelectedRooms() {
    this.confirmationService.confirm({
      message: 'Сигурни ли сте, че искате да изтриете данните за избраните зали?',
      header: 'Потвърждение',
      icon: 'pi pi-exclamation-triangle',
      acceptLabel: 'Да',
      rejectLabel: 'Не',
      accept: () => {
        this.roomService
          .deleteRoom(mapIdProperties<Room>(this.selectedRooms))
          .pipe(takeUntil(this.componentDestroyed$))
          .subscribe(() => {
            this.messageService.add({
              severity: 'success',
              summary: 'Успешно',
              detail: 'Данните за залите са изтрити',
              life: 3000
            });
            this.loading = true;
            this.selectedRooms = [];

            return this.initRoomList();
          });
      }
    });
  }

  editRoom(room: Room) {
    this.room = { ...room };
    this.roomDialog = true;
  }

  deleteRoom(room: Room) {
    this.confirmationService.confirm({
      message: 'Сигурни ли сте, че искате да изтриете данните за зала ' + room.name + '?',
      header: 'Потвърждение',
      icon: 'pi pi-exclamation-triangle',
      acceptLabel: 'Да',
      rejectLabel: 'Не',
      accept: () => {
        if (room.id) {
          this.roomService
            .deleteRoom([room.id])
            .pipe(takeUntil(this.componentDestroyed$))
            .subscribe(() => {
              this.room = {};
              this.messageService.add({
                severity: 'success',
                summary: 'Успешно',
                detail: 'Данните за залата са изтрити',
                life: 3000
              });
              this.loading = true;

              return this.initRoomList();
            });
        }
      }
    });
  }

  hideDialog() {
    this.roomDialog = false;
    this.submitted = false;
  }

  saveRoom() {
    this.submitted = true;

    if (this.room.name?.trim()) {
      if (this.room.id) {
        this.roomService
          .updateRoom(this.room)
          .pipe(takeUntil(this.componentDestroyed$))
          .subscribe(() => {
            this.messageService.add({
              severity: 'success',
              summary: 'Успешно',
              detail: 'Данните за залата са обновени',
              life: 3000
            });
            this.loading = true;

            return this.initRoomList();
          });
      } else {
        this.roomService
          .addRoom(this.room)
          .pipe(
            takeUntil(this.componentDestroyed$),
            finalize(() => (this.loading = false))
          )
          .subscribe(() => {
            this.messageService.add({
              severity: 'success',
              summary: 'Успешно',
              detail: 'Залата е добавена',
              life: 3000
            });
            this.loading = true;

            return this.initRoomList();
          });
      }

      this.hideDialog();
      this.room = {};
    }
  }

  private initRoomList(): void {
    this.allRooms$ = this.roomService.getAllRooms();
  }
}

<div class="p-grid">
  <div class="p-col-12">
    <p-toast></p-toast>

    <div class="card">
      <p-toolbar styleClass="p-mb-4">
        <ng-template pTemplate="left">
          <button
            pButton
            pRipple
            label="Добавяне"
            icon="pi pi-plus"
            class="p-button-success p-mr-2 p-mb-2"
            (click)="openNew()"
          ></button>
          <button
            pButton
            pRipple
            label="Изтриване"
            icon="pi pi-trash"
            class="p-button-danger p-mb-2"
            (click)="deleteSelectedRooms()"
            [disabled]="!selectedRooms || !selectedRooms.length"
          ></button>
        </ng-template>
      </p-toolbar>

      <p-table
        #dt
        [value]="rooms"
        [(selection)]="selectedRooms"
        dataKey="id"
        styleClass="p-datatable-rooms"
        [rowHover]="true"
        [rows]="10"
        [showCurrentPageReport]="true"
        [rowsPerPageOptions]="[10, 25, 50]"
        [loading]="loading"
        [paginator]="true"
        currentPageReportTemplate="Показват се от {first} до {last} от общо {totalRecords} записа"
        [globalFilterFields]="['name', 'roomType', 'seats', 'departmentId']"
      >
        <ng-template pTemplate="caption">
          <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header">
            <h5 class="p-m-0">Зали</h5>
            <span class="p-input-icon-left">
              <i class="pi pi-search"></i>
              <input
                pInputText
                type="text"
                (input)="applyFilterGlobal($event)"
                placeholder="Търсене..."
              />
            </span>
          </div>
        </ng-template>
        <ng-template pTemplate="header">
          <tr>
            <th style="width: 3rem">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th pSortableColumn="name">Зала <p-sortIcon field="name"></p-sortIcon></th>
            <th pSortableColumn="roomType">Тип <p-sortIcon field="roomType"></p-sortIcon></th>
            <th pSortableColumn="seats">Места <p-sortIcon field="seats"></p-sortIcon></th>
            <th pSortableColumn="departmentId">
              Катедра <p-sortIcon field="departmentId"></p-sortIcon>
            </th>
            <th></th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-room>
          <tr>
            <td>
              <p-tableCheckbox [value]="room"></p-tableCheckbox>
            </td>
            <td>
              {{ room.name }}
            </td>
            <td>
              {{ getRoomType(room.roomType) }}
            </td>
            <td>
              {{ room.seats }}
            </td>
            <td>
              {{ room.department.shortName }}
            </td>
            <td>
              <button
                pButton
                pRipple
                icon="pi pi-pencil"
                class="p-button-rounded p-button-success p-mr-2"
                (click)="editRoom(room)"
              ></button>
              <button
                pButton
                pRipple
                icon="pi pi-trash"
                class="p-button-rounded p-button-warning"
                (click)="deleteRoom(room)"
              ></button>
            </td>
          </tr>
        </ng-template>
        <ng-template pTemplate="summary">
          <div class="p-d-flex p-ai-center p-jc-between">
            Общо {{ rooms ? rooms.length : 0 }} зали.
          </div>
        </ng-template>
      </p-table>
    </div>

    <p-dialog
      [(visible)]="roomDialog"
      [style]="{ width: '450px' }"
      header="Данни за зала"
      [modal]="true"
      styleClass="p-fluid"
    >
      <ng-template pTemplate="content">
        <div class="p-field">
          <label for="name">Зала</label>
          <input
            #name="ngModel"
            id="name"
            type="text"
            pInputText
            [(ngModel)]="room.name"
            [ngClass]="{
              'ng-dirty': (name.invalid && submitted) || (name.dirty && name.invalid)
            }"
            required
            autofocus
          />
          <small class="p-error" *ngIf="(name.invalid && submitted) || (name.dirty && name.invalid)"
            >Залата е задължителна.</small
          >
        </div>
        <div class="p-field">
          <label for="roomType">Тип</label>
          <p-dropdown
            #roomType="ngModel"
            [options]="roomTypes"
            [(ngModel)]="room.roomType"
            optionLabel="value"
            optionValue="key"
            placeholder="Избери тип"
            [required]="true"
            [ngClass]="{
              'ng-dirty': (roomType.invalid && submitted) || (roomType.dirty && roomType.invalid)
            }"
            appendTo="body"
          ></p-dropdown>
          <small
            class="p-error"
            *ngIf="(roomType.invalid && submitted) || (roomType.dirty && roomType.invalid)"
            >Типът е задължителен.</small
          >
        </div>
        <div class="p-field">
          <label for="seats">Места за сядане</label>
          <input
            #seats="ngModel"
            id="seats"
            type="text"
            pInputText
            [(ngModel)]="room.seats"
            [ngClass]="{
              'ng-dirty': (seats.invalid && submitted) || (seats.dirty && seats.invalid)
            }"
            required
          />
          <small
            class="p-error"
            *ngIf="(seats.invalid && submitted) || (seats.dirty && seats.invalid)"
            >Местата за сядане е задължително поле.</small
          >
        </div>
        <div class="p-field">
          <label for="department">Катедра</label>
          <p-dropdown
            #department="ngModel"
            [options]="departments"
            [(ngModel)]="room.department"
            [showClear]="true"
            optionLabel="shortName"
            placeholder="Избери катедра"
            [required]="true"
            appendTo="body"
          ></p-dropdown>
          <small
            class="p-error"
            *ngIf="(department.invalid && submitted) || (department.dirty && department.invalid)"
            >Катедрата е задължително поле.</small
          >
        </div>
      </ng-template>

      <ng-template pTemplate="footer">
        <button
          pButton
          pRipple
          label="Отказ"
          icon="pi pi-times"
          class="p-button-text"
          (click)="hideDialog()"
        ></button>
        <button
          pButton
          pRipple
          label="Запази"
          icon="pi pi-check"
          class="p-button-text"
          (click)="saveRoom()"
        ></button>
      </ng-template>
    </p-dialog>

    <p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
  </div>
</div>