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

Question

我在我的 Asp.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>