9

私が見つけることができるMVC4アプリのすべての例では、一度に1行のデータに対して編集が機能しています。データのすべての行が表示され、各行には別のページに移動してその1つの行を編集できるように編集されています。

私がやりたいのは、すべてのデータ要素を行に表示することです。ユーザーが各行で[編集]をクリックする代わりに、すべての行のデータポイントは、ユーザーが直接更新できるテキストボックスに既にあります。また、すべての更新/編集を一度に保存するだけのSAVEがページに1つだけあります。

それをサポートするようにMVCアプリをセットアップするにはどうすればよいですか？

4

2 に答える 2

12

これにはEditorTemplatesを使用できます。以下の例は、通常のフォーム投稿の例を示しています。serializeメソッドを使用してフォーム値を送信することにより、必要に応じてそれをajaxifyできます。

コースの学生名のリストを編集する必要があると仮定します。それでは、そのためのいくつかのビューモデルを作成しましょう

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

次に、GETアクションメソッドで、ビューモデルのオブジェクトを作成し、Studentsコレクションを初期化して、強く型付けされたビューに送信します。

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

次に、 Views/ YourControllerNameの下にEditorTemplatesというフォルダーを作成します。次に、以下のコンテンツで呼び出されたビューの下に新しいビューを作成しますStudent.cshtml

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

メインビュー（StudentList.cshtml）で、EditorTemplateHTMLヘルパーメソッドを使用してこのビューを表示します。

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

これにより、テーブル行に含まれるテキストボックスに各学生名を含むすべてのUIが表示されます。Studentsこれで、フォームが投稿されると、MVCモデルバインディングのビューモデルのプロパティにすべてのテキストボックスの値が含まれるようになります。

[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
    });
  });
});
于 2012-11-20T23:28:57.887 に答える
1

適切なモデルと例のリストを指定し、各行（配列の要素）に関する情報を含むajaxを送信し、サーバー側で読み取り、それに応じて各要素を更新する必要があります。この目標には、Postリクエストを使用します。要素のリストをパラメーターとしてコントローラーに渡し、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にバインドすることを検討できます。

于 2012-11-20T23:19:51.520 に答える