Блог

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

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

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

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

Обновить

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

Я специально не использовал плагин 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 после нажатия кнопки action и выполнил .trigger (‘submit’) для нее, если вы не хотите использовать AJAX.

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

В заключение, вот что у меня получилось (пожалуйста, прокомментируйте, если у вас есть лучшее решение!):

На мой взгляд, я реализовал форму «заглушки», подобную этой:

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

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

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

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

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