Jquery 使用ASP.NET MVC的可选图像“按钮”

我试图创建一个页面，其中包含一个表单，其中一个字段由图像列表表示。用户将选择一个图像，输入一些附加信息，然后单击按钮将数据提交回服务器

我已经能够使用for-each语句生成列表，其中div元素提供了正确的布局和流程。我曾经研究过使用jQuery可选插件来管理从列表中选择、突出显示所选项目等，但我一直在研究如何将所选信息发送回服务器

首先，我需要一种在html中嵌入每个项目的标识符的方法。然后，我需要在提交表单时将所选项目的值发送到服务器

---

我是在正确的轨道上还是在错误的方向上？我怎样才能做到这一点呢？

我不确定这是最好的方法，但在我跌跌撞撞地走了好几个小时之后，我想到了以下几点：

<style type="text/css">
    .ui-selected
    {
        background-color:Yellow;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("#buttons").selectable(
        {
            filter: "div",
            selected: function (e, ui) {
                var value = $(ui.selected).children("input").first().val();

                $("#SelectedValue").val(value);
            }
        });
    });
</script>

<% using (Html.BeginForm())
   { %>
    <%= Html.Hidden("SelectedValue") %>
<% } %>

<div id="buttons">
    <% foreach (var item in Model.Items)
       { %>
        <div class="image_button_large"
             style="float:left;"
             title="<%= Html.Encode(item.Name) %>"
             >
            <div class="button_image">&nbsp;</div>
            <%= Html.Encode(item.Name) %>
            <%= Html.Hidden("itemId", item.ID) %>
        </div>
    <% } %>
</div>

---

我还不能投票，但你是我的英雄。很好的解决方案

不过，如果这对任何人都有帮助的话，只需做一个小小的调整

添加一个：

cancel: "a"

旁边的过滤器将允许可选项目中的链接仍然工作