web-dev-qa-db-ja.com

Jsonオブジェクト（または文字列データ）をJavascript xmlhttprequestからMVCコントローラーに送信する方法

ASP.NET MVCでWebアプリケーションを作成し、JavaScript AJAXを介してコントローラーを呼び出そうとしました。 JQueryでは、MVCモデルバインダーが自動的に.NETオブジェクトを作成し、コントローラーを引数として渡すjsonオブジェクトを送信できます。

ただし、jqueryを使用できないWebワーカーを使用しています。 AJAXを呼び出してVanilla xmlhttprequestオブジェクトを呼び出します。このメソッドを介してJsonオブジェクトを送信する方法はありますか？

私はxmlhttprequestのsendメソッドを使用しましたが、モデルオブジェクトはコントローラーでnullとして渡されます:(

javascriptasp.netasp.net-mvcxmlhttprequest
17
ganeshran

JSON2を使用して文字列化し、Content-Typeヘッダーからapplication/json投稿したとき。

http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js

あなたは次のようなことをするでしょう：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/Controller/Action');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
}
xhr.send(JSON.stringify(myData));
37
Dve

ここに例があります。 JsonValueProviderFactoryが組み込まれたASP.NET MVC 3.0を使用していることを前提としています。これが当てはまらない場合は、 このブログ投稿 を参照してください。

モデルを見る：

public class MyViewModel
{
    public string Prop1 { get; set; }
    public string Prop2 { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult SomeAction(MyViewModel model)
    {
        return Content("success", "text/plain");
    }
}

見る：

<script type="text/javascript">
    var http = new XMLHttpRequest();

    var value = '{ "prop1": "value 1", "prop2": "value 2" }';
    // It would be better to use JSON.stringify to properly generate
    // a JSON string
    /**
    var value = JSON.stringify({
        prop1: 'value 1',
        prop2: 'value 2'
    });
    **/

    http.open('POST', '/Home/SomeAction', true);
    http.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    http.setRequestHeader('Content-Length', value.length);
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(value); 
</script>
6
Darin Dimitrov