私は初心者のWebプログラマーなので、「専門用語」の一部が正しくない場合はご容赦ください。 MVC3フレームワークを使用するASP.NETを使用するプロジェクトがあります。
管理者が機器のリストを変更する管理ビューで作業しています。機能の1つは「更新」ボタンで、jqueryを使用して、MVCコントローラーに投稿を送信した後、Webページのエントリを動的に編集します。
このアプローチは、Webページがデータベースと同期しなくなる心配がほとんどない単一の管理者設定では「安全」だと思います。
厳密に型指定されたビューを作成し、AJAX投稿を使用してMVCコントロールにモデルデータを渡すことを望んでいました。
次の投稿で、私がやろうとしていることに似ているものを見つけました: JQuery AjaxおよびASP.NET MVC3が原因でnullパラメーターが発生しています
上記の投稿のコードサンプルを使用します。
モデル:
public class AddressInfo
{
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string ZipCode { get; set; }
public string Country { get; set; }
}
コントローラ:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
return Json(new { success = true });
}
}
ビューのスクリプト:
<script type="text/javascript">
var ai = {
Address1: "423 Judy Road",
Address2: "1001",
City: "New York",
State: "NY",
ZipCode: "10301",
Country: "USA"
};
$.ajax({
url: '/home/check',
type: 'POST',
data: JSON.stringify(ai),
contentType: 'application/json; charset=utf-8',
success: function (data.success) {
alert(data);
},
error: function () {
alert("error");
}
});
</script>
上記をまだ使用する機会がありません。しかし、これがAJAXを使用してモデルデータをMVCコントロールに返す「最良の」方法であるかどうか疑問に思っていましたか?
モデル情報の公開について心配する必要がありますか?
Var宣言とstringifyをスキップできます。それ以外の場合、それはうまく動作します。
$.ajax({
url: '/home/check',
type: 'POST',
data: {
Address1: "423 Judy Road",
Address2: "1001",
City: "New York",
State: "NY",
ZipCode: "10301",
Country: "USA"
},
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data.success);
},
error: function () {
alert("error");
}
});
これを実装する3つの方法を見つけました。
C#クラス:
public class AddressInfo {
public string Address1 { get; set; }
public string Address2 { get; set; }
public string City { get; set; }
public string State { get; set; }
public string ZipCode { get; set; }
public string Country { get; set; }
}
アクション:
[HttpPost]
public ActionResult Check(AddressInfo addressInfo)
{
return Json(new { success = true });
}
JavaScript次の3つの方法で実行できます。
1)クエリ文字列:
$.ajax({
url: '/en/Home/Check',
data: $('#form').serialize(),
type: 'POST',
});
ここのデータは文字列です。
"Address1=blah&Address2=blah&City=blah&State=blah&ZipCode=blah&Country=blah"
2)オブジェクト配列:
$.ajax({
url: '/en/Home/Check',
data: $('#form').serializeArray(),
type: 'POST',
});
ここのデータはキー/値のペアの配列です:
=[{name: 'Address1', value: 'blah'}, {name: 'Address2', value: 'blah'}, {name: 'City', value: 'blah'}, {name: 'State', value: 'blah'}, {name: 'ZipCode', value: 'blah'}, {name: 'Country', value: 'blah'}]
3)JSON:
$.ajax({
url: '/en/Home/Check',
data: JSON.stringify({ addressInfo:{//missing brackets
Address1: $('#address1').val(),
Address2: $('#address2').val(),
City: $('#City').val(),
State: $('#State').val(),
ZipCode: $('#ZipCode').val()}}),
type: 'POST',
contentType: 'application/json; charset=utf-8'
});
ここのデータは、シリアル化されたJSON文字列です。名前はサーバーのパラメーター名と一致する必要があることに注意してください!!
='{"addressInfo":{"Address1":"blah","Address2":"blah","City":"blah","State":"blah", "ZipCode", "blah", "Country", "blah"}}'
これは私のために働いた方法です:
$.post("/Controller/Action", $("#form").serialize(), function(json) {
// handle response
}, "json");
[HttpPost]
public ActionResult TV(MyModel id)
{
return Json(new { success = true });
}
あなたが持っているものは大丈夫です-しかし、いくつかの入力を節約するために、あなたは単にあなたのデータに使用することができます
data:$( '#formId')。serialize()
http://www.ryancoughlin.com/2009/05/04/how-to-use-jquery-to-serialize-ajax-forms/ を参照してください。詳細については、構文は非常に基本的です。
MVC 5を使用している場合、このソリューションをお読みください!
私はMVC 3を具体的に求めている質問を知っていますが、MVC 5でこのページを偶然見つけて、私の状況で他の人のために解決策を投稿したいと思いました。上記の解決策を試してみましたが、私にはうまくいきませんでした。アクションフィルターに到達することもなかったので、その理由がわかりませんでした。私は自分のプロジェクトでバージョン5を使用していますが、次のアクションフィルターになりました。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Filters;
namespace SydHeller.Filters
{
public class ValidateJSONAntiForgeryHeader : FilterAttribute, IAuthorizationFilter
{
public void OnAuthorization(AuthorizationContext filterContext)
{
string clientToken = filterContext.RequestContext.HttpContext.Request.Headers.Get(KEY_NAME);
if (clientToken == null)
{
throw new HttpAntiForgeryException(string.Format("Header does not contain {0}", KEY_NAME));
}
string serverToken = filterContext.HttpContext.Request.Cookies.Get(KEY_NAME).Value;
if (serverToken == null)
{
throw new HttpAntiForgeryException(string.Format("Cookies does not contain {0}", KEY_NAME));
}
System.Web.Helpers.AntiForgery.Validate(serverToken, clientToken);
}
private const string KEY_NAME = "__RequestVerificationToken";
}
}
-http
ライブラリではなく、using System.Web.Mvc
とusing System.Web.Mvc.Filters
に注意してください(MVC v5で変更されたものの1つだと思います。-
その後、フィルター[ValidateJSONAntiForgeryHeader]
をアクション(またはコントローラー)に適用するだけで、正しく呼び出されます。
</body>
のすぐ上のレイアウトページに@AntiForgery.GetHtml();
があります
最後に、Razorページで、次のようにajax呼び出しを実行します。
var formForgeryToken = $('input[name="__RequestVerificationToken"]').val();
$.ajax({
type: "POST",
url: serviceURL,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: requestData,
headers: {
"__RequestVerificationToken": formForgeryToken
},
success: crimeDataSuccessFunc,
error: crimeDataErrorFunc
});