如何在C＃MVC中从标题创建搜索功能

Question

有人可以帮助我吗？

我试图在我的应用程序标题中放置一个搜索框，并且我希望用户，无论他/她在应用程序中做什么，都能够在标题搜索框中输入搜索词并搜索结果。 这个想法是，每当用户从标题搜索栏中进行搜索时，我想显示一个包含2个部分结果的视图和结果过滤器。

直到现在，我有了菜单-搜索，然后单击时，我会加载带有搜索框的“搜索/索引操作”。当用户搜索某些内容时，我显示了结果，并对结果进行了过滤，并带有部分视图，并将结果附加到 div id =“ Results”和div id =“ Filters”使用javascript。

我该怎么做？

预先感谢...

这是我的搜索控制器代码：

public ActionResult Index(string number)
    {
        return View(model: number);
    }

[SearchThrottle]
    [HttpPost]
    public ActionResult SearchByNumber(SearchArticleByNumberModel model, PagingInfo pagingInfo)
    {
        var results = repository.SearchArticleByNumber(model, pagingInfo);
        return PartialView("Articles", results);
    }

    [HttpPost]
    public ActionResult SearchByNumberFilters(SearchArticleByNumberModel model)
    {
        var results = repository.LoadArticleFilters(model);
        return PartialView("ArticleFilters", results);
    }

这是我的索引视图：

<div class="row">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        Search
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <form id="searchbynumberform">
                        Value:
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" name="number" id="number" value="@Model">
                            <input type="radio" name="articlekind" id="arl_kind0" value="0" checked>
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" name="numbersearch" id="numbersearch" disabled>
                                    Search
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div id="alerts"></div>
        <form id="resultsForm">
            <div id="Filters"></div>
            <div id="Results"></div>
        </form>
    </div>
</div>

这是我的javascript文件：

    var searchByNumber = {

    init: function () {
        $(document).on('click', "#numbersearch", function () {
            searchShared.searchurl = "/Search/SearchByNumber";
            searchShared.filtersurl = "/Search/SearchByNumberFilters";
            searchShared.postdata = $("#searchbynumberform").serialize();

            searchShared.loadFilters();
            searchShared.loadArticles();
        });

        $(document).on('keydown', "#number", function (event) {
            var key = event.keyCode || event.charCode;

            if (key == 13) {
                $("#numbersearch").click();
                event.preventDefault();
            }
        });

        $(document).on('input', "#number", function () {

            var num = $("#number").val();
            $("#numbersearch").prop("disabled", num.length <= 3);
        });

        $(document).on("change", "#cbsimilarsearch", function () {
            var checked = $("#cbsimilarsearch").attr('checked') != undefined;
            $("#similarsearch").val(checked);
        });

        if (!!$("#number").val()) {
            $("#numbersearch").click();
        }
    }
};

loadArticles: function () {
        var url = "/Search/Articles";
        var postdata = searchShared.postdata;

        if ($("#resultsForm").length) {
            postdata += "&" + $("#resultsForm").serialize();
        }

        $.post(searchShared.searchurl,
            postdata,
            function (data) {
                $("#Results").html(data);
                $('.panel.available:last').after("<hr />");
            })
            .fail(function (result) {
                if (result && result.status && result.status === 429) {
                    message.error(result.responseText);
                } else {
                    $("#Results").html('');
                    message.error("Error... Try Again...");
                }
            });
    },

loadFilters: function () {
        var url = "/Search/ArticleFilters";
        var postdata = $("#searchbyvehicleform").serialize();

        $("#Filters").html('');

        $.post(searchShared.filtersurl,
            searchShared.postdata,
            function (data) {
                $("#Filters").html(data);
            });
    }