ASP.NET MVC 2 - Советы по управлению

Question

Я новичок в ASP.NET MVC 2, и мне нужно несколько советов о том, как лучше использовать «Управление» в этой ситуации.(Я знаю, что ASP.NET MVC на самом деле не использует серверные элементы управления, но есть ряд надстроек, таких как MVC Controls ToolKit ).

Вот что мне нужноделать.У меня есть таблица в базе данных, которая содержит список тестов.Мне нужно иметь возможность отображать их в представлении, и позволить пользователю выбрать их каким-либо образом (с помощью флажков или что-то еще).

Тогда мне нужно будет определить, какие предметы выбраны.

Может кто-нибудь сказать мне, как лучше всего этого достичь?

Любая помощь / комментарии приветствуются.

TIA.

Answer 1

Если вы сделаете это с функциональностью на стороне клиента, он будет состоять в основном из двух частей:

1. Визуальный HTML
2. Функциональный Javascript

Как бы я это сделал

1. Я бы создал частичное представление, которое отображает таблицу. Если вам нужно использовать это повторно, поместите частичное в папку Views/Shared

2. Каждая TR таблицы имела бы сериализацию JSON объекта, который отображается в этой конкретной строке. Сериализация может быть осуществлена ​​путем написания специального метода расширения объекта, чтобы впоследствии вы могли вызывать ToJson () для любого объекта

   <tr data='<%= this.Model[0].ToJson()'>
       <td class="actions"> <a href="#" class="action-select">Select</a> ... </td>
       <td>...</td>
       ...
   </tr>
   

   Обратите внимание на дополнительный столбец с действиями, которые вам нужно выполнить.

3. также добавьте Javascript, который обеспечит функциональность на стороне клиента ( важно: этот скрипт использует jQuery)

   $(function(){
       var selection = {};
       $(".actions a.action-select").click(function(evt){
           evt.preventDefault();
           var context = $(this);
           var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));
   
           if (selection[rowObj.Id])
           {
               // deselect
               delete selection[rowObj.Id];
           }
           else
           {
               // select
               selection[rowObj.Id] = rowObj;
           }
   });
   

Таким образом, ваши строки будут иметь дополнительный класс selected, когда они выделены, а ваш объект selection всегда будет иметь выбранные строки (или, точнее, их объекты), чтобы вы могли использовать их, как вам угодно.

Дополнительные примечания

Почему я установил selection как объект, а не как массив? Поскольку объекты Javascript являются своего рода ассоциативными массивами, поэтому поиск определенного элемента происходит быстрее, чем перечисление его элементов, если это был обычный массив. Таким образом, я могу сразу увидеть, выбрана строка или нет, а также удалить из нее элемент напрямую.

Результат

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