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

Question

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

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

1. 当我单击其中一个按钮时，我需要将所选列表项的 id 作为参数提交给请求。例如，如果我单击“编辑”按钮，它应该对应于操作方法 Edit(int id)，其中“id”是从列表中选定的项目中提取的。 （顺便说一句，“id”不是元素 id，而是来自服务器的标识符，我需要将其嵌入到响应中，以便我可以使用它来识别服务器上的项目。）

2. 我希望能够启用/根据其他因素禁用按钮。例如，可能无法编辑一个列表项，因为它已“关闭”。一旦我能够确定选择了哪个项目（我假设使用 $(".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 插件-in 管理项目列表及其选择。每个项目都包含我需要用来确定启用或禁用哪些按钮的任何数据点的隐藏字段。以下是我实现 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 方法使用两个变量来确定哪些按钮应该可见和/或启用。

在我的例子中，每个按钮实际上都是作为图像按钮实现的 - 因此带有 的跨度。包装纸。 href 属性针对以下方法：

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

如您所见，我使用上面定义的表单将所需的操作和支持参数传递回我的控制器。当然，我可以消除 CommandName 表单字段，并使用 $("form").attr("action", action) 之类的内容将表单本身重定向到所需的操作。我选择走这条路线是因为我不希望我的 API 公开单独的操作。另外，我认为这与传统 ASP.NET Button 服务器控件公开的 Command 事件非常相似，因此其他开发人员的学习曲线将最小化。