在 Net Core 2.0 中使用 Razor 填充下拉列表

Question

我对 MVVC 和 netcore 上的整个堆栈完全陌生。

我有一个包含文本输入的表单，还有一个需要填充的 3 个选择下拉列表，以便将信息保存在数据库的另一个表中。我被困在这个确切的部分，因为我不知道如何调用数据然后将其放入选择中。表单的一般思想是用户输入他的信息，然后从选择中选择一些数据，一旦他完成，信息就会被发送，然后保存在数据库中的一个表中。

我目前有这个模型用于我的汽车表格

using System;
namespace forms.Models
{
    public class CarQuote
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Brand { get; set; }
        public string Model { get; set; }
        public string Year { get; set; }
        public string Version { get; set; }
        public string State { get; set; }
        public int ZipCode { get; set; }
    }
}

在我的 UI 中选择了品牌、型号、年份和版本，这 4 个值需要填写从我的 Cars 表中获取信息，我创建了一个类来获取信息，但如果是正确的方法，我不这样做。

using System;
namespace forms.Models
{
    public class Cars
    {
        public string Brand { get; set; }
        public string Model { get; set; }
        public string Version { get; set; }
        public string Year { get; set; }
    }
}

这也是我的汽车报价表单的 Create.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using soofiforms.Models;

namespace forms.Pages.Car
{
    public class CreateModel : PageModel
    {
        private readonly soofiforms.Models.ModelContext _context;

        public CreateModel(soofiforms.Models.ModelContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            return Page();
        }

        [BindProperty]
        public CarQuote CarQuote { get; set; }
        public Cars Cars { get; set; }

        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.CarQuotes.Add(CarQuote);
            await _context.SaveChangesAsync();

            return RedirectToPage("./Index");
        }
    }
}

如何将我的 Cars 表连接到我的 CarsQuote 表单，以便填充我的选择？给您带来的不便，感谢并抱歉。

Answer 1

一般来说，最好的方法是在你的视图模型上设置它。换句话说，添加如下属性：

public IEnumerable<SelectListItem> BrandOptions { get; set; }

然后，在您的控制器中，添加一个私有方法来填充这些选项列表：

private Task PopulateOptionsAsync(CarQuote model)
{
    model.BrandOptions = await _context.Brands.Select(x => new SelectListItem
    {
        Value = x.Id.ToString(),
        Text = x.Name
    }).ToListAsync();

    // etc
}

在将模型返回到视图之前，在您的操作中调用它。最好作为私有方法，这样您就可以在操作的 GET 和 POST 版本之间共享它。那么，最后，在你看来：

<select asp-for="Brand" asp-items="@Model.BrandOptions"></select>

另一种方法是将视图注入与自定义服务一起使用。我个人不喜欢将这样的逻辑添加到视图中，但 Microsoft 确实将其作为一种可能的选择。基本上，您只需创建一个服务类，该类具有返回您的选项的方法：

public class CarQuoteOptionsService
{
    private readonly ModelsContext _context;

    public CarQuoteOptionsService(ModelsContext context)
    {
        _context = context ?? throw new ArgumentNullException(nameof(context));
    }

    public Task<List<SelectListItem>> GetBrandOptionsAsync =>
        _context.Brands.Select(x => new SelectListItem
        {
            Value = x.Id.ToString(),
            Text = x.Name
        }).ToListAsync();

    // etc
}

然后在ConfigureServices注册：

services.AddScoped<CarQuoteOptionsService>();

最后，将其注入你的控制器并随意使用：

@inject CarQuoteOptionsService OptionsService

...

<select asp-for="Brand" asp-items="@(await OptionsService.GetBrandOptionsAsync())"></select>