在 ASP .NET Core 中的下拉列表中返回州和城市

Question

我在 ASP.NET Core 项目中创建了一个表单。现在我想添加一个下拉列表，用于在该表单上显示州和城市。

我创建一个模型并查看模型：

    [Required(ErrorMessage = "Required")]
    public string Title { get; set; }

    public long? ParentId { get; set; }

    public bool IsDeleted { get; set; }
    public bool IsActive { get; set; }

然后我编写了一些方法来在我的存储库和服务上访问它。

存储库：

public async Task<List<UserLocationViewModel>> GetStateForUserInfo()
{
    return await _context.Locations.Where(l => l.ParentId == null)
            .Select(l => new UserLocationViewModel()
            {
                Title = l.Title,
            }).ToListAsync();
}

public async Task<List<UserLocationViewModel>> GetCityForUserInfo(long locationId)
{
    return await _context.Locations.Where(l => l.ParentId == locationId)
            .Select(l => new UserLocationViewModel()
            {
                Title = l.Title,

            }).ToListAsync();
}

这就是服务：

public async Task<List<UserLocationViewModel>> GetStateForUserInfo()
{
    return await _packageRepository.GetStateForUserInfo();
}

public async Task<List<UserLocationViewModel>> GetCityForUserInfo(long locationId)
{
    return await _packageRepository.GetCityForUserInfo(locationId);
}

然后在控制器中，我调用这些方法并返回到带有视图数据的视图：

  ViewData["State"] = _packageService.GetStateForUserInfo();
     
  ViewData["City"] = _packageService.GetCityForUserInfo(packageId);

在视图中，我称之为：

@{
    ViewData["Title"] = _localizer["GetUserInfo"];
    IEnumerable<UserLocationViewModel> State = ViewData["State"] as IEnumerable<UserLocationViewModel>;
    IEnumerable<UserLocationViewModel> city = ViewData["City"] as IEnumerable<UserLocationViewModel>;
}

但是当我想在选择标签上访问它时，我无法访问我的属性：

<select asp-for= "?????" class="form-control">
</select>

更新：首先读取我的存储库以获取位置 ID，但出现错误。

然后在控制器中，我需要 id，所以我写：

var firstLocationId = state.FirstOrDefault()?.Id;
var city = await _packageService.GetCityForUserInfo(firstLocationId);

ViewData["City"] = new SelectList(city, "Title", "Title");

Answer 1

这是您可以遵循的示例：

型号：

public class UserLocationViewModel
{
    public string Title { get; set; }
    public string City { get; set; }     //if you do not need post selected city or state
    public string State { get; set; }   //it is no need add these two properties
}
public class Location
{
    public long Id { get; set; }
    public string Title { get; set; }
    public long? ParentId { get; set; }
    public bool IsDeleted { get; set; }
    public bool IsActive { get; set; }
}

查看：

对于

public SelectList(IEnumerable items, string dataValueField, string dataTextField);

，第一个参数是来源，第二个参数是select中的每个选项值，第三个参数是每个选项在html中显示的文本。

@model UserLocationViewModel
@{
    IEnumerable<UserLocationViewModel> State = ViewData["State"] as IEnumerable<UserLocationViewModel>;
    IEnumerable<UserLocationViewModel> city = ViewData["City"] as IEnumerable<UserLocationViewModel>;
}

<select asp-items="@(new SelectList(State,"Title","Title"))" class="form-control">
</select>

<select  asp-items="@(new SelectList(city,"Title","Title"))" class="form-control">
</select>

控制器：

[HttpGet]
public async Task<IActionResult> Index()
{
    ViewData["State"] = _packageService.GetStateForUserInfo();    
    ViewData["City"] = _packageService.GetCityForUserInfo(packageId);
    return View();
}

如果您想将选定的城市或州发布到控制器：

索引.cshtml：

asp-for

中的映射属性应与

dataValueField

（此处为

Title

）相同类型。

@model UserLocationViewModel
@{
    IEnumerable<UserLocationViewModel> State = ViewData["State"] as IEnumerable<UserLocationViewModel>;
    IEnumerable<UserLocationViewModel> city = ViewData["City"] as IEnumerable<UserLocationViewModel>;
}
<form method="post">
    <select asp-for="State" asp-items="@(new SelectList(State,"Title","Title"))" class="form-control">
    </select>

    <select asp-for="City" asp-items="@(new SelectList(city,"Title","Title"))" class="form-control">
    </select>
    <input type="submit" value="Post" />
</form>

控制器：

[HttpGet]
public async Task<IActionResult> Index()
{
    ViewData["State"] = _packageService.GetStateForUserInfo();     
    ViewData["City"] = _packageService.GetCityForUserInfo(packageId);
    return View();
}
[HttpPost]
public IActionResult Index(UserLocationViewModel model)
{
    return View();
}

结果：

---

更新：

下拉列表的两种显示方式：

第一个：

ViewData["State"] = new List<SelectListItem>
{
    new SelectListItem{Text = "Value1", Value = "1"},
    new SelectListItem{Text = "Value2", Value = "2"},
    new SelectListItem{Text = "Value3", Value = "3"},
    new SelectListItem{Text = "Value4", Value = "4"}
}

剃须刀视图：

<select asp-items="(IEnumerable<SelectListItem>)@ViewData["State"]" class="form-control">
</select>

第二个：

ViewData["State"] = await Locations.Where(l => l.ParentId == null)
                                    .Select(l => new UserLocationViewModel()
                                    {
                                        Title = l.Title,

                                    }).ToListAsync();

剃须刀视图：

@{
IEnumerable<UserLocationViewModel> State = ViewData["State"] as IEnumerable<UserLocationViewModel>;   
 }
<select asp-items="@(new SelectList(State,"Title","Title"))" class="form-control">
</select>