Come modificare i dati tabulari (ASP MVC)

Question

Devo essere in grado di modificare una tabella di dati nel browser.

Ho visto in MVCContrib c'è un helper HTML per il rendering di un tavolo. Utile ... ma se volessi che l'utente fosse in grado di modificare quella tabella? Da quello che posso vedere, non aiuta lì.

Qual è il modo migliore per avvicinarsi a questo?

FORM tradizionale con una TABELLA all'interno? In tal caso, MVC è abbastanza intelligente da analizzare i dati inviati in una raccolta di righe? Come funzionerebbe comunque?

O forse deve solo passare alla modalità di modifica quando una riga viene cliccato (utilizzando JavaScript, ecc), allora quando l'utente si sposta su una riga diversa un'azione AJAX è chiamato a presentare solo una riga. Posso immaginare che la logica potrebbe diventare complessa qui - presumibilmente si userebbe ancora un modulo, ma dovrei inserirlo dinamicamente nel DOM?

Devo anche essere in grado di aggiungere righe a questa tabella. Non ho bisogno di supporto per il paging.

Esiste una soluzione fuori dallo scaffale?

Devo tornare ai moduli Web? :)

Answer 1

Dai un'occhiata al blog di Phil Haack dove descrive come model bind to a list.

Forse questo può essere d'aiuto?

Answer 2

avrei checkout una delle biblioteche UI javascript prima:

• ExtJS Grid
• Yahoo DataTable
• Flexigrid

WebForms sono più facili quando si tratta di sviluppare rapidamente UI ricche di come le griglie modificabili .

Answer 3

Ieri sera ho implementato una soluzione semplice: form + table inside, utilizzando i campi di input nelle celle con convenzione di denominazione come descritto in Phil Haack's blog (grazie a @BengtBe per il collegamento).

Sta funzionando, ma è un po 'esagerato (ad esempio, l'aggiunta di righe con jquery mi impone di elaborare il prossimo indice inutilizzato).

Quindi sto ancora cercando altre soluzioni.

Uno che ho scoperto è il extjs library che fornisce una griglia molto ricca. Devo ancora capire se esiste un modo semplice per rinviare i dati della griglia a una delle mie azioni del controllore ma ...

Answer 4

Ho lo stesso problema, e ho trovato una soluzione per questo. Non penso che sia il più bello, ma è l'ideale per me, perché uno dei miei requisiti era essere in grado di modificare i dati della tabella utilizzando il plugin Jeditable di jQuery.

Così ho generare una tabella utilizzando del MvcContrib griglia <> estensione:

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"); 

questo momento è possibile modificare i valori in luogo, ma non aggiornare il modello corrispondente. Tutta la magia accade dopo l'utente fa clic pulsante di invio:

$(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' }); 
     }); 

In ogni TD creo input nascosto, con un valore da quel TD, in ogni ingresso fila con indice e il più importante è l'attributo 'name': Nome della raccolta nel modello [qui va indice] .rest.of.path, quindi in questo caso particolare (esempio):

InvoiceLines[2].LineItem.ItemDescription 

Spero che ti aiuto, perché ricca griglia non è sempre una risposta ;)

R egards Mateusz