1. ホーム
  2. asp.net-mvc-3

[解決済み] jqueryでAJAX Postを使用して、強型MVC3ビューからモデルを渡す正しい方法

2022-11-06 20:23:47

質問

私はWebプログラマーの初心者なので、私の"jargon"が正しくなければ許してください。 私は、MVC3 フレームワークを使用して ASP.NET を使用するプロジェクトを持っています。

私は、管理者が機器のリストを変更するための管理ビューに取り組んでいます。 機能の 1 つは "update" ボタンで、MVC コントローラに投稿を送信した後、ウェブページ上のエントリを動的に編集するために jquery を使用したいのです。

このアプローチは、ウェブページがデータベースと同期しなくなる懸念が最小である単一の管理設定において、quot;safe" であると推測しています。

私は強く型付けされたビューを作成し、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 });
    }
}

スクリプトをViewで表示します。

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