2

我有一个向用户显示的项目列表，并允许他们通过使用 jQuery UI Selectable 交互来选择其中的一个或多个。为了将选定的值发布回控制器，我在每个可选项目中包含一个隐藏的输入字段，我通过选定事件的 javascript 设置。这是我如何设置的示例

模型

public class ItemsViewModel
{
     public List<Item> Items { get; set; }
}

public class Item 
{
     public int Id { get; set; }
     public string Name { get; set; }
     public bool Selected { get; set; }
}

html

<ul id="Items">
     <li>
          <label>Item 1</label>
          <input type="hidden" id="Items[0]_Id" name="Id" value="1" />
          <input type="hidden" id="Items[0]_Selected" name="Items[0].Selected" class="is-selected" value="False" />
     </li>
     <li>
          <label>Item 2</label>
          <input type="hidden" id="Items[1]_Id" name="Items[1].Id" value="2" />
          <input type="hidden" id="Items[1]_Selected" name="Items[1].Selected" class="is-selected" value="False" />
     </li>
</ul>

JavaScript 

 $('#Items').selectable({
        filter: 'li',
        selected: function (event, ui) {
            $(ui.selected).find('input.is-selected').val('True');
        },
        unselected: function (event, ui) {
            $(ui.unselected).find('input.is-selected').val('False');
        }
    });

我的第一个问题，虽然这可行，但它不是最漂亮的解决方案。有没有人有更好的方法来发布可选项目？

其次，我需要确保用户从列表中至少选择了一项。是否可以连接 jQuery 客户端验证以确保用户至少选择了一项？我确实对实现这一点的方法有一些想法，并且创建自定义验证属性没有问题，但我想在我将一些东西放在一起之前，我会问它是否已经完成或最好的方法。

谢谢

4

1 回答 1

1

您尚未显示用于发布项目的代码。对我来说，这似乎是有趣的一点。

至于依赖隐藏字段，我不知道你为什么要这样做。为什么不在选定事件中填充一组项目，然后在执行 AJAX POST 时发送该数组？

itemsToPost = [];

$('#Items').selectable({ 
    filter: 'li', 
    selected: function (event, ui) {
        itemsToPost.push( {id: ui.attr('id'), name:ui.text()}); 
    }, 
    ...

$.ajax({url     : "/whatever/ASPNETMVC/Endpoint",
        cache   : false,
        type    : "POST", // http method
        dataType: "json",
        data    : itemsToPost,
        error   : function(xhr,status,error){
                ...
        },
        success : function(msg, arg2, xhr){
                ...
        });
于 2011-11-11T16:31:04.727 回答