web-dev-qa-db-ja.com

アクションへのajax呼び出しを使用してformcollectionを渡す方法は？

フォーム送信をajax呼び出しに置き換えようとしています。アクションにはフォームコレクションが必要であり、新しいモデルを作成したくありません。したがって、フォーム全体を（フォーム送信と同様に）渡す必要がありますが、ajax呼び出しを使用します。 Jsonをシリアル化して使用しようとしましたが、formcollectionが空です。これは私のアクション署名です：

public ActionResult CompleteRegisteration(FormCollection formCollection)

これが私の送信ボタンのクリックです：

var form = $("#onlineform").serialize();              
            $.ajax({
                url: "/Register/CompleteRegisteration",                
                datatype: 'json',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",                
                success: function (data) {
                    if (data.result == "Error") {
                        alert(data.message);
                    }
                }
            });

どうすればフォームコレクションにデータを渡すことができますか？

c#jqueryajaxasp.net-mvc
14
Armen

FormCollectionは多数のキーと値のペアであるため、JSONはその表現には不適切なデータ形式です。シリアル化された形式の文字列を使用する必要があります：

var form = $("#onlineform").serialize();
$.ajax({
    type: 'POST',
    url: "/Register/CompleteRegisteration",
    data: form,
    dataType: 'json',
    success: function (data) {
        if (data.result == "Error") {
            alert(data.message);
        }
    }
});

主な変更：

  1. type POSTに設定されたリクエストの場合（ここでは不要ですが、より自然に見えます）
  2. リクエストとしてのJSON文字列の代わりにシリアル化された形式data
  3. contentType削除-JSONを送信しなくなりました
35
Andrei

試してください：

$(<your form>).on('submit',function(){
    $.ajax({
        url: "/Register/CompleteRegisteration" + $(this).serialize(), 
        // place the serialized inputs in the ajax call                
        datatype: 'json',
        contentType: "application/json; charset=utf-8",                
        success: function (data) {
            if (data.result == "Error") {
                alert(data.message);
            }
        }
    });
});
5
Angry_Yodeler

誰かが追加のデータをFormCollectionに渡したい場合は、以下を試すことができます。

<script type="text/javascript"> 
function SubmitInfo() 
{
    var id = $("#txtid").val();    
    var formData = $('#yourformname').serializeObject();
    $.extend(formData, { 'User': id }); //Send Additional data

    $.ajax({
        url: 'Controlle/GetUser',
        cache: false,
        type: 'POST',
        dataType: 'json',
        data: decodeURIComponent($.param(formData)),
        success: function (data) {
            $('#resultarea').html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });
}

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
<script/>

アクション方法

public ActionResult GetUser(FormCollection frm)
  {
   int UserId = Convert.ToInt32(frm["user"]);
   // your code
   return Json(data, JsonRequestBehavior.AllowGet);
  }

リンクを参照 詳細。

1
Sushil Jadhav