In MVC4, come salvare più modifiche di riga contemporaneamente?

Question

Ogni esempio che posso trovare su un'app MVC4 ha la modifica che funziona su una riga di dati alla volta. Visualizza tutte le righe di dati con ogni riga con una modifica che ti porta in un'altra pagina e ti consente di modificare quella riga.

Quello che mi piacerebbe fare è visualizzare tutti gli elementi di dati in righe e invece di fare in modo che l'utente debba fare clic su MODIFICA su ogni riga, tutti i punti di dati delle righe sarebbero già presenti in caselle di testo che l'utente può aggiornare direttamente . E c'è solo un SAVE nella pagina che salverà tutti gli aggiornamenti/modifiche in una sola volta.

Come posso configurare la mia app MVC per supportarla?

Answer 1

Per questo è possibile utilizzare un EditorTemplates. L'esempio seguente mostra il normale esempio di pubblicazione di moduli. Puoi azzerarlo se necessario utilizzando il metodo serialize e inviando i valori del modulo.

Assumendo È necessario modificare l'elenco dei nomi degli studenti per un corso. Così Creiamo alcuni ViewModels per quella

public class Course 
{ 
    public int ID { set;get;} 
    public string CourseName { set;get;} 
    public List<Student> Students { set;get;} 

    public Course() 
    { 
    Students=new List<Student>(); 
    } 
} 
public class Student 
{ 
    public int ID { set;get;} 
    public string FirstName { set;get;} 
} 

Ora nel tuo metodo di azione GET, si crea un oggetto del nostro modello di vista, inizializzare la raccolta Students e inviarlo al nostro punto di vista fortemente tipizzato.

public ActionResult StudentList() 
{ 
    Course courseVM=new Course(); 
    courseVM.CourseName="Some course from your DB here"; 

    //Hard coded for demo. You may replace this with DB data. 
    courseVM.Students.Add(new Student { ID=1, FirstName="Jon" }); 
    courseVM.Students.Add(new Student { ID=2, FirstName="Scott" }); 
    return View(courseVM); 
} 

Ora create una cartella chiamata EditorTemplates sotto Visite/YourControllerName. Quindi creare una nuova vista sotto quel chiamato Student.cshtml con tenore di

@model Student 
@{ 
    Layout = null; 
} 
<tr> 
<td> 
    @Html.HiddenFor(x => x.ID) 
    @Html.TextBoxFor(x => x.FirstName) </td> 
</tr> 

Ora a nostro avviso principale (StudentList.cshtml), metodo di supporto Usa EditorTemplate HTML per portare questo punto di vista.

@model Course 
<h2>@Model.CourseName</h2> 
@using(Html.BeginForm()) 
{ 
    <table> 
    @Html.EditorFor(x=>x.Students) 
    </table> 
    <input type="submit" id="btnSave" /> 
} 

Questo porterà tutta l'interfaccia utente con ciascuno dei nomi degli studenti in una casella di testo contenuta in una riga della tabella. Ora, quando il modulo viene pubblicato, il binding del modello MVC avrà tutto il valore della casella di testo nella proprietà Students del nostro modello viewmodel.

[HttpPost] 
public ActionResult StudentList(Course model) 
{ 
    //check for model.Students collection for each student name. 
    //Save and redirect. (PRG pattern) 
} 

soluzione Ajaxified

Se volete Ajaxify questo, si può ascoltare il pulsante di invio clic, ottenere la forma e serializzare e inviare allo stesso metodo di azione posta. Invece di reindirizzare dopo il salvataggio, è possibile restituire alcuni JSON che indicano lo stato dell'operazione.

$(function(){ 
    $("#btnSave").click(function(e){ 
    e.preventDefault(); //prevent default form submit behaviour 
    $.post("@Url.Action("StudentList",YourcontrollerName")", 
        $(this).closest("form").serialize(),function(response){ 
    //do something with the response from the action method 
    }); 
    }); 
}); 

Answer 2

È sufficiente specificare il modello corretto, l'elenco di esempio e inviare ajax le informazioni su ogni riga (elemento dell'array), leggerlo sul lato server e aggiornare di conseguenza ciascun elemento. Per questo obiettivo si utilizza la richiesta di posta. Basta passare l'elenco di elementi come parametri nel controller e passarlo usando l'ajax.

Per esempio si controllore potrebbe essere definita come:

public ActionResult Update(List<MyEntity> list) 
{ 
... 
} 
public class MyEntity 
{ 
public string Name {get; set;} 
public int Count {get; set;} 
} 

e potrebbe essere JavaScript come:

var myList = new Array(); 
// fill the list up or do something with it. 

$.ajax(
{ 
    url: "/Update/", 
    type: "POST", 
    data: {list: myList} 
} 
); 

e naturalmente il vostro pulsante "Salva" ha cliccare gestore di eventi che chiamerà tale funzionalità con la chiamata ajax.

Per comodità è possibile considerare l'utilizzo di KnockoutJS o altri framework MVVM per associare i dati al DOM sul lato client.