Asp Core Filter & Search Data Using Drop Downs & Search Bars

Question

I would like users to search through pets using a search bar or drop down lists. I tried using viewbag and asp tag helpers but I keep getting errors. Below is a picture of what i'm going for. Any help is appreciated.

Model

public class Reptile
{
    public int ReptileId { get; set; }
    public string Name { get; set; }
    public string Age { get; set; }
    [Display(Name ="Reptile's Image")]
    public byte[] Image { get; set; }
    [Display(Name ="Food Requirements")]
    public string FoodReq { get; set; }
    [Display(Name="Habitat Requiremtns")]
    public string HabitatReq { get; set; }
    public string Gender { get; set; }
    public string Type { get; set; }
    public string Size { get; set; }
    public string Color { get; set; }
    [Display(Name="Recent Checkup")]
    public bool RecentCheckup { get; set; }
    public bool Trained { get; set; }
    public bool Neutered { get; set; }
    public bool Declawed { get; set; }
    [Display(Name = "Good With Other Reptiles")]
    public bool GoodWithRept { get; set; }
    [Display(Name = "Good With Kids")]
    public bool GoodWithKids { get; set; }



    public ApplicationUser ApplicationUser { get; set; }

    public int ApplicationUserId { get; set; }



}

Controller

     public async Task<IActionResult> Index(string searchString)
    {

        var reptiles = from r in _context.Reptiles
                       select r;

        if (!string.IsNullOrEmpty(searchString))
        {
            reptiles = reptiles.Where(r => r.Type.Contains(searchString));
                                 
        }

        return View(await reptiles.ToListAsync());
    }

View

                <form asp-controller="Reptiles" asp-action="Index" method="get">
        <div class="form-actions no-color">
            <p>
                Search By Type: <input type="text" name="SearchString" />
                <input  type="submit" value="Filter" class="btn btn-default" /> |
                <a asp-action="Index">Back to Full List</a>
            </p>
        </div>
    </form>

I've been trying to follow the docs here Tutorial: Add sorting, filtering, and paging - ASP.NET MVC with EF Core. Not having any luck though.

Answer 1

Okay, I figured out how to use select to filter the reptile page by using the data users already added to the database from the properties in the model. I had to create a view model and add the Reptile model to it.

View Model

public class ReptileGenderViewModel
{
    public Reptile Reptile { get; set; }
    public List<Reptile> reptiles;
    public SelectList genders;
    public string reptileGender { get; set; }
}

Reptile Controller

 public async Task<IActionResult> Index(string searchString, string reptileGender)
    {
        IQueryable<string> genderQuery = from g in _context.Reptiles
                                        orderby g.Gender
                                        select g.Gender;


        var reptiles = from r in _context.Reptiles
                       select r;

        if (!string.IsNullOrEmpty(searchString))
        {
            reptiles = reptiles.Where(r => r.Type.Contains(searchString));
                                 
        }

        if (!string.IsNullOrEmpty(reptileGender))
        {
            reptiles = reptiles.Where(g => g.Gender == reptileGender);
        }

        var reptileGenderVM = new ReptileGenderViewModel();
        reptileGenderVM.genders = new SelectList(await genderQuery.Distinct().ToListAsync());
        reptileGenderVM.reptiles = await reptiles.ToListAsync();

        return View(reptileGenderVM);

    }

View

<select asp-for="reptileGender" asp-items="Model.genders">
      <option value="">All</option>
</select>

Answer 2

Here is a simple demo to show how to use searchstring:

Controller:

public IActionResult Index(string searchString)
        {
            IEnumerable<Reptile> list = new List<Reptile> { new Reptile { Type = "t1", Name= "Reptile1" }, new Reptile { Type = "t2", Name = "Reptile2" }, new Reptile { Type = "t3", Name = "Reptile3" } };
            ViewData["CurrentFilter"] = searchString;
            if (!String.IsNullOrEmpty(searchString))
            {
                list = list.Where(s => s.Name.Contains(searchString));
            }
            return View(list);
        }

View:

Find by name: | Back to Full List

<table>
    <thead>
        <tr>
            <th>
               @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Type)
            </th>
           
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    <input type="text" asp-for="@item.Type">
                </td>
            </tr>

        }
    </tbody>
    
</table>

result: