Question

我正在使用带有剃刀视图的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可选择这些列表。

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

我对我最初的做法非常怀疑，我的意思是不应该这么难。所以如果你能告诉我在这种情况下使用模型，html和jquery的更好方法，那就太棒了。感谢。

Answer 1

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

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

虽然Tuple<T1,T2>没有无参数构造函数，但模型绑定器无法创建实例。您可以为每个大小提供一个整数ID，并在POST请求时读取它。

您应该将Tuple<int,T1,T2>用于AvailableSizes属性。此外，您必须将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>

您应该为应该读取data-size-id属性的select事件提供JavaScript，并将其设置为SelectedSize hidden字段。

Answer 2

将属性添加到li标签：

<li class="ui-widget-content" data="@ebat.Item1-@ebat.Item2">@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];

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

2 个答案: