Question

我很难搞清楚如何做到这一点。我在我网站的主页面上添加了一个搜索框。该网站有您可以购买的各种产品分为几类。当您单击其中一个类别（例如蜡烛和气味）时，它会将您带到/ Home / Products / candles-scents。现在我已经在我的控制器和模型中创建了正确进行搜索的新方法。我的搜索功能基本上是复制我的“产品类别”功能，只修改了sql查询。所以我希望网站再次转到产品页面，就像特定类别一样：/ Home / Products /“search”。我不确定我是否应该将搜索框包装在表格中，或者是否有更好的方法。现在我正在尝试jquery ajax，但当然页面没有被重定向。

这是我的搜索框html：

<input type="text" class="search" placeholder="search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'search'"/>

这是我的jquery：

$(".search").keypress(function (event) {
        var searchString = $(this).val();
        console.log(searchString);
        console.log("blah");
        if (event.which == 13) {
            $.ajax({
                url: '@Url.Action("_search", "Home")',
                data: {
                    search: searchString
                }
            })
        }
    });

这是控制器中的_search函数：

public ActionResult _search(string search)
    {

        // get the model
        List<ProductModel> m = new List<ProductModel>();

        m = ProductsModel.getProductsBySearch(search);

        return View(m);
    }

然后该函数只是调用运行sql查询并返回适当的ProductModel列表。我发现了后端的东西。我只是不确定如何从前端正确调用我的搜索。

Answer 1

如果你要返回一个完整的视图，似乎你不想在这里使用Ajax。

考虑这个javascript来进行没有表单的重定向：

$(".search").keypress(function (event) {
    var searchString = $(this).val();
    console.log(searchString);
    console.log("blah");
    if (event.which == 13) {
        var searchUrl = '@Url.Action("_search", "Home")';
        searchUrl += "/" + searchString;
        window.location.href = searchUrl;
    } // end if
});

或者，使用表单方法

<script type="text/javascript">
$(".search").keypress(function (event) {
    var searchString = $(this).val();
    console.log(searchString);
    console.log("blah");
    if (event.which == 13) {
        $("#search-form").submit();
    } // end if
});
</script>

<form id="search-form" method="post" action="@Url.Action("_search", "Home")">
   <input type="text" class="search" name="search" placeholder="search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'search'"/>
   <input type="submit" value="Go" name="submit" />
</form>

我添加的重要内容是输入的name="search"属性。这告诉默认的MVC ModelBinder找到名称与控制器的动作参数匹配的HTML输入元素（在源代码中缺失）。

Answer 2

您可以使用成功功能来阻止页面重新加载

$(".search").keyup(function (e) {
    var searchString = $(this).val();
    if (e.which == 13) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("_search", "Home")',
            data: {
                search: searchString
            },
            success: function () {
                // do something here, like replace the html
            }
        });
    }
});

来自惯例的一个提示，请使用您的行动名称

public ActionResult Search(string search)

试图在.net MVC中实现搜索

2 个答案: