web-dev-qa-db-ja.com

jQuery $ .ajax（）および$ .post（）を使用して文字列データをMVCコントローラーに送信する

私が見逃しているものがあるはずです。 $ .ajax（）と$ .post（）を使用して文字列をASP.NET MVCコントローラーに送信しようとしましたが、コントローラーに到達している間、そこに到達すると文字列はnullになります。だからここに私が試したpostメソッドがあります：

$.post("/Journal/SaveEntry", JSONstring);

そして、これが私が試したajaxメソッドです：

$.ajax({
    url: "/Journal/SaveEntry",
    type: "POST",
    data: JSONstring
});

これが私のコントローラーです：

public void SaveEntry(string data)
{
    string somethingElse = data;
}

背景として、JSON.stringify（）を使用してJSONオブジェクトをシリアル化しましたが、これは成功しています。それをコントローラーに送信してDeserialize（）しようとしています。しかし、私が言ったように、文字列は毎回nullとして到着しています。何か案は？

どうもありがとう。

PDATE：私の問題は、$。post（）のパラメーターとしてキーと値のペアを使用していないことであると回答されました。だから私はこれを試しましたが、文字列はまだnullとしてコントローラーに到着しました：

$.post("/Journal/SaveEntry", { "jsonData": JSONstring });
asp.net-mvcjquerycontroller
14
MegaMatt

答えた。最初の更新後、変数名が正しく設定されていませんでした。 Controllerの変数名をjsonDataに変更したので、新しいControllerヘッダーは次のようになります。

public void SaveEntry(string jsonData)

jSでの私の投稿アクションは次のようになります。

$.post("/Journal/SaveEntry", { jsonData: JSONstring });

JSONstringは、json.orgで提供されている JSONプラグイン を使用してシリアル化した「文字列化」（または「シリアル化」）JSONオブジェクトです。そう：

JSONstring = JSON.stringify(journalEntry);  // journalEntry is my JSON object

したがって、$。postとControllerメソッドの変数名は同じ名前である必要があります。そうでない場合、何も機能しません。知っておくと良い。答えてくれてありがとう。

22
MegaMatt

最終回答：

データフォーマットの問題を整理した後、コメントで提案したように、変数名が彼の投稿に並んでいなかったようです（これも問題であると想定しています）。

実際には、サーバーサイドコードが探している正しいキー名と、Olekの例を使用していることを確認してください。コードが変数データを探している場合は、データをキーとして使用する必要があります。 – prodigitalson6時間前

@prodigitalson、それはうまくいきました。変数名が並んでいませんでした。私がそれを受け入れることができるように、あなたは2番目の答えを投稿しますか？ありがとう。 –メガマット6時間前

そのため、キーと値のペアを使用し、サーバー側のリクエストから正しい変数を取得していることを確認する必要がありました。

データ引数はキーと値のペアである必要があります

$.post("/Journal/SaveEntry", {"JSONString": JSONstring});
5
prodigitalson

DataTypeが欠落しているようです。念のため、contentTypeを設定することもできます。このバージョンを試してみませんか？

$.ajax({
    url: '/Journal/SaveEntry',
    type: 'POST',
    data: JSONstring,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8'
});

乾杯。

1
Alex Bernatskyi

答えてくれてありがとうこれは私の悪夢を解決します。

私のグリッド

..
.Selectable()
.ClientEvents(events => events.OnRowSelected("onRowSelected"))
.Render();

<script type="text/javascript">
function onRowSelected(e) {
        id = e.row.cells[0].innerHTML;
        $.post("/<b>MyController</b>/GridSelectionCommand", { "id": id});
    }
</script>

私のコントローラー

public ActionResult GridSelectionCommand(string id)
{
     //Here i do what ever i need to do
}
1
ngwanevic

道はここにあります。

指定したい場合

dataType： 'json'

次に、を使用します。

$('#ddlIssueType').change(function () {


            var dataResponse = { itemTypeId: $('#ddlItemType').val(), transactionType: this.value };

            $.ajax({
                type: 'POST',
                url: '@Url.Action("StoreLocationList", "../InventoryDailyTransaction")',
                data: { 'itemTypeId': $('#ddlItemType').val(), 'transactionType': this.value },
                dataType: 'json',
                cache: false,
                success: function (data) {
                    $('#ddlStoreLocation').get(0).options.length = 0;
                    $('#ddlStoreLocation').get(0).options[0] = new Option('--Select--', '');

                    $.map(data, function (item) {
                        $('#ddlStoreLocation').get(0).options[$('#ddlStoreLocation').get(0).options.length] = new Option(item.Display, item.Value);
                    });
                },
                error: function () {
                    alert("Connection Failed. Please Try Again");
                }
            });

指定しない場合

dataType： 'json'

次に、

$('#ddlItemType').change(function () {

        $.ajax({
            type: 'POST',
            url: '@Url.Action("IssueTypeList", "SalesDept")',
            data: { itemTypeId: this.value },
            cache: false,
            success: function (data) {
                $('#ddlIssueType').get(0).options.length = 0;
                $('#ddlIssueType').get(0).options[0] = new Option('--Select--', '');

                $.map(data, function (item) {
                    $('#ddlIssueType').get(0).options[$('#ddlIssueType').get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function () {
                alert("Connection Failed. Please Try Again");
            }
        });

指定したい場合

dataType： 'json'およびcontentType： 'application/json; charset = utf-8 '

次に使用する

$.ajax({
            type: 'POST',
            url: '@Url.Action("LoadAvailableSerialForItem", "../InventoryDailyTransaction")',
            data: "{'itemCode':'" + itemCode + "','storeLocation':'" + storeLocation + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            cache: false,
            success: function (data) {

                $('#ddlAvailAbleItemSerials').get(0).options.length = 0;
                $('#ddlAvailAbleItemSerials').get(0).options[0] = new Option('--Select--', '');

                $.map(data, function (item) {
                    $('#ddlAvailAbleItemSerials').get(0).options[$('#ddlAvailAbleItemSerials').get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function () {
                alert("Connection Failed. Please Try Again.");
            }
        });
0
Md. Nazrul Islam

それでも機能しない場合は、ページのURLを確認してくださいから$.postを呼び出しています。

私の場合、このメソッドをlocalhost:61965/Exampleから呼び出していましたが、コードは次のとおりです。

$.post('Api/Example/New', { jsonData: jsonData });

Firefoxはこのリクエストをlocalhost:61965/Example/Api/Example/Newに送信しました。そのため、私のリクエストは機能しませんでした。

0
Jakub Lokša