Asp.net MVC - Model binding image button

Question

I've got a very complex form and i'm using the MVC model binding to capture all the information

I've got it set up to capture all the different submissions that can happen as there are about 10 different submit buttons on the form, and there are also 2 image buttons

I tried to get a bit clever (or so i thought) with capturing the image button submissions, and have created a child class so that i can capture the x value that's returned

public class ImageButtonViewData {
    public int x { get; set; }
    public string Value { get; set; }
}

The parent class looks something like this

public class ViewDataObject {
    public ImageButtonViewData ImageButton { get; set; }

    public ViewDataObject(){
        this.ImageButton = new ImageButton();
    }
}

The html for the image button then looks like

<input type="image" id="ViewDataObject_ImageButton" name="ViewDataObject.ImageButton" />

This works fine in all browsers except for Chrome.

When i debug it in chrome, the Request.Form object contains the values that i would expect, but after the model binding has occurred, the ImageButton property on the ViewDataObject has been set to null

The only difference that i can see between the submission values is that Chrome passes the x as lower case (ViewDataObject.ImageButton.x) and IE passes it as upper case (ViewDataObject.ImageButton.X) but i didn't think that model binding took any notice of casing on property names

Does anyone have any ideas ?

EDIT => Just to clarify, i'm not trying to find a workaround for this, i'm trying to figure out why this technique doesn't work in Chrome considering it works in all the other browsers and the correct data is being passed through

Answer 1

There are a couple of options, let me list a view

1. To check which button was pressed, you could give all the buttons the same names, but different id's. In your FormCollection on your Controller Action, you should be able to get the button that was pressed by doing something like "collection["buttonName"]" and checking it's value.

2. I think this option is the correct one to go for, and it is as follows. Separate your forms properly. You can have multiple forms on a page and tie each to it's own Controller Action, you don't need to do ugly if statements and it actually separates your actions nicely.

I hope that this answers your question somehow.