在 ASP.NET Core MVC 中，如何在表中搜索<select>中的一個<th>作為過濾器並在提交后保持選擇的選項？

Question

我在這里檢查了類似的問題，但找不到任何適用於我的問題的問題。

我正在嘗試一些基於 ASP.NET Core MVC 文檔中的教程的代碼。

我有一個表格，顯示我的數據庫中的學生列表，有兩列： FirstName和LastName 。

使用任一列的<input type="text">搜索都可以正常工作。 我只需要在<select>中選擇FirstName或LastName 。

唯一的問題是提交搜索后，我不知道如何在<select>中繼續顯示所選選項。

我的視圖和控制器如下：

@model IEnumerable<Student>

<h1>Students list</h1>

<form asp-action="Index" method="get">
    <div>
        <p>
            Filter by
            <select name="chosenFilter">
                <option value="firstName">@Html.DisplayNameFor(model => model.FirstName)</option>
                <option value="lastName">@Html.DisplayNameFor(model => model.LastName)</option>
            </select>

            <input type="text" name="searchString" value="@ViewData["SearchString"]" />

            <input type="submit" value="Search" />
        </p>
    </div>
</form>

<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.FirstName)</th>
            <th>@Html.DisplayNameFor(model => model.LastName)</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                <td>@Html.DisplayFor(modelItem => item.LastName)</td>
            </tr>
        }
    </tbody>
</table>

首頁控制器 > 索引：

public IActionResult Index(string searchString, string chosenFilter)
{
    IQueryable<Student> students = _context.Student;

    if (!String.IsNullOrEmpty(searchString))
    {
        switch (chosenFilter)
        {
            case "firstName":
                students = students.Where(s => s.FirstName.Contains(searchString));
                break;

            case "lastName":
                students = students.Where(s => s.LastName.Contains(searchString));
                break;
        }
    }

    ViewData["SearchString"] = searchString;

    return View(students);
}

Answer 1

我自己搞定的！ 所以我在這里分享。 也許它不是最佳的，但它對我有用。

檢查並嘗試“選擇標簽助手”文檔后...

（見： 這個鏈接）

...我發現了它的工作原理並在我的代碼中實現了它。

該解決方案涉及不在 View 中列出選擇選項，而是在 ViewModel 中列出。 因此，選擇標簽助手可以使用它為選擇選項生成 html，其中您希望根據控制器中的條件選擇一個。

（實際上，我也借此機會將我的學生列表和 searchString 添加到 ViewModel）。 遵循新代碼。

視圖模型：

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace TestApplication.Models.ViewModels
{
    public class StudentViewModel
    {
        public IEnumerable<Student> Students { get; set; }

        public string SearchString { get; set; }

        public string Filter { get; set; }

        public List<SelectListItem> Columns { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "firstName", Text = "First Name"},
            new SelectListItem { Value = "lastName", Text = "Last Name"},
        };
    }
}

索引操作：

public IActionResult Index(string searchString, string chosenFilter)
        {
            var viewModel = new StudentViewModel();

            IQueryable<Student> students = _context.Student;

            if (!String.IsNullOrEmpty(searchString))
            {
                switch (chosenFilter)
                {
                    case "firstName":
                        viewModel.Filter = "firstName";
                        students = students.Where(s => s.FirstName.Contains(searchString));
                        break;
                    case "lastName":
                        viewModel.Filter = "lastName";
                        students = students.Where(s => s.LastName.Contains(searchString));
                        break;
                }
            }

            viewModel.Students = students;

            //ViewData["SearchString"] = searchString;
            viewModel.SearchString = searchString;

            //return View(student)
            return View(viewModel);
        }

看法：

    @model TestApplication.Models.ViewModels.StudentViewModel
    
    @{
        ViewData["Title"] = "Students";
    }
    
    <h1>Students list</h1>
    
    <form asp-action="Index" method="get">
        <div>
            <p>
                Filter by <select name="chosenFilter" asp-for="Filter" asp-items="Model.Columns"></select>
    
                <input type="text" name="searchString" value="@Model.SearchString" />
    
                <input type="submit" value="Search" />
    
                <a asp-action="Index">Full list</a>
            </p>
        </div>
    </form>
    
    <table class="table">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Students)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                    <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                </tr>
            }
        </tbody>
    </table>