Опубликовать выбранный элемент с помощью выбираемого плагина jQuery с ASP.NET MVC 2

Question

У меня есть приложение в разработке, использующее ASP.NET MVC 2 с jQuery. У меня есть список элементов, отображаемых на моей странице, и набор действий, которые можно выполнять с каждым элементом. Вместо того, чтобы повторять ссылки или значки для каждого элемента списка, мы отображаем их на псевдо-панели инструментов в верхней части списка.

Я использую подключаемый модуль jQuery UI Selectable для управления выбором элементов списка. Теперь мне нужно выполнить две вещи:

1. Когда я нажимаю одну из кнопок, мне нужно предоставить идентификатор выбранного элемента списка в качестве аргумента запроса. Например, если я нажимаю кнопку «Редактировать», она должна соответствовать методу действия Edit (int id), в котором «id» извлекается из выбранного элемента в списке. (Кстати, 'id' - это не идентификатор элемента, а идентификатор сервера, который мне нужно встроить в ответ, чтобы я мог использовать его для идентификации элемента на сервере.)

2. Я хочу иметь возможность включать / отключать кнопки на основе других факторов. Например, возможно, один элемент списка нельзя редактировать, потому что он «закрыт». Как только я смогу определить, какой элемент выбран (используя $ (". Ui-selected"), я полагаю), как лучше всего передать другие атрибуты, которые мне нужны, чтобы определить, какие кнопки включены или отключены? Являются ли скрытые поля моим единственным (лучшим) вариантом передачи такой информации клиентскому сценарию?

UPDATE

После прочтения я чувствую, что должен уточнить, что я НЕ хочу выполнять действие асинхронно - так что нет AJAX. Я смотрю на использование нормального поведения типа action-link для кнопок.

Answer 1

Я не использовал плагин jQuery UI Selectable специально, но я только что закончил разработку чего-то очень похожего на то, что вы описываете, поэтому я предложу свои 2 цента на нем.Если существует множество свойств, которые определяют действия, доступные для выполнения с данным объектом, я бы рекомендовал поместить в каждую строку форму (или div, или как вы их планируете), которая предоставляет все свойства, необходимые для определения того, какиедействия могут быть предприняты.Это позволит вам воспользоваться методом jseu's .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 после нажатия кнопки действия и выполнил бы .trigger ('submit'), если вы не хотитеиспользуйте AJAX.

Я также впервые представляю ответ, поэтому надеюсь, что он был отформатирован достаточно хорошо, чтобы иметь смысл.

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 использует две переменные, чтобы определить, какие кнопки должны быть видны и / или включены.

Каждая кнопка, в моем случае, на самом деле реализована как кнопка с изображением, то есть диапазон с оболочкой . Свойство href направлено на следующий метод:

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

Как видите, я использую форму, определенную выше, чтобы передать желаемое действие и вспомогательный аргумент обратно моему контроллеру. Конечно, я мог бы удалить поле формы CommandName и перенаправить саму форму на требуемое действие, используя что-то вроде $ ("form"). Attr ("action", action). Я решил пойти по этому пути, потому что я не хотел, чтобы отдельные действия отображались моим API. Кроме того, я подумал, что это было схоже с событием Command, представляемым традиционными серверными серверными элементами управления ASP.NET, так что кривая обучения для других разработчиков была бы минимальной.