Problème ASP.NET MVC utilisant la balise de soumission d'image dans Ajax.BeginForm

Question

Je développe une application Web avec ASP.NET MVC 2 (.NET 4.0) et j'ai rencontré un problème difficile.

J'ai le code suivant dans une vue partielle:

<% using (Ajax.BeginForm("CompleteTask", "Agenda", new AjaxOptions {HttpMethod = "POST"})) { %> 
    <%: Html.EditorFor(x => x.Remarks) %> 
    <%: Html.HiddenFor(x => x.TaskId) %> 
    <%: Html.HiddenFor(x => x.AgendaId) %> 

    <% if (Model.RequiresApproval) { %> 
     <input type="image" name="Result" value="0" src="../../Content/Icons/thumbs_up.png" /> 
     <input type="image" name="Result" value="1" src="../../Content/Icons/thumbs_down.png" /> 
    <% } else { %> 
     <input type="image" name="Result" value="0" src="../../Content/Icons/accept.png" /> 
    <% } %> 
<% } %> 

Les paramètres suivants sont affichés:

• AgendaId - 1046
• Remarques - échantillon remarque
• Résultat .x - 8
• Result.y-8
• TaskId - 0
• X-Requested-With - XMLHttpRequest

Je me attendais à ce qui suit:

• AgendaId - 1046
• Remarques - échantillon remarques
• Résultat - ou
• TaskId - 0
• X-Requested-With - XMLHttpRequest

Le code semble fonctionner très bien avec Html.BeginForm(), mais cela ne suffira pas que je dois gérer JSON résultats.

Quelqu'un peut-il faire la lumière sur ce qui ne va pas? Merci!

---

NOTE: Je devrais également noter que le passage à un attribut de type «submit» (à partir de l'attribut de type «image») semble également fonctionner, mais je dois utiliser une soumission d'image. Je pense que cela pourrait être un bogue dans le code JavaScript ASP.NET MVC ...

Answer 1

je suis venu avec une solution de contournement qui maintient modèle de liaison . Ajouter une méthode d'extension telles que les suivantes:

public static MvcHtmlString AjaxCapableImageSubmit(this HtmlHelper html, string name, object value, string iconSrc, string cssClass = null, string onClick = null) 
{ 
    var style = string.Format("background: url({0}) no-repeat;", iconSrc); 

    var input = new TagBuilder("input"); 
    input.AddCssClass("image-submit-button"); 
    input.MergeAttribute("type", "submit"); 
    input.MergeAttribute("name", name); 
    input.MergeAttribute("value", value.ToString()); 
    input.MergeAttribute("style", style); 
    if (cssClass != null) input.AddCssClass(cssClass); 
    if (onClick != null) input.MergeAttribute("onclick", onClick); 

    return MvcHtmlString.Create(input.ToString(TagRenderMode.SelfClosing)); 
} 

Puis ajouter quelque chose comme ce qui suit à votre feuille de style primaire:

.image-submit-button { 
    border: none; 
    color: transparent; 
    cursor: pointer; 
} 
.icon { 
    height: 16px; 
    width: 16px; 
} 

Voici un exemple:

<%: Html.AjaxCapableImageSubmit("Result", 0, "../../Content/Icons/thumbs_up.png", cssClass: "icon", onClick: "return confirm('Accept?')") %> 
<%: Html.AjaxCapableImageSubmit("Result", 1, "../../Content/Icons/thumbs_down.png", cssClass: "icon", onClick: "return confirm('Decline?')") %> 

S'il vous plaît poster des commentaires avec inconvénients de cette approche si quelque chose vient à l'esprit. Merci!

Answer 2

Le HTML spec nécessite seulement que les coordonnées xy de l'événement click sur l'image soient envoyées à la poste, c'est pourquoi vous êtes voir les résultats.x et Results.y.

Je vais essayer de donner juste les différentes entrées d'image différents noms et la base de ma logique arrière sur ce nom est venu en poste pour une solution rapide