Selectable image "buttons" with ASP.NET MVC

Question

I am trying to create a page that contains a form with one field represented by a list of images. The user will select one of the images, enter some additional information and click a button to submit the data back to the server.

I've been able to generate the list using a for-each statement with div elements providing the correct layout and flow. I've looked at using the jQuery Selectable plug-in to manage selecting from the list, highlighting the selected item, etc. but am stuck at how I send the selected information back to the server.

First, I need a way to embed the identifier for each item in the html. Then I need to send the value of the selected item to the server when the form is submitted.

Am I on the right track or heading in the wrong direction? How can I make this work?

Answer 1

I can't upvote yet :( - but you're my hero. Great solution.

If it helps anyone though, one minor tweak.

Adding a:

cancel: "a"

beside filter will allow links in the selectable items to still work

Answer 2

Not sure this is the best way to do it but after stumbling my way through over many hours, here is what I came up with:

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