ASP.net MVC Routing on Postback

Question

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

Answer 1

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.