Ajax.BeginForm 搜索不调用控制器中的方法（MVC 4）答案

【问题标题】：Ajax.BeginForm search not calling method in Controller (MVC 4)Ajax.BeginForm 搜索不调用控制器中的方法（MVC 4）
【发布时间】：2014-11-03 14:42:00
【问题描述】：

我的 Ajax.BeginForm 没有向控制器提交搜索条件。代码如下：

    @using (Ajax.BeginForm("Index_AddSearchCriteria", "Home", new AjaxOptions {HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "SearchDiv" }))
{

       // @Html.Label("Search: ") // should I use this instead?
       // @Html.TextBox("search_criteria") // should I use this instead?
       <input type="text" name="search_criteria" />
        <input type="submit" value="Search" />
}

<div id="SearchDiv">

</div>

在控制器中

    public PartialViewResult Index_AddSearchCriteria(string search_criteria)
    {
        ViewModel.SearchCriteria = search_criteria;

        return PartialView("SearchBar", ViewModel);

    }

我在我的 Index_AddSearchCriteria 中放置了一个断点，即使按下“搜索”按钮也不会被命中。

我已经加载了 jquery 和 unobtrusive-ajax。

编辑：这是我得到的错误--

POST http://localhost:51989/Home/Index_AddSearchCriteria 404 (Not Found) jquery-1.8.2.js:8430
send jquery-1.8.2.js:8430
jQuery.extend.ajax jquery-1.8.2.js:7982
asyncRequest jquery.unobtrusive-ajax.js:121
(anonymous function) 
jquery.unobtrusive-ajax.js:171
jQuery.event.dispatch jquery-1.8.2.js:3077

elemData.handle.eventHandle

编辑 2：所以代码确实有效，但我在同一页面上还有另一个 PartialView 使用 Ajax 并每 100 毫秒轮询一次，这似乎使得发送搜索查询需要很长时间。我已将其更改为 1000 毫秒，搜索工作正常。

【问题讨论】：

使用浏览器的开发者工具或使用 fiddler 之类的程序来查看是否真的发送了 ajax 请求。如果是，您应该会看到响应和返回的任何错误。
它正在发送，但我收到一个 404 错误，即找不到 Index_AddSearchCriteria
我刚刚运行了你的代码，它运行正常。（我假设代码正在为您构建，因为 ViewModel 未在您提供的示例中定义，因此我假设它已在其他地方定义和创建）。你一直在玩你的路线吗？
确保您已在主布局或页面中包含 jQuery Unobtrusive Ajax 库，并且在 web.Config 中将其值设置为 True 以实现此 Ajax 调用。

标签： jquery .net ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

我能够复制您的问题。基本上，你不是在做一个 AJAX “Get”（因此错误中的 POST）你只是在做一个标准的网络帖子。我最终能够解决这个问题。 jquery.unobtrusive-ajax 好像有问题，需要修改代码，让所有的“.live”事件都变成“.on”事件。

$("a[data-ajax=true]").live("click", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

至 - （请不要有一些 .live 事件，因此您应该全部更改。也不要引用 min 文件，除非您也更改）

$("a[data-ajax=true]").on("click", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

【讨论】：