Can't submit form automatically for Incremental page load in ASP.NET MVC

Question

When I submit form using button it works fine (renders PartialView in the menuload 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" ) />
                 <%  } %> 

But I want to do it using javascript, to load page parts. I try this:

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

But it renders my PartialView on a whole page. The code of the controller:

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

Answer 1

When you call

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

you are making the form be POSTed just like it would if you had used a traditional form (instead of an AJAX form). You will have to post the content of the form to the server using AJAX and insert the response. Try something like

 $.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

Why mixing MS Ajax with jQuery when you can do all this with jQuery only and in an unobtrusive way (not mixing javascript and html):

So you define your form as usual:

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

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

And after including the form plugin in your page:

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

You indicate that the form should be submitted with ajax:

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

And finally you can submit the form with javascript like this:

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

Answer 3

Thank you, Rune. Here is my code (working) now:

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