Есть ли ошибка в input type = "image" в Internet Explorer

Question

В данный момент я использую IE9 (rtm) и мне интересно, является ли это проблемой моего собственного поведения или ошибкой в ​​Internet Explorer 9.

Я использую ASP.NET MVCКонтроллер формы определяется как:

[HttpPost()]  
[UrlRoute(Path = "Checkout/Cart")]  
public ActionResult Cart(ShoppingCartModel cart, string submitButton)

Все браузеры будут вызывать этот метод при отправке назад.Тип ввода детализирован как:

<input type="image" src="/resources/images/removeselected.png" class="rightButton removeSelected" alt="Remove Selected" name="submitButton" value="<%= Html.Encode(Model.REMOVE_SELECTED) %>" />

А вот что публикуется с формой:

Chrome: CartId = 241 & submitButton.x = 83 & submitButton.y = 12 & submitButton =removeSelected & Items% 5B0% 5D.Selected = true & Items% 5B0% 5D.Selected = false & Items% 5B0% 5D.OrderItemId = 76 & Items% 5B0% 5D.Product.ID = 9611 & Items% 5B0% 5D.Quantity = 1

ИнтернетИсследователь 9: CartId = 244 & Items% 5B0% 5D.Selected = true и Items% 5B0% 5D.Selected = false & Items% 5B0% 5D.OrderItemId = 77 & Items% 5B0% 5D.Product.ID = 10091 & Items% 5B0% 5D.Quantity = 1 & submitButton= 27 & submitButton.y = 8

Как видите, Chrome вставляет submitButton=removeSelected, а IE - нет.Он также отлично работает в Firefox.

Если я изменю его на <input type="submit">, он будет работать без проблем.Однако я хочу использовать тип ИЗОБРАЖЕНИЯ

Answer 1

В соответствии со спецификацией :

Когда для нажатия на изображение используется указывающее устройство, форма отправляется, а координаты щелчка передаются на сервер.Значение x измеряется в пикселях слева от изображения, а значение y - в пикселях сверху изображения.Представленные данные включают name.x = x-value и name.y = y-value, где «name» - это значение атрибута name, а x-value и y-value - значения координат x и y соответственно.

Вы не можете ожидать большего.IE не отправляет submitButton=removeSelected, да, но нет ничего, что обязывает делать это согласно спецификации.Поэтому не стоит полагаться на этот параметр.Тот факт, что другие браузеры отправляют его, вероятно, является лишь деталью реализации (на которую, конечно, не следует полагаться).

В качестве обходного пути используйте обычную кнопку отправки и попробуйте стилизовать ее с помощью CSS.

Answer 2

Вот как я обошел это; надеюсь, кому-то еще может пригодиться мое решение.

Подпись сообщения изменяется; Параметры - это список всех имен кнопок различных форм. Chrome / FF заполнит эти имена, поэтому вам не нужно будет их анализировать.

[HttpPost()]
[UrlRoute(Path = "Checkout/Cart")]
public ActionResult Cart(ShoppingCartModel cart, string removeSelected, string nextButton)
{
    if (removeSelected == ShoppingCartModel.REMOVE_SELECTED)
        removeOp = true;
    else if (nextButton == ShoppingCartModel.NEXT_BUTTON)
        nextOp = true;
    else
    {
        PostbackButtonParser parser = new PostbackButtonParser(HttpContext.Request.InputStream, new string[] { ShoppingCartModel.NEXT_BUTTON, ShoppingCartModel.REMOVE_SELECTED });

        if (parser.PostbackButtonName == ShoppingCartModel.NEXT_BUTTON)
            nextOp = true;
        else if (parser.PostbackButtonName == ShoppingCartModel.REMOVE_SELECTED)
            removeOp = true;
     }

    if(removeOp) { /* do something */ }
    else if (nextOp) { /* do something */ }
}

Тогда код PostbackButtonParser довольно прост:

/// <summary>
/// Implements a fallback rollover for Internet Explorer and other browsers which don't send the value with an INPUT TYPE="IMAGE" submit.
/// </summary>
/// <example>
/// PostbackButtonParser parser = new PostbackButtonParser(HttpContext.Request.InputStream, new string[] { "button1", "button2" });
/// if(parser.PostbackButtonName == "button1") {
///     // do something
/// }
/// else if (parser.PostbackButtonName == "button2" {
///     // do something else
/// }
/// </example>
/// <remarks>See /4785667/est-li-oshibka-v-input-type-image-v-internet-explorer</remarks>
public class PostbackButtonParser
{
    /// <summary>
    /// Gets the name of the button which caused the postback.
    /// </summary>
    public string PostbackButtonName
    {
        get;
        private set;
    }

    /// <summary>
    /// Creates a new instance of the postback button parser
    /// </summary>
    /// <param name="requestStream">The stream to process</param>
    /// <param name="buttonNames">An array of button names to evaluate gainst</param>
    public PostbackButtonParser(Stream requestStream, string[] buttonNames)
    {
        byte[] stream = new byte[requestStream.Length];
        requestStream.Read(stream, 0, stream.Length);
        string contents = System.Text.Encoding.ASCII.GetString(stream);

        for (int i = 0; i < buttonNames.Length; i++)
        {
            // Set first match
            if (contents.Contains(buttonNames[i] + ".x") && contents.Contains(buttonNames[i] + ".y"))
            {
                PostbackButtonName = buttonNames[i];
                break;
            }
        }
    }
}

Я действительно надеюсь, что это кому-то поможет; Я потратил несколько часов на то, что действительно должно было быть тривиальным. То, что сказал Дарин, очень верно, я мог бы создать стиль, но я бы предпочел использовать тип изображения только для семантики.