Почему моя страница обновляется, когда я нажимаю кнопку фильтра в моем представлении?

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" /> вызовет перезагрузку страницы, потому что у вас есть кнопка ввода / ввода с type = "submit" внутри формы.Если вы не хотите обновлять страницу после нажатия, пожалуйста, используйте JS / Jquery (или что-нибудь еще), чтобы сделать асинхронный вызов Controller