Не удается отправить форму автоматически для добавочной загрузки страницы в ASP.NET MVC

Question

Когда я отправляю форму, используя кнопку, она работает нормально (отображает PartialView в div загрузки меню):

<% 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

Зачем смешивать MS Ajax с jQuery, если вы можете сделать все это только с помощью jQuery и ненавязчиво (не смешивая javascript и html):

Итак, вы определяете свою форму как обычно:

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

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

И после включения плагина на вашей странице:

<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 2

Спасибо, Руна. Вот мой код (работает) сейчас:

 $.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
               }
            });

Answer 3

при звонке

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

вы делаете форму POSTED такой же, как если бы вы использовали традиционную форму (вместо формы AJAX). Вам придется опубликовать содержимое формы на сервере с помощью 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 */ }
});