Blazor를 사용하여 소프트웨어 설문 조사 작성 - 2부 - 더 나은 상태

Blazor를 사용하여 소규모 설문조사 사이트를 작성하기로 결정했습니다. 이것의 일부는 Blazor를 배우기 위한 변명입니다.

Blazor로 배우면서 일련의 기사로 블로그에 올릴 것입니다.

이 일련의 기사는 Blazor에 대한 교육 과정이 아니라 제품 사용 방법을 배우면서 생각하는 과정입니다.

이 시리즈의 이전 기사:

Part 1 - State

지난 기사에서

1부에서 다음 설정(Dotnet Core Dependency Injection 활용)을 사용하여 상태를 관리했습니다.

StateService.cs - 간단한 서비스

using SoftwareSurvey.Models;
using System.Collections.Generic;
using System.Linq;

namespace SoftwareSurvey.Services
{
    public class StateService : IStateService
    {
        private readonly List<IStateObject> _stateObjects = new List<IStateObject>();

        public T GetOrNew<T>() where T : IStateObject, new()
        {
            var state = Get<T>();

            return state ?? new T();
        }

        public void Save<T>(T state) where T : IStateObject
        {
            var existingState = Get<T>();

            if (existingState != null)
            {
                _stateObjects.Remove(existingState);
            }

            _stateObjects.Add(state);
        }

        private T Get<T>() where T : IStateObject
        {
            return _stateObjects.OfType<T>().FirstOrDefault();
        }
    }
}

Demographic.cs - 상태를 유지할 개체

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace SoftwareSurvey.Models
{
    public class Demographic: IStateObject
    {
        [Required(ErrorMessage = "Please provide company size")]
        [DisplayName("Company Size")]
        public string CompanySize { get; set; }

        [Required(ErrorMessage = "Please provide your job seniority")]
        [DisplayName("Job Seniority")]
        public string JobSeniority { get; set; }

        [DisplayName("Job Title (optional)")]
        public string JobTitle { get; set; }
    }
}

Startup.cs - 종속성 주입 설정

public void ConfigureServices(IServiceCollection services)
{
  ...

  services.AddScoped<IStateService, StateService>();
}

Demographics.razor - 상태 액세스 및 사용

@code {
    protected Models.Demographic Model;

    [Inject]
    protected SoftwareSurvey.Services.IStateService _stateService { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Model = _stateService.GetOrNew<Models.Demographic>();
    }

    protected void HandleValidSubmit()
    {
        _stateService.Save(Model);

        // Do something
    }
}

하루가 만드는 차이

마지막 기사 이후로 꽤 시간이 흘렀지만 기사를 게시한 후 이 기사를 더 깔끔하게 만들고 훨씬 더 간단하게 만들 수 있다는 것을 아주 빨리 깨달았습니다.

나는 다양한 유형의 상태 객체를 허용하는 서비스를 가지고 있기 때문에 일을 너무 복잡하게 만들었습니다. 나중에 필요할 것 같아서 시스템에 불필요한 복잡성을 추가했습니다.

그래서 대신에 다음과 같이 단순화했습니다.

SurveyResponse.cs - 상위 상태 개체

using Newtonsoft.Json;

namespace SoftwareSurvey.Models
{
    public class SurveyResponse
    {
        public SurveyResponse()
        {
            Demographic = new Demographic();

            // Other setup
        }

        [JsonProperty(PropertyName = "demographic")]
        public Demographic Demographic { get; set; }

        // Other properties
   }
}

Demographic.cs - 상태를 유지할 개체(변경되지 않음)

using Newtonsoft.Json;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace SoftwareSurvey.Models
{
    public class Demographic
    {
        [Required(ErrorMessage = "Please provide company size")]
        [DisplayName("Company Size")]
        [JsonProperty(PropertyName = "companySize")]
        public string CompanySize { get; set; }

        [Required(ErrorMessage = "Please provide your job seniority")]
        [DisplayName("Job Seniority")]
        [JsonProperty(PropertyName = "jobSeniority")]
        public string JobSeniority { get; set; }

        [DisplayName("Job Title (optional)")]
        [JsonProperty(PropertyName = "jobTitle")]
        public string JobTitle { get; set; }
    }
}

Startup.cs - 종속성 주입 설정

services.AddScoped(x => new SurveyResponse());
services.AddTransient(provider =>
    providerGetService<SurveyResponse>().Demographic);

Demographics.razor - 상태 액세스 및 사용

@code
{
    [Inject]
    private Models.Demographic Model { get; set; }
}

요약으로

주요 차이점은 상태를 반환하는 서비스를 제공하는 대신 종속성 주입을 사용하여 상태 모델을 직접 제공한다는 것입니다.

따라서 Demographics.razor 페이지 내에서 단순화 - 모델을 가져오는 방법에 대한 지식이 필요하지 않습니다. 바로 삽입됩니다. 어쨌든 더 깔끔한 코드입니다.

종속성 주입은 SurveyResponse의 범위가 지정된 인스턴스(궁극적으로 내가 유지하는 것)를 설정한 다음 관련 상태 개체에 대한 일시적인 액세스를 제공합니다.

페이지당 기본적으로 상태 개체를 만들고 SurveyResponse에 추가한 다음 종속성 주입을 통해 사용 가능하게 만듭니다.

SurveyResponse가 "범위 지정"되면 연결별로 고유합니다. 지난 게시물에서 배운 트릭입니다. SurveyResponse 내의 "상태 개체"에 대한 종속성 설정은 해당 "범위 지정"인스턴스에 대한 참조를 반환하므로 일시적일 수 있습니다.

나에게 이것은 상태 관리를 조금 더 깔끔하게 만들었습니다.