ASP.net MVC Routing on Postback

In my ASP.net MVC View I have a dropdown that I want to get details on selection and asynchronously update a div. My aspx is as follows:

    <% using (Html.BeginForm("Index", "Portal", FormMethod.Post, new { id = "TheForm" }))
   {%>

    <h2>Index</h2>

    <% using (Ajax.BeginForm("Details", new AjaxOptions { UpdateTargetId = "mpkResults" }))
       { %>

    <%=Html.DropDownList("Docs", (IEnumerable<SelectListItem>)ViewData["Docs"],
        new { onchange = "document.getElementById('TheForm').submit();" })%>

     <p><input type="submit" value="Details" /></p>

    <% } %>

    <div id="mpkResults" style="margin:10px 0px 0px 0px;"></div> ...

The onchange event fires correctly on selection of the dropdown, but instead of the Details method in my co开发者_JAVA百科de behind firing, it hits my Index method. Why is the details method not getting hit on the onchange event? My Details() method in the controller is:

    public ActionResult Details()
    {
        ...   < It never gets here, just goes to the index() method
    }

It's a little frustrating right now since I'm sure it is a simple mistake but not sure what it could be. I looked at the Source of my page and sure enough, the form looks like it should be routing to the Details Action:

<form action="/Portal/Details" method="post" ...

Any help would be appreciated.

That's because in your onchange handler, you're calling the submit() method on the TheForm form instead of your AJAX form:

    new { onchange = "document.getElementById('TheForm').submit();" })%>
                                               ^^ wrong form ID

Give your AJAX form another ID, and use that instead.