Question

I’m not sure what’s wrong with the following setup. I have a View that lists a number of records, and each has a dropdown associated with it to change a value on that record. I had it all working without AJAX, but you had to change a bunch of the dropdowns then click a Submit button. I wanted to change it so that it would save the dropdown choice immediately.

My stripped down View (of type IEnumerable(Of MyTable)):

<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

<% For Each item In Model%>
<% Using Ajax.BeginForm("Update", New AjaxOptions With {.UpdateTargetId = "test"})%>
<%=Html.Hidden("id", item.id)%>
<%=item.name%>:
<%=Html.DropDownList("ActionCode", New SelectList(ViewData("actions"), "Value", "Text", item.ActionCode), New With {.onchange = "this.form.submit();"})%>
<span id="test"></span>
<br/>
<% End Using%>
<% Next%>

My Update controller:

<AcceptVerbs(HttpVerbs.Post)> _
Function Update(ByVal id As Integer, ByVal ActionCode As String) As ActionResult
    'Update would happen here
    Return Content(id & ": " & ActionCode)
End Function

What I would like to happen is for the dropdown change to trigger the Update controller, but probably not return anything – just update the database and let the user move on. What’s happening though is that a blank page is displayed with the Content value on it (i.e. “123: ABC”). It’s the correct id/code combo, so the Update seems to be firing correctly, it’s just choosing to wipe out the html.

Obviously I’m somehow not returning correctly for AJAX to work properly, but this pattern seems to match the examples I could find, so I’m not sure where I’m going wrong. Any help would be greatly appreciated.

Answer 1

Are you possibly nesting form tags?

I discovered that in this scenario, clicking the submit button actually triggers the form submission to occur in the outer form, not the inner one like you’d expect:

<form id="outer">
  <form id="inner">
     <input type="submit" value="submit" />
  </form>
</form>

I would also recommend using a tool like the Firebug plugin for Firefox. It helps you see the ajax activity and response.