ASP.NET MVC：下拉列表显示所有内容，也单独显示

Question

我目前单独显示每个类别，但我想使所有类别一起查看它们。

在屏幕截图中，我分别显示每个类别我所有类别中的所有动物

我的存储库：

public async Task<IEnumerable<Animal>> SelectAnimalsById(int id)
{
    var animal = _context.Animals
                         .Include(a => a.Category)
                         .Where(c => c.Category!.CategoryId == id);
    return await animal.ToListAsync();
}

public DbSet<Category> GetCategories()
{
    var category = _context.Categories;
    return category;
}

我的控制器

// Displays the animals by category using the Selectlist
public async Task<IActionResult> Commands(int id = 1) 
{
    var petShopDbContext = await _animalRepository.SelectAnimalsById(id);
    ViewBag.Category = new SelectList(_catalogRepository.GetCategories(), "CategoryId", "Name", id);
    return View(petShopDbContext);
}

：我的

@model IList<PetShop.Data.Models.Animal>

<label>Please select a category:</label>
<select asp-items="ViewBag.Category" onchange="location.href='/Admin/Commands/'+this.value" id="DesignSelect"></select>

<table id="Table">
<thead>
    <tr>
        <th><label asp-for="@Model[0].PhotoUrl"></label></th>
        <th><label asp-for="@Model[0].Name"></label></th>
        <th><label asp-for="@Model[0].Category.Name"></label></th>
        <th><label asp-for="@Model[0].Description"></label></th>
        <th><label asp-for="@Model[0].BirthDate"></label></th>
        <th>Edit Animal</th>
        <th>Delete Animal</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model!) {
    <tr>
       <td><img src="~/Images/@item.PhotoUrl" id="ManagerImage"></td>
       <td>@item.Name</td>
       <td>@item.Category!.Name</td>
       <td>@item.Description</td>
       <td>@Html.DisplayFor(model => item.BirthDate)</td>
       <td><a asp-action="EditAnimal" asp-route-id="@item.AnimalId"><input type="submit" value="Edit" id="DesignButton"></a></td>
       <td><a asp-action="DeleteAnimal" asp-route-id="@item.AnimalId"><input type="submit" value="Delete" id="DesignButton"></a></td>
    </tr>
    }
</tbody>
</table>

视图：

Answer 1

一种方法是您可以在存储库中更改代码如下：

public async Task<IEnumerable<Animal>> SelectAnimalsById(int id)
{
    List<Animal> data= new List<Animal>();
    var animal = _context.Animal
                        .Include(a => a.Category);
    if (id != 0)
    {
        data= await animal.Where(c => c.Category!.CategoryId == id).ToListAsync();
    }
    else
    {
        data= await animal.ToListAsync();
    }
    return data;
}

另一种方式是您可以更改 action 如下所示：

public async Task<IActionResult> Commands(int id = 1)
{
    //add this condition
    //if id=0, return all the animals with all the categories
    if(id==0)
    {
        return View(_context.Animal.Include(a => a.Category).ToList());
    }     

    //keep the same.....   
    var petShopDbContext = await _animalRepository.SelectAnimalsById(id);;
    ViewBag.Category = new SelectList(_catalogRepository.GetCategories(), "CategoryId", "Name", id);
    return View(petShopDbContext);
}

然后将您的视图更改为以下：

<select asp-items="ViewBag.Category" onchange="location.href='/Admin/Commands/'+this.value" id="DesignSelect">
    <option value="0">ALL</option>     //add this option
</select>

Answer 2

您可以在存储库中的有条件添加Where子句...

var animal = _context.Animals
                         .Include(a => a.Category);

if(id != 0)
{
  animal.Where(c => c.Category!.CategoryId == id);
}

return await animal.ToListAsync();