jquery - 查找与用户选择的 <li> 元素关联的数据

Question

我正在使用带有 Razor View 的 MVC3。我给用户一个列表 <li>可供选择:

        <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 Selectable 与这些列表。

我想我可以用 $(".ui-selected:first") 找到所选元素，但是如何获取关联的模型数据，即 @ebat.Item1和@ebat.Item2 ，以便我可以将它们作为参数发送到服务器？

我对我最初的方法很怀疑，我的意思是它不应该这么难。因此，如果您能向我展示在这种情况下一起使用 model、html 和 jquery 的更好方法，那就太好了。谢谢。

Answer 1

您可以为所选值添加隐藏字段并在选择事件上设置其值。

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

虽然，Tuple<T1,T2>没有无参数构造函数，因此模型绑定(bind)器无法创建实例。您可以为每种尺寸提供一个整数 ID，并在 POST 请求中读取该 ID。

您应该使用Tuple<int,T1,T2>为您的可用尺寸属性。此外，您还必须将 ID 值保存为 li 元素上的自定义属性，以便可以将其保存在隐藏字段中。

MVC 仍然无法根据发布请求读取AvailableSizes 属性，因此您必须排除该属性并仅读取SelectedSize 属性。

您的模型属性应如下所示:

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

您应该将尺码 ID 保存为自定义属性:

<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 隐藏字段。