MVC - Ajax.BeginForm不起作用

Question

我正在使用Ajax表单在页面中呈现局部视图.
见下面的代码

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js") %>"></script>

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>

<form id="aspnetForm" runat="server" style="height: 100%;">
<% using (Ajax.BeginForm("demo", "demo", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }, new { @ID = "AjaxForm" }))
                   {  %>

                    <%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown" })%>
                    <% }%>
                    <input type="submit" value="Save" />
                    <div id="divToUpdate">
                        <% Html.RenderPartial("UserControls/DemoPage"); %>
                    </div>

                <% }%></form>

在这我包括4 js.我有一个带有Form标签的页面,里面有一个prtial视图页面.当我选择下拉列表并单击保存按钮我想要ajax帖子但我发现整个页面正在重新加载.

有什么想法吗？

谢谢

Answer 1

问题是,

1. 您不能在html中使用嵌套的表单标记

试试如下,

<% using (Ajax.BeginForm("demo", "demo", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }, new { @ID = "AjaxForm" }))
{  %>
    <%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown" })%>
    <input type="submit" value="Save" />
<% }%>
<div id="divToUpdate">
    <% Html.RenderPartial("UserControls/DemoPage"); %>
</div>

您也可以将下拉菜单更改为自动回发,然后您不需要单独的提交按钮,

<%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown", @onchange = "$(this).closest('form').submit();" })%>