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>
我目前单独显示每个类别,但我希望能够一起查看它们。
在屏幕截图中,我分别显示了每个类别,但我想添加另一个所有选项,它将显示所有类别中的所有动物
我的存储库:
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>