jquery - 使用 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 对象数组供您使用。

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

就最后提交数据而言，如果您不想使用 AJAX，我将在单击操作按钮后使用 jQuery 创建一个新表单，并对其执行 .trigger('submit') 操作。

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