シナリオ: モデルを更新するには?
ASP MVC 6
モデルを更新しようとしています。モデル情報をクライアント (ブラウザー/アプリ) に渡すために、DTO を使用しています。
質問 1: 更新するには、オブジェクト全体をポストバックする必要がありますか?
質問 2: 更新された情報だけを簡単に渡す方法はありますか? はいの場合、どのように?
質問 3: 更新に JSON パッチを使用できますか?
シナリオ: モデルを更新するには?
ASP MVC 6
モデルを更新しようとしています。モデル情報をクライアント (ブラウザー/アプリ) に渡すために、DTO を使用しています。
質問 1: 更新するには、オブジェクト全体をポストバックする必要がありますか?
質問 2: 更新された情報だけを簡単に渡す方法はありますか? はいの場合、どのように?
質問 3: 更新に JSON パッチを使用できますか?
質問 2: 更新された情報だけを簡単に渡す方法はありますか? はいの場合、どのように?
はい。ビューに必要なプロパティのみを持つビュー モデルを作成する必要があります。
ユースケースが、ユーザーが自分の姓のみを編集できるビューを構築することであると仮定しましょう。
public class EditUserViewModel
{
public int Id {set;get;}
public string LastName {set;get;}
}
そしてあなたのGetで
public ActionResult Edit(int id)
{
var user = yourUserRepository.GetUser(id);
if(user!=null)
{
var v = new EditUserViewModel { Id=id,LastName=user.LastName};
return View(v);
}
return View("NotFound");
}
そして景色
@model EditUserViewModel
@using(Html.BeginForm())
{
@Html.TextBoxFor(s=>S.LastName)
@Html.HiddenFor(s=>s.Id)
<input type="submit" id="saveBtn" />
}
そしてあなたの HttpPost アクション
[HttpPost]
public ActionResult Edit(EditUserViewModel model)
{
// Since you know you want to update the LastName only,
// read model.LastName and use that
var existingUser = yourUserRepository.GetUser(model.Id);
existingUser.LastName = model.LastName;
yourUserRepository.Save();
// TO DO: redirect to success page
}
仮定yourUserRepository
は、データ アクセス クラスの抽象化のオブジェクトです。
質問 1: 更新するには、オブジェクト全体をポストバックする必要がありますか?
エンド ユーザーに何を求めるかによって異なります。このビュー モデル アプローチでは、Id と LastName のみを投稿します。これがユース ケースです。
更新に JSON Patch を使用できますか?
更新が必要なデータ(部分データ)のみを送信しているので、問題ないはずです。
必要に応じて、フォーム データ (ID と LastName のみを持つ) を単純にシリアル化し、jQuerypost
メソッドを使用してサーバーに送信することもできます。
$(function(){
$("#saveBtn").click(function(e){
e.preventDefault(); //prevent default form submit
var _form=$(this).closest("form");
$.post(_form.attr("action"),_form.serialize(),function(res){
//do something with the response.
});
});
});
オーバーポスティングを防ぐために、 HttpPostBind
アクション メソッドで属性を使用してバインディング ホワイトリストを使用できます。ただし、最も安全な戦略は、クライアントが送信できるものと正確に一致するビュー モデル クラスを使用することです。
これの代わりに
UpdateModel(model);
これで呼び出すことができます
await TryUpdateModelAsync(model);