使用ASP.NET MVC 3的Ajax.BeginForm - 什么都没发生

时间:2012-04-06 20:14:10

标签: asp.net asp.net-mvc asp.net-mvc-3 jquery

我需要做的就是创建一个简单的搜索页面,在部分视图中显示结果。我有一个搜索文本框和一个搜索提交按钮。我按照我在网上找到的教程看起来非常容易和快速实现,但我在这里遗漏了一些东西。当我点击搜索按钮时没有任何反应。任何关于我做错了什么或错过的想法都将不胜感激。

我在主布局页面中包含以下脚本文件

    @Script("jquery-1.5.1.min.js")
    @Script("modernizr-1.7.min.js")
    @Script("jquery-ui.min.js")
    @Script("jquery.unobtrusive-ajax.js")
    @Script("jquery.validate.min.js")
    @Script("jquery.validate.unobtrusive.min.js")

    @helper Script(string scriptName)
    {
        <script src="@Url.Content("~/Scripts/" + scriptName)" type="text/javascript">    </script>
    }

主搜索视图称为AdminMenu。这列在我的项目中名为Admin。

的区域下

enter image description here

主视图中的以下代码

    @using (Ajax.BeginForm("AdminSearch", "AdminMenu", new {area = "Admin"}, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "searchResults"}))
{
    <input type="text" name="q" />
    <input type="submit" value="Search"/>
}

<div id="searchResults">

</div>

部分视图中的代码_adminSearch

<div id="searchResults">
    <div class="entitybox">
        @{
            var grid = new WebGrid(
                Model,
                defaultSort: "Name", canPage: false
                );
        }

        @grid.GetHtml(
            tableStyle: "_tableGrid",
            columns: grid.Columns
                (
                    grid.Column("Name", "Name", item => @Html.ActionLink((string)item.Name, "SelectRecord", new { controller = "Menu", agencyKey = item.Id, name = item.Name }))
                )
           )

    </div>
</div>

控制器代码

public class AdminMenuController : Controller
    {

        public ActionResult AdminMenu()
        {
            return View();
        }

        public PartialViewResult AdminSearch(string q)
        {

            Records results = AgencyBusiness.GetAdminSearch(q);
            return PartialView("_adminSearch", results);

        }

    }

点击搜索按钮时没有任何反应。如果你在控制器类的AdminSearch方法上放置一个断点,它永远不会被击中。

提前感谢您的时间。

enter image description here

3 个答案:

答案 0 :(得分:0)

我认为问题是你在主视图和部分视图中都有一个名为“searchResults”的div。 Ajax可能会感到困惑。

答案 1 :(得分:0)

使用Ajax.BeginForm时需要包含MicrosoftAjax.js文件。

答案 2 :(得分:0)

我解决了这个问题。奇怪的是。我使用共享视图使用以下行在视图顶部显示当前用户。

@RenderPage("~/Views/Shared/_LoginBar.cshtml")

主要问题是@ Ajax.BeginForm函数没有向浏览器输出任何表单标签。 通过使用以下行代替,表单标记出现在HTML源代码中,并且ajax函数起作用。

@Html.Partial("~/Views/Shared/_LoginBar.cshtml")