web-dev-qa-db-ja.com

jQuery $ .ajax（）ポストリクエストでモデルをMVCコントローラーメソッドに送信する方法

次のコードを使用して自動更新を行う際、投稿を行うと、モデルがコントローラーに自動的に送信されると想定しました。

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    //data:  ??????
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

投稿があるたびに、モデルのvalue属性をインクリメントする必要があります。

public ActionResult Modelpage(MyModel model)
    {                   
        model.value = model.value + 1;

        return PartialView("ModelPartialView", this.ViewData);
    }

しかし、ページがjQuery AJAX requestで投稿された場​​合、モデルはコントローラーに渡されません。AJAX request？

asp.net-mvcjqueryasp.net-ajax
41
ravikiran

簡単な答え（MVC 3以降では、おそらく2）でも、特別なことをする必要はありません。

JSONパラメーターがモデルと一致する限り、MVCは、指定したパラメーターから新しいオブジェクトを構築するのに十分なほどスマートです。存在しないパラメーターはデフォルトになっています。

たとえば、Javascript：

var values = 
{
    "Name": "Chris",
    "Color": "Green"
}

$.post("@Url.Action("Update")",values,function(data)
{
    // do stuff;
});

モデル：

public class UserModel
{
     public string Name { get;set; }
     public string Color { get;set; }
     public IEnumerable<string> Contacts { get;set; }
}

コントローラー：

public ActionResult Update(UserModel model)
{
     // do something with the model

     return Json(new { success = true });
}
49
Chris S

FULLモデルをコントローラーに送信する必要がある場合、最初にモデルをJavaScriptコードで使用できるようにする必要があります。

このアプリでは、拡張メソッドを使用してこれを行います。

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

ビューで、モデルをレンダリングするためにそれを使用します：

<script type="javascript">
  var model = <%= Model.ToJson() %>
</script>

その後、モデル変数を$ .ajax呼び出しに渡すことができます。

25
Laviak

ラジオボタンのグループから選択した値のJSONを送信するMVCページがあります。

私が使う：

var dataArray = $.makeArray($("input[type=radio]").serializeArray());

名前と値の配列を作成します。次に、それをJSONに変換します：

var json = $.toJSON(dataArray)

それからjQueryのajax（）でMVCコントローラーに投稿します

$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json, 
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});

データをネイティブJSONデータとして送信します。

その後、応答ストリームをキャプチャし、それをネイティブC＃/ VB.netオブジェクトに逆シリアル化し、コントローラーで操作できます。

このプロセスをメンテナンスの少ない素敵な方法で自動化するには、ネイティブの自動JSONデシリアライゼーションのほとんどを非常にうまく記述したこのエントリを読むことをお勧めします。

モデルと一致するJSONオブジェクトを一致させると、以下のリンクされたプロセスが自動的にデータをコントローラーにデシリアライズします。それは私にとって素晴らしい作品です。

MVC JSONデシリアライゼーションに関する記事

4
dano

これは、mvcモデルに一致するjavascriptオブジェクトを構築することで実行できます。 javascriptプロパティの名前は、mvcモデルと正確に一致する必要があります。一致しないと、投稿で自動バインドが行われません。サーバー側にモデルを作成したら、それを操作してデータベースにデータを保存できます。

これは、グリッド行のダブルクリックイベントまたは何らかのボタンのクリックイベントによって達成できます。

@model TestProject.Models.TestModel

<script>

function testButton_Click(){
  var javaModel ={
  ModelId: '@Model.TestId',
  CreatedDate: '@Model.CreatedDate.ToShortDateString()',
  TestDescription: '@Model.TestDescription',
  //Here I am using a Kendo editor and I want to bind the text value to my javascript
  //object. This may be different for you depending on what controls you use.
  TestStatus: ($('#StatusTextBox'))[0].value, 
  TestType: '@Model.TestType'
  }

  //Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox 
    //selected value. This puzzled me due to the conversion to Json object in the Ajax call. 
  //By parsing the Type to an int this worked.

  javaModel.TestType = parseInt(javaModel.TestType);

  $.ajax({
      //This is where you want to post to.
      url:'@Url.Action("TestModelUpdate","TestController")', 
      async:true,
      type:"POST",
      contentType: 'application/json',
      dataType:"json",
      data: JSON.stringify(javaModel)
  });
}
</script>


//This is your controller action on the server, and it will autobind your values 
//to the newTestModel on post.

[HttpPost]
public ActionResult TestModelUpdate(TestModel newTestModel)
{
 TestModel.UpdateTestModel(newTestModel);
 return //do some return action;
}
3
logan gilley

データ属性を明示的に渡す必要があると思います。これを行う1つの方法は、data = $（ '＃your-form-id'）。serialize（）;を使用することです

この投稿は役に立つかもしれません。 jqueryとajaxで投稿

こちらのドキュメントをご覧ください。 Ajax serialize

2
rajesh pillai

変数を作成してajaxに送信できます。

var m = { "Value": @Model.Value }

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    data:  m,
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

モデルのすべてのフィールドはm単位でなければなりません。

1
Majid Hosseini

Ajax呼び出しで言及-

data:MakeModel(),

以下の関数を使用して、データをモデルにバインドします

function MakeModel() {

    var MyModel = {};

    MyModel.value = $('#input element id').val() or your value;

    return JSON.stringify(MyModel);
}

[HttpPost]属性をコントローラーアクションにアタッチします

on POSTこのデータは利用可能になります

0
Sarang Raotole