Question

当我使用按钮提交表单时，它工作正常（在menuload div中呈现PartialView）：

<% using (Ajax.BeginForm("Menu", null, new AjaxOptions { UpdateTargetId = "menuload", HttpMethod = "POST", LoadingElementId = "status-waiting" }, new { @id = "menuFormControl", enctype = "multipart/form-data"}))
                   { %> 
<input id="menuFormControlsubmit" type="submit" value="submit" ) />
                 <%  } %>

但我想用javascript来加载页面部分。我试试这个：

<% using (Ajax.BeginForm("Menu", null, new AjaxOptions { UpdateTargetId = "menuload", HttpMethod = "POST", LoadingElementId = "status-waiting" }, new { @id = "menuFormControl", enctype = "multipart/form-data"})){  } %>  

                   <script language="javascript" type="text/javascript">
                       $("#menuFormControl").submit();                       
                    </script>

但它在整个页面上呈现我的PartialView。控制器的代码：

public ActionResult Menu()
        {
            return PartialView("~/Views/Shared/MenuUserControl.ascx");
        }

Answer 1

致电时

$("#menuFormControl").submit();

如果您使用传统表单（而不是AJAX表单），您正在使表单成为POST。您必须使用AJAX将表单内容发布到服务器并插入响应。尝试像

这样的东西

 $.ajax({
  type: 'POST',
  url: '<%= Url.Action("Menu", "MyMenuController") %>',
  data: $("#menuFormControl").serialize(),
  success: function(){ $("#menuFormControl").html(data); /* This will insert the HTML returned from the server */ }
});

Answer 2

为什么将MS Ajax与jQuery混合在一起只能使用jQuery并且以不引人注目的方式（不混合使用javascript和html）来实现所有这些：

所以你像往常一样定义表单：

<% using (Html.BeginForm("index", "home", FormMethod.Post, new { id = "menuFormControl" })) { %>

<% } %>
<div id="menuload"></div>

在您的网页中加入form plugin之后：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

您表明该表单应使用ajax提交：

$(function() {
    $('#menuFormControl').ajaxForm();
});

最后你可以用这样的javascript提交表单：

$('#menuFormControl').ajaxSubmit({
    success: function(data) {
        $('#menuload').html(data);
    }
});

Answer 3

谢谢你，符文。这是我的代码（工作）现在：

 $.ajax({
                beforeSend: function(){ //show image while loading
                    $("#status-waiting").show();
                },
                complete: function(){ //hide loading image
                    $("#status-waiting").hide();
                },
                type: 'POST',
                url: '<%= Url.Action("Menu", "Home") %>',
                data: $("#menuFormControl").serialize(),
                success: function (data) {
                    $("#menuload").html(data); //insert result into the div
               }
            });

无法在ASP.NET MVC中为增量页面加载自动提交表单

3 个答案: