Question

我正在使用带有jQuery的ASP.NET MVC 2开发一个应用程序。我有一个显示在我的页面中的项目列表以及可以对每个项目执行的一组操作。我们不是重复每个列表项的链接或图标，而是将它们显示在列表顶部的伪工具栏中。

我正在使用jQuery UI Selectable插件来管理选择列表项。现在我需要完成两件事：

当我单击其中一个按钮时，我需要将所选列表项的ID作为参数提交给请求。例如，如果单击“编辑”按钮，它应对应于操作方法Edit（int id），其中“id”从列表中的选定项目中拉出。（顺便说一下，'id'不是元素id，而是我需要嵌入到响应中的服务器的标识符，所以我可以用它来识别服务器上的项目。）
我希望能够根据其他因素启用/禁用按钮。例如，可能无法编辑一个列表项，因为它已“关闭”。一旦我能够确定选择了哪个项目（使用$（“。ui-selected”）我假设），我需要确定哪些按钮启用或禁用所需的其他属性的最佳方式是什么？隐藏字段是我唯一的（最佳）选项，可以将此类信息传递给客户端脚本吗？

更新

阅读更多后，我觉得我应该澄清一点，我不想异步执行动作 - 所以没有AJAX。我正在考虑使用按钮的正常动作链接类型行为。

Answer 1

我没有专门使用jQuery UI Selectable插件，但我刚刚完成了与你所描述的非常相似的东西，所以我会提供2美分。如果有很多属性可以确定可以针对给定对象采取的操作，我建议在每一行中放置一个表单（或者div，或者你将它们放在一起），它提供了确定哪个属性所需的所有属性可以采取行动。这将允许您利用jQuery的.serializeArray（）方法，这非常有用。因此，如果每个对象都有一个表行，它可能看起来像这样：

<table>
 <tr>
 <td>
  <form>
   <input type="checkbox" name="id" value="1" />
   <input type="hidden" name="color" value="red" />
   <input type="hidden" name="size" value="large" />
  </form>
 </td>
 </tr><tr>
 <td>
  <form>
   <input type="checkbox" name="id" value="2" />
   <input type="hidden" name="color" value="orange" />
   <input type="hidden" name="size" value="small" />
  </form>
 </td>
</tr>
</table>

根据您希望运行逻辑以确定可以执行哪些操作（例如，每次选中复选框后），您的javascript可能如下所示：

$(function(){

 $('[name="id"]').bind('click', function(){

  var actionableObjects = [];

  $.each( $('[name="id"]'), function(){

   if($(this).is(':checked')){

       var obj = {},
           arr = $(this).parents('form:first').serializeArray();

       $.each(arr, function(index, p){ obj[p.name] = p.value; })

    actionableObjects.push( obj );

   }

  })

  updateActionIcons( actionableObjects );

 })

})

这应该为您提供一个很好的清洁JSON对象数组。

我不确定这是否是解决此问题的最佳方式，但它对我有用。

就最终提交数据而言，我只需在点击操作按钮后使用jQuery创建一个新表单，如果您不想使用AJAX，则在其上执行.trigger（'submit'）。

这也是我第一次提交答案，所以我希望它的格式足够好，可以理解。

Answer 2

为了结束，这就是我最终的结果（如果您有更好的解决方案，请发表评论！）：

在我的视图中，我已经实现了这样的“存根”形式：

<% using (Html.BeginForm("Command", "MyController"))
   { %>
   <%= Html.Hidden("CommandName") %>
   <%= Html.Hidden("CommandArgument") %>
<% } %>

如上所述，我使用jQuery Selectable插件来管理项目列表及其选择。每个项目都包含我需要用来确定启用或禁用哪些按钮的任何数据点的隐藏字段。以下是我实现Selectable插件的方法：

var selectedValue = null;
var selectedItemHasChildren = false;

$(function () {
    $(".my_list").selectable({
        filter: "tr",
        selected: function (e, ui) {
            var item = $(ui.selected).children("td");

            selectedValue = item.children("input[name=ItemID]").first().val();
            selectedItemHasChildren = (item.children("input[name=HasChildren]")
                                      .first()
                                      .val() == 1);

            UpdateButtonStates();
        }
    });
});

UpdateButtonStates方法使用这两个变量来确定哪些按钮应该可见和/或启用。

在我的情况下，每个按钮实际上都是作为图像按钮实现的 - 所以带有＆lt; a＆gt;的跨度。包装。 href属性指向以下方法：

function Button_Click(action) {
    $("#CommandName").val(action);
    $("#CommandArgument").val(selectedValue);
    $("form").submit();
}

如您所见，我正在使用上面定义的表单将所需的操作和支持参数传递回我的控制器。当然，我可以删除CommandName表单字段，并使用$（“form”）。attr（“action”，action）之类的东西将表单本身重定向到所需的操作。我之所以选择这条路，是因为我不希望我的API公开个别动作。另外我认为这与传统的ASP.NET Button服务器控件公开的Command事件类似，因此其他开发人员的学习曲线将被最小化。

使用带有ASP.NET MVC 2的jQuery可选插件发布所选项目

2 个答案: