Jak edytować dane tabelaryczne (ASP MVC)?

Question

Potrzebuję móc edytować tabelę danych w przeglądarce.

Widziałem w MVCContrib istnieje helper HTML do renderowania tabeli. Przydatne ... ale co jeśli chcę, aby użytkownik mógł edytować tę tabelę? Z tego, co widzę, nie pomaga.

Jaki jest najlepszy sposób podejścia do tego?

Tradycyjne FORMY z TABELĄ w środku? Jeśli tak, to czy MVC jest na tyle sprytny, aby sparsować dane z powrotem do zbioru wierszy? Jak to by się stało?

A może powinien po prostu przejść do trybu edycji po kliknięciu wiersza (przy użyciu javascript itp.), A kiedy użytkownik przejdzie do innego wiersza, akcja AJAX jest wywoływana, aby wysłać tylko jeden wiersz. Mogę sobie wyobrazić, że logika może się tu skomplikować - to prawdopodobnie nadal będzie używać formularza, ale czy muszę go dynamicznie wstawiać do DOM?

Potrzebuję również móc dodawać wiersze do tej tabeli. Nie wymagam obsługi stronicowania.

Czy istnieje rozwiązanie z półki na półce?

Czy powinienem wrócić do formularzy internetowych? :)

Answer 1

Zobacz blog Phila Haacka, w którym opisuje, jak model bind to a list.

Może to może pomóc?

Answer 2

bym kasy jedną z javascript bibliotek UI pierwszy:

• ExtJS Grid
• Yahoo DataTable
• Flexigrid

WebForms są łatwiejsze, jeśli chodzi o szybko rozwijających się bogatych UI Like edycji siatek .

Answer 3

Ostatniej nocy zaimplementowałem proste rozwiązanie: formularz + stolik wewnątrz, używając pól wejściowych w komórkach z konwencją nazewnictwa opisaną w Phil Haack's blog (dzięki @BengtBe dla linku).

Działa, ale jest nieco skrzypiący (np. Dodawanie wierszy z jquery wymaga ode mnie opracowania następnego nieużywanego indeksu).

Wciąż szukam dalszych rozwiązań.

Jednym z odkryłem jest extjs library, który zapewnia bardzo bogatą siatkę. Muszę jeszcze sprawdzić, czy istnieje łatwy sposób na przywrócenie danych siatki do jednego z moich działań kontrolera jeszcze ...

Answer 4

Mam ten sam problem, i znalazłem rozwiązanie dla niego. Nie sądzę, że jest najpiękniejsza, ale jest dla mnie idealna, ponieważ jednym z moich wymagań była możliwość edycji danych w tabeli za pomocą wtyczki jQuery's Jeditable.

Więc wygenerować tabelę korzystając MvcContrib za siatkę <> Rozszerzenie:

Html.Grid<Somenamespace.Line>(Model.InvoiceLines) 
      .Attributes(id => "InvoiceGrid") 
      .Columns(column => { 
       column.For(li => li.LineItem.ItemDescription).Attributes(name => ".LineItem.ItemDescription", @class => "click"); 
       column.For(li => li.LineItem.InvoiceUnitNetPrice).Named("Unit net price ").Attributes(name => ".LineItem.InvoiceUnitNetPrice", @class => "click"); 
       column.For(li => li.LineItem.InvoiceQuantity).Attributes(name => ".LineItem.InvoiceQuantity", @class => "click"); 
      }) 
      .Render(); 
//rest of the code 
Html.Submit("_submit", "Save"); 

Teraz można edytować w miejsce wartości, ale nie zaktualizować odpowiadający model. Cała magia dzieje się po kliknięciu przez użytkownika przycisku złożyć:

$(document).ready(function() { 
     $('#_submit').click(function(e) { 
       e.preventDefault(); 
       $('#InvoiceGrid tbody tr').each(function(index) { 
        var hidden = $('<input />').attr({ type: 'hidden', name: 'InvoiceLines.Index', value: index }); 
        $(this).children('td:first-child').before(hidden); 
        $(this).children('td:not(:first-child)').each(function() { 
         $(this).append($('<input />').attr({ type: 'hidden', value: $(this).text(), name: 'InvoiceLines[' + index + ']' + $(this).attr('name') })); 
        }); 
       }); 
       $('form').submit(); 
      }); 

      //editable stuff    
      $('.click').editable(function(value, settings) { 
       return (value); 
      }, { submit: 'OK' }); 
     }); 

W każdym TD tworzę ukryte wejście, o wartości od tego TD, w każdym wejściu rzędzie z Indeksu, a najważniejsza tutaj jest atrybut „name”: Nazwa kolekcji na model [tu idzie indeks] .rest.of.path, więc w tym konkretnym przypadku (przykład):

InvoiceLines[2].LineItem.ItemDescription 

nadzieję, że to pomoże, bo bogata siatka nie zawsze jest odpowiedzią ;)

R egardy Mateusz