Блог

Я пытаюсь создать страницу, содержащую форму с одним полем, представленным списком изображений. Пользователь выберет одно из изображений, введет некоторую дополнительную информацию и нажмет кнопку, чтобы отправить данные обратно на сервер.

Я смог сгенерировать список, используя оператор for-each с элементами div, обеспечивающими правильный макет и поток. Я рассмотрел возможность использования плагина jQuery Selectable для управления выбором из списка, выделения выбранного элемента и т.д., Но застрял на том, как я отправляю выбранную информацию обратно на сервер.

Во-первых, мне нужен способ встроить идентификатор для каждого элемента в 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">amp;nbsp;</div>
            <%= Html.Encode(item.Name) %>
            <%= Html.Hidden("itemId", item.ID) %>
        </div>
    <% } %>
</div>
  

Я пока не могу проголосовать за : ( — но ты мой герой. Отличное решение.

Если это кому-нибудь поможет, внесите одну небольшую правку.

Добавление:

 cancel: "a"
  

кроме того, фильтр позволит ссылкам в выбираемых элементах продолжать работать