ASP.NET MVC Ajax.BeginForm eats params of submit button clicked. Looks like bug

Question

If you are using Ajax.BeginForm() with multiple submit buttons similar to this:

// View.aspx
<% using (Ajax.BeginForm(\"Action\", \"Controller\", 
                    


        

Answer 1

UPDATE: 2009-11-21 I downloaded MVC Release 2 Preview 2 and looked to see if this problem was fixed. I did a quick test and found similar results to MVC Release 2 Preview 1. I don't believe it is fixed yet.

UPDATE: 2009-08-07 I downloaded MVC Release 2 Preview 1 and looked to see if this problem was fixed. I see a new function in the script MicrosoftMvcAjax.debug.js called _serializeSubmitButton and I see that when Ajax.BeginForm() renders the output there is a onclick event but when this event fires it generates an error "Microsoft JScript runtime error: 'Sys.Mvc.AsyncForm' is null or not an object".

In short it looks like a fix was attempted but it isn't working yet or I need to do something more. The bad news is if it isn't the later then Ajax Forms will be broken for everyone until the fix is complete.

UPDATE: 2009-05-07 I received feedback today from Microsoft confirming that this is a bug. They have logged the defect and said they hope to have it fixed in a future release.

For reference I'm leaving the details of my investigation that I submitted to Microsoft. Appologies for the long post but perhaps it will be useful for anyone trying to create a work around..

There are a couple problems in the Ajax support in MVC. To illustrate, consider the pattern illustrated in several examples on the web:

//===========
// View.aspx
//===========
<% using (Ajax.BeginForm("Action", "Controller", 
    new AjaxOptions { UpdateTargetId  = "MyControl", HttpMethod = "POST"}))
{ %>
    
       <% Html.RenderPartial("MyControl"); %>
    
<% } %>

//================
// MyControl.ascx
//================
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Ajax.ActionLink("Prev", "PrevAction",
    new AjaxOptions() { UpdateTargetId="MyControl", HttpMethod="POST"}) %>
<%= Ajax.ActionLink("Next", "NextAction", 
    new AjaxOptions() { UpdateTargetId="MyControl", HttpMethod="POST"}) %>
//...

Expected:
It is just a list that can the user can page forward and back without updating the entire page.

Given this setup. I expect 2 links labeled "Prev" and "Next". Clicking on "Prev" should fire the PrevAction method in the controller as a post and the value in the hidden field named "startIndex" should be available in the request parameters. I expect similar results when clicking the Next link.

Actual:
The reality is that the request object contains NONE of the form parameters even though it shows that it came in as a POST.

In order to get any of the parameters using action link they must be explicitly supplied through the variation of ActionLink that includes parameters. When this is used the parameters become part of the URL of the link which defeats the purpose of having a POST.

So why is the javascript wrong?
I dug into the javascript code that is used to handle the submit for the example I posted with my question and I now better understand why it doesn't handle it. The reason appears to be related to the way they have wired up events and what I believe is a shortcoming in Internet Explorer.

The way it currently works is that the Ajax.BeginForm() helper class generates a form tag with an onsubmit() function to intercept the form submit event. When the user clicks on a submit button the onsubmit() function fires and recieves parameters, one of which is the event.

The MicrosoftMvcAjax scripts look at the event, bundle up the form properties that are supposed to be submitted and sends the request off to the server. The problem is that per WC3 standards only the successful controls are supposed to be posted. In the case of submit buttons this is the button that was actually clicked. Under internet explorer there is no way to determine which button actually caused the submit event to fire so the script just skips all submit buttons.

(In Firefox the event contains a property called "explictOriginalTarget" which points to the button that actually caused the event in the first place)

Whats the fix?
Microsoft should be fixing it. However if we need something sooner I believe the only option is to hack the MicrosoftMvcAjax scripts to wire up events differently. I have found that the form can be wired to a handle a mousedown event where the button clicked can be saved in a global variable where the onsubmit handler can insert it into the post parameters.

Here is some code that I was testing to illustrate this technique. I have confirmed it works in both IE8 and FireFox but I haven't tried to hack it into the MVC Ajax scripts yet... If I get more time. I may post the results here.