Question

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

我已经能够使用for-each语句生成列表，其中div元素提供正确的布局和流程。我已经看过使用jQuery Selectable插件管理从列表中选择，突出显示所选项目等，但我仍然坚持如何将所选信息发送回服务器。

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

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

Answer 1

不确定这是最好的方法，但经过几个小时的磕磕绊绊之后，我想出了这个：

<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>

Answer 2

我还不能投票:(但你是我的英雄。很棒的解决方案。

如果它对任何人都有帮助，那就是一个小调整。

添加：

cancel: "a"

过滤器旁边的

将允许可选项中的链接仍然有效

ASP.NET MVC可选图像“按钮”

2 个答案: