MVC4では、一度に複数の行編集を保存する方法は？

Question

MVC4アプリケーションのすべての例では、一度に1行のデータを編集できます。それは、あなたが別のページに連れて行く編集を持っている各行を持つデータのすべての行を表示し、あなたはその1つの行を編集することができます。

私がしたいのは、すべてのデータ要素を行に表示し、ユーザーが各行でEDITをクリックするのではなく、すべての行のデータポイントが既にユーザーが直接更新できるテキストボックスにある。ページには1回だけすべての更新/編集内容を保存するSAVEがあります。

これをサポートするにはどうすればMVCアプリケーションをセットアップできますか？

Answer 1

これにはエディタテンプレートを使用できます。以下の例は、通常の書式転記の例を示しています。 serializeメソッドを使用してフォーム値を送信することで、必要に応じて自由に調整できます。

コースの学生名簿を編集する必要があると仮定します。それでは、今すぐあなたのGETアクションメソッドでは、あなたが私たちのビューモデルのオブジェクトを作成し、Studentsコレクションを初期化し、私たちの強く型付けされたビューに送ること

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;} 
} 

のためのいくつかのviewmodelsを作成してみましょう。

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

は今EditorTemplates下のビュー/ YourControllerNameというフォルダを作成します。そして、その下に新しいビューを作成するには、このビューをもたらすために使用EditorTemplate HTMLヘルパーメソッド、コンテンツ以下

私たちのメインビュー（StudentList.cshtml）で今

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

でStudent.cshtmlと呼ばれます。

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

これは、テーブル行に含まれるテキストボックスに生徒の名前が含まれるすべてのUIを表示します。フォームが投稿されると、MVCモデルバインディングは、ビューモデルのStudentsプロパティにすべてのテキストボックス値を持ちます。

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

Ajaxifiedソリューション

あなたがこれをAjaxifyしたい場合は、ボタンのクリックを提出するフォームを取得し、それをシリアル化し、同じポストアクションメソッドに送るために聞くことができます。保存後にリダイレクトする代わりに、操作のステータスを示すJSONを返すことができます。

$(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

正しいモデルとリストの例を指定し、各行（配列の要素）に関する情報を持つajaxを送信し、それをサーバー側で読み取り、それに応じて各要素を更新するだけです。この目的のために、投稿要求を使用します。パラメータとしての要素のリストをコントローラに渡し、ajaxを使って渡してください。例えば

あなたは、コントローラのように定義することができます

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

やJavaScriptのように考えられます。

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

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

そしてもちろん、あなたの「保存」ボタンを押してその機能を呼び出すイベントハンドラをクリックしていますajaxコールで

KnockoutJSまたは他のMVVMフレームワークを使用して、クライアント側のDOMとデータをバインドすることを検討できます。