2

我正在使用带有剃刀视图的 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 Selectable。

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

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

4

2 回答 2

1

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

@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 属性并将其设置为 SelectedSize 隐藏字段的选择事件提供 JavaScript。

于 2012-06-17T13:03:28.340 回答
0

将属性添加到 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];
于 2012-06-17T13:21:55.273 回答