MVC3 RemoteAttribute and muliple submit buttons

I have discovered what appears to be a bug using MVC 3 with the RemoteAttibute and the ActionNameSelectorAttribute.

I have implemented a so开发者_StackOverflowlution to support multiple submit buttons on the same view similar to this post: http://blog.ashmind.com/2010/03/15/multiple-submit-buttons-with-asp-net-mvc-final-solution/

The solution works however, when I introduce the RemoteAttribute in my model, the controllerContext.RequestContext.HttpContext.Request no longer contains any of my submit buttons which causes the the "multi-submit-button" solution to fail.

Has anyone else experienced this scenario?

I know this is not a direct answer to your question, but I would propose an alternative solution to the multiple submit-buttons using clientside JQuery and markup instead:

Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=submit][data-action]").click(function (e) {
            var $this = $(this);
            var form = $this.parents("form");
            var action = $this.attr('data-action');
            var controller = $this.attr('data-controller');
            form.attr('action', "/" + controller + "/" + action);
            form.submit();
            e.preventDefault();
        });
    });
</script>

Html

@using (Html.BeginForm())
{    
    <input type="text" name="name" id="name" />

    <input type="submit" value="Save draft" data-action="SaveDraft" data-controller="Home" />
    <input type="submit" value="Publish" data-action="Publish" data-controller="Home" />
}

It might not be as elegant as a code-solution, but it offers somewhat less hassle in that the only thing that actually changes is the action-attribute of the form when a submitbutton is clicked.

Basically what it does is that whenever a submit-button with the attribute data-action set is clicked, it replaces its parent forms action-attribute with a combination of the attributes data-controller and data-action on the clicked button, and then fires the submit-event of the form.

Of course, this particular example is poorly generic and it will always create /Controller/Action url, but this could easily be extended with some more logic in the click-action.

Just a tip :)

i'm not sure that its a bug in mvc 3 as it's not something that you were expecting. the RemoteAttribute causes javascript to intercept and validate the form with an ajax post. to do that, the form post is probably canceled, and when the validation is complete, the form's submit event is probably called directly, rather than using the actual button clicked. i can see where that would be problematic in your scenario, but it makes sense. my suggestion, either don't use the RemoteAttributeand validate things yourself, or don't have multiple form actions.

The problem manifests itself when the RemoteAttribute is used on a model in a view where mutliple submit buttons are used. Regardless of what "multi-button" solution you use, the POST no longer contains any submit inputs.

I managed to solve the problem with a few tweeks to the ActionMethodSelectorAttribute and the addition of a hidden view field and some javascript to help wire up the pieces.

ViewModel

public class NomineeViewModel
    {
        [Remote("UserAlreadyRegistered", "Nominee", AdditionalFields="Version", ErrorMessage="This Username is already registered with the agency.")]
        public string UserName { get; set; }

        public int Version {get; set;}
        public string SubmitButtonName{ get; set; }
    }

ActionMethodSelectorAttribute

public class OnlyIfPostedFromButtonAttribute : ActionMethodSelectorAttribute
    {
        public String SubmitButton { get; set; }
        public String ViewModelSubmitButton { get; set; }

        public override Boolean IsValidForRequest(ControllerContext controllerContext, MethodInfo methodInfo)
        {
            var buttonName = controllerContext.HttpContext.Request[SubmitButton];
            if (buttonName == null)
            {
                //This is neccessary to support the RemoteAttribute that appears to intercepted the form post
                //and removes the submit button from the Request (normally detected in the code above)
                var viewModelSubmitButton = controllerContext.HttpContext.Request[ViewModelSubmitButton];
                if ((viewModelSubmitButton == null) || (viewModelSubmitButton != SubmitButton))
                    return false;
            }

            // Modify the requested action to the name of the method the attribute is attached to
            controllerContext.RouteData.Values["action"] = methodInfo.Name;
            return true;
        }
    }

View

<script type="text/javascript" language="javascript">
    $(function () {
        $("input[type=submit][data-action]").click(function (e) {
            var action = $(this).attr('data-action');
            $("#SubmitButtonName").val(action);
        });
    });
</script>

    <% using (Html.BeginForm())
       {%>
        <p>
            <%= Html.LabelFor(m => m.UserName)%>
            <%= Html.DisplayFor(m => m.UserName)%>
        </p>

        <input type="submit" name="editNominee" value="Edit" data-action="editNominee" />
        <input type="submit" name="sendActivationEmail" value="SendActivationEmail" data-action="sendActivationEmail" />
        <%=Html.HiddenFor(m=>m.SubmitButtonName) %>
<% } %>

Controller

[AcceptVerbs(HttpVerbs.Post)]
[ActionName("Details")]
[OnlyIfPostedFromButton(SubmitButton = "editNominee", ViewModelSubmitButton = "SubmitButtonName")]
public ActionResult DetailsEditNominee(NomineeViewModel nom)
{
    return RedirectToAction("Edit", "Nominee", new { id = nom.UserName });
}

[AcceptVerbs(HttpVerbs.Post)]
[ActionName("Details")]
[OnlyIfPostedFromButton(SubmitButton = "sendActivationEmail", ViewModelSubmitButton = "SubmitButtonName")]
public ActionResult DetailsSendActivationEmail(NomineeViewModel nom)
{
    return RedirectToAction("SendActivationEmail", "Nominee", new { id = nom.UserName });
}

[OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public ActionResult UserAlreadyRegistered(string UserName, int Version)
{
    //Only validate this property for new records (i.e. Version != zero)
    return Version != 0 ? Json(true, JsonRequestBehavior.AllowGet) 
                              : Json(! nomineeService.UserNameAlreadyRegistered(CurrentLogonDetails.TaxAgentId, UserName), JsonRequestBehavior.AllowGet);
}

I encountered the same issue.

I also attached an on submit event to prepare the form before submit. Interestingly, when I insert a break point in the on submit function, and then continue, the problem has disappeared.

I ended up with an Ajax form by removing the Remote attribute and validate the field using the ModelState.