Поиск данных, связанных с тем элементом <li>, который выбрал пользователь

Question

Я использую MVC3 с бритвой. Я даю пользователю список <li>s на выбор:

        <ol id="selectable">
            @foreach (var ebat in Model.AvailableSizes)
            {
                <li class="ui-widget-content">@ebat.Item1 x @ebat.Item2</li>                    
            }
        </ol>

где Model.AvailableSizes является List<Tuple<int,int>>, Когда пользователь выбирает один из них, я хочу быть в состоянии найти из jQuery, который Tuple<int,int> пользователь хочет использовать.

Кстати, я использую jqueryui Выбирается с этим списком.

Я думаю, что я могу найти выбранный элемент с $(".ui-selected:first"), но как я могу получить связанные данные модели, а именно @ebat.Item1 а также @ebat.Item2, чтобы я мог отправить их на сервер в качестве параметров?

Я довольно подозрительно отношусь к своему первоначальному подходу, я имею в виду, что это не должно быть так сложно. Так что, если бы вы могли показать мне лучший способ совместного использования моделей, html и jquery в таких ситуациях, это было бы замечательно. Благодарю.

Answer 1

Добавьте атрибут в тег li:

<li class="ui-widget-content" data="@[e-mail]2">@ebat.Item1 x @ebat.Item2</li> 

Попробуйте следующий код jQuery:

    var value = $(".ui-selected:first").attr("data");
    var items = value.split("-");
    var item1 = items[0];
    var item2 = items[1];

Answer 2

Вы можете добавить скрытое поле для выбранного значения и установить его значение для события выбора.

@Html.HiddenFor(m => m.SelectedSize)

Хотя, Tuple<T1,T2> не имеет конструктора без параметров, поэтому связыватель модели не может создать экземпляр. Вы можете указать целочисленный идентификатор для каждого размера и прочитать его из запроса POST.

Вы должны использовать Tuple<int,T1,T2> для вашего свойства AvailableSizes. Также вы должны сохранить значение идентификатора как пользовательский атрибут в элементе li, чтобы сохранить его в скрытом поле.

Тем не менее, MVC не сможет читать свойство AvailableSizes по запросу после публикации, поэтому вам придется исключить это свойство и свойство SelectedSize только для чтения.

Вот как должны выглядеть свойства вашей модели:

public IEnumerable<Tuple<int,T1,T2>> AvailableSizes { get; set; }
public int SelectedSize { get; set; }

Вы должны сохранить идентификатор размера как пользовательский атрибут:

<ol id="selectable">
    @foreach (var ebat in Model.AvailableSizes)
    {
        <li class="ui-widget-content" data-size-id="@ebat.Item1">@ebat.Item2 x @ebat.Item3</li>                    
    }
</ol>

Вы должны предоставить JavaScript для событий выбора, которые должны прочитать атрибут data-size-id, и установить для него скрытое поле SelectedSize.