Implement search from inside layout in asp.net core mvc

Question

I'm creating my first web app using asp.net core mvc, so I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter, Is it implemented in controller or something else, and how to implement it...

question from:https://stackoverflow.com/questions/65861143/implement-search-from-inside-layout-in-asp-net-core-mvc

Answer 1

I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter

To implement the above requirement, you can refer to the following code snippet.

Adding form with input for searching functionality in _Layout.cshtml

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </li>
        <li class="nav-item">
            <form id="f_search" method="get" asp-action="Search">
                <div class="form-group">
                    <div class="input-group">
                        <input id="ipt_search" type="search" class="form-control" name="SearchTerm" />
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                Search
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </li>
    </ul>
</div>

JS code of checking keydown event and user input

<script>
    $(function () {
        $('#f_search input').keydown(function (e) {

            var searchTerm = $("#ipt_search").val();

            if (searchTerm == "" && event.keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });
    })
</script>

Action method of Search

public IActionResult Search(string SearchTerm)
{
    //...
    //do query based on SearchTerm

    //code logic here
    //...

    return View();
}

Test Result