ASP.Net API & Core Search Functionality Issue

Question

In my solution I have an ASP.NET Core Web API project. Skipping to the client side portion, in one of my controllers I am trying to implement a search function (my first time ever trying). When I try to search for any of the entries I've made - I get an error

This page isn’t working. If the problem continues, contact the site owner. HTTP ERROR 405

I think it has something to do with routing but I'm not 100% sure. I was following a Youtube tutorial for specifically the search functionality and mimicked what the guide did exactly but his worked and mine doesn't.

When I type anything in the search bar, it gives me the error page but I type GFOption?term=apple, then it displays.

I'll be sharing code from the API Controller, Client Side Controller and the Index View.

API Controller's GetAll method:

[HttpGet]
public IActionResult GetAllGenFilterOptions()
{
    var genFilterOptions = _context.GenFilterOptions.Include(b => b.GenericFilter).ToList();

    if (genFilterOptions == null)
    {
        return BadRequest();
    }

    return Ok(genFilterOptions);
}

Client-side controller's Index method:

[HttpGet]
public IActionResult Index(string term)
{
    var response = _client.GetAsync($"{_client.BaseAddress}/genfilteroption").Result;
    string data = response.Content.ReadAsStringAsync().Result;
    var fOptionList = JsonConvert.DeserializeObject<List<GenFilterOption>>(data);

    if (String.IsNullOrEmpty(term))
    {
        return View(fOptionList);
    }
    else
    {
        term.ToLower();
        var searchItems = fOptionList.Where(s => s.FilterOptionName.ToLower().Contains(term));
        return View(searchItems);
    }
}

The Index view:

@model IEnumerable<StateAuctionFE.Models.GenFilterOption>

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

<h1>Index for Filter Options</h1>
<form asp-action="Index">
    <div class="input-group md-form form-sm form-2 pl-0">
        <input name="term" class="form-control my-0 py-1 red-border" type="text" placeholder="Search"/>
        <div class="input-group-append">
            <span class="input-group-text red lighten-3" id="basic-text1">
                <i class="fas fa-search text-grey" aria-hidden="true"></i>
            </span>
        </div>
    </div>
</form>
<table class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.GenericFilter)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FilterOptionName)
            </th>
            <th>
                <a asp-action="Create" class="btn btn-success">Add</a>
            </th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
    <tr>
        <td>
            @item.Id
        </td>
        <td>
            @item.GenericFilter.FilterName
        </td>
        <td>
            @item.FilterOptionName
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
    </tbody>
</table>


@section scripts{
    <script>
        $(function () {
            $("#basic-text1").click(function () {
                $("Form").submit();
            })
        });
    </script>
}

Answer 1

In your client controller, The http verb of index action is [HttpGet]. But when you submit the form, the default method is post method, It will send http post request to your controller, So when you only have [HttpGet] index action in your controller, It will show 405 error.

To solve this issue. you can change your form to let it send http get request.

<form asp-action="Index" method="get">
.......
</form>