Question

我正在使用ASP.NET MVC 2（.NET 4.0）开发一个Web应用程序，我遇到了一个棘手的问题。

我在局部视图中有以下代码：

<% 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" />
    <% } %>
<% } %>

发布以下参数：

AgendaId - 1046
备注 - 样本备注
Result.x - 8
Result.y - 8
TaskId - 0
X-Requested-With - XMLHttpRequest

我期待以下内容：

AgendaId - 1046
备注 - 样本备注
结果 - 0 或 1
TaskId - 0
X-Requested-With - XMLHttpRequest

代码似乎与Html.BeginForm（）一起工作正常，但这还不够，因为我需要处理JSON结果。

有人能否解决出了什么问题？谢谢！

<小时/> 注意：我还应该注意，切换到“提交”类型属性（来自“图片”类型属性）似乎也可以，但我需要使用图像提交。我想这可能是ASP.NET MVC JavaScript代码中的错误......

Answer 1

HTML spec只需要将图像上的click事件的xy坐标发送到帖子，这就是你看到Results.x和Results.y的原因。

我试着给不同的图像输入不同的名称，并根据帖子中的名字提供我的后端逻辑以便快速解决方法

Answer 2

我想出了一个维护模型绑定的解决方法。添加扩展方法，如下所示：

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));
}

然后在主样式表中添加以下内容：

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

以下是一个例子：

<%: 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?')") %>

如果有任何想法，请发表有缺点的评论。谢谢！

使用Ajax.BeginForm中的图像提交标记的ASP.NET MVC问题

2 个答案: