ASP.NET MVC shows ajax result in a new page instead of UpdateTargetId

asp.net-mvcasp.net-mvc-ajax

I am using Ajax.BeginForm to make an ajax request but asp.net mvc displays results in a new page instead of the div I set in UpdateTargetId. I ensured that I have only one div with the same name on the page.

The generated markup is:

<form action="/MyController/MyAction" id="myform" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myDiv', onSuccess: Function.createDelegate(this, someJsFunction) });">
    <input type="text" name="name" id="userInput" value="" />
    <input type="submit" id="mySubmit" style="display:none" />
    </form><div id="myDiv"></div>

Here, the submit button is not displayed because I am clicking it with javascript (I am using the same method on another page, which works):

$(document).ready(function() {
            $("[name:'name']").bind("keyup", function() {
                $("#mySubmit").click();
            })

I am using latest version of asp.net mvc. I get no script errors, I double checked all id's are unique, all js functions exist and work without errors. The markup is html strict valid except that inputs cannot be directly in the form but that works fine on other pages. Serverside code runs successfully and the returned markup is perfectly correct. Everything seems fine except that the result is displayed on a new page instead of inside my div. What am I doing wrong?

Best Answer

I had the very same problem, and the solution was referencing MicrosoftAjax.js and MicrosoftMvcAjax.js, which I had forgotten.

Related Topic