Question

我正在尝试构建一个带有剃须刀页面的过滤器，以选择性过滤掉搜索框和下拉菜单中的用户输入。换句话说，它们可以过滤掉，或者完全过滤掉。

我在这里遵循了本教程，并且能够使所有功能正常运行，但是当我尝试使用相同的数据和应用程序进行更多练习时，却无法正常运行。我不知道有什么不同。

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/search?view=aspnetcore-2.2

     //Controller Method
     public async Task<IActionResult> Index(string travels, string 
searchString)
    {
        IQueryable<string> travelQuery = from c in _context.CardInfo
                                         orderby c.Travels
                                         select c.Travels;

        var cards = from c in _context.CardInfo
                    select c;

        if (!String.IsNullOrEmpty(searchString))
        {
            cards = cards.Where(c => c.CardName.Contains(searchString));
        }

        if (!string.IsNullOrEmpty(travels))
        {
            cards = cards.Where(x => x.Travels == travels);
        }

        var cardInfoVM = new CardInfoViewModel
        {
            Travels = new SelectList(await 
                        travelQuery.Distinct().ToListAsync()),
            CardInfos = await cards.ToListAsync()
        };

        return View(cardInfoVM);
    }


    //Model
    public class CardInfo
    {
        public int Id { get; set; }
        public int CardId { get; set; }
        public string CardName { get; set; }
        public int Elixir { get; set; }
        public string CardType { get; set; }
        public string Travels { get; set; }
        public string Targets { get; set; }
        public string AttackAir { get; set; }
        public string Spawner { get; set; }
        public int RangeLevel { get; set; }
    }

    //ViewModel
    public class CardInfoViewModel
    {
        public List<CardInfo> CardInfos { get; set; }
        public SelectList Travels { get; set; }
        public string CardTravel { get; set; }
        public string SearchString { get; set; }
    }



//cshtml view


  @model ClashMVC.Models.CardInfoViewModel

@{
    ViewData["Title"] = "Index";
 }

<h1>Index</h1>

<p>
  <a asp-action="Create">Create New</a>
</p>

<form asp-controller="CardInfo" asp-action="Index" method="get">
    <p>
   <select asp-for="CardTravel" asp-items="Model.Travels">
           <option value="">All</option>
    </select>

    Title: <input type="text" name="SearchString">
    <input type="submit" value="Filter" />
</p>
</form>

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].CardId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].CardName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].Elixir)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].CardType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].Travels)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].Targets)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].AttackAir)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].Spawner)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CardInfos[0].RangeLevel)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.CardInfos)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CardId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CardName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Elixir)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CardType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Travels)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Targets)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AttackAir)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Spawner)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RangeLevel)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route- 
id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
  </tbody>
 </table>

没有错误信息。我在浏览器中看到了预期的查询字符串参数，但是当我尝试基于下拉列表（CardTravel）应用过滤器时，页面将重新加载，并且未应用过滤器。

Answer 1

在Controller Index方法参数中

string travels

需要匹配视图的

select asp-for="CardTravel"

Answer 2

确保<input type="submit" value="Filter" />会导致页面重新加载，因为表单中有一个输入/按钮，其类型为=“ submit”。如果您不想在点击后刷新页面，请使用JS / Jquery（或其他方法）对Controller进行异步调用

当单击视图中的过滤器按钮时，为什么页面会刷新？

2 个答案: