ASP.NET MVC:下拉列表显示所有内容并单独显示

ASP.NET MVC: drop down list display everything and also display alone

我目前单独显示每个类别,但我希望能够一起查看它们。

在屏幕截图中,我分别显示了每个类别,但我想添加另一个所有选项,它将显示所有类别中的所有动物

我的存储库:

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>

图片:

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

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

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

return await animal.ToListAsync();

一种方法是您可以在存储库中更改您的代码,如下所示:

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>