js配列をmvcコントローラに渡して別のビューを返す

Question

投稿からコントローラへjs配列を渡してから、データを処理して別のビューに戻したいと思います。私が経験した

問題：データを投稿する

-can't使用アヤックス、あなたが使用している場合、私は

別のビューを返すことができなくなりますので、 $ .postはあなたの行動を呼び出してから、 HTMLの束を返します。そして、あなたはそれを何もしないので、ブラウザはただそれを から投げるだけです。新しいページに移動する場合は、通常の投稿を行い、 はajaxを使用しないでください。 Ajaxはあなたのサーバーを に呼び出す必要がある場合は、現在のページを更新するための情報を取得し、新しいページには移動しません。

は（私はそれが同様に$ http.postも同じだと思う？）私は合格することができませんbecaueと思います（@ Html.Beginform）定期的なポストを使用-can't

js配列？

どうすれば対応できますか？

Answer 1

あなたは絶対に通常のフォームはあなたのjsの中のデータの変数と（非アヤックス）を提出行いたい場合は、あなたがのためのいくつかのフォーム入力要素を構築することができますjs変数にあるデータを取得し、javascriptを使用してこのフォームを送信することができます。要素の名前がアクションメソッドのパラメータと一致する限り、モデルバインドは機能します。

ここでは、jQueryを使用して、ボタンクリックイベントで文字列のリストを送信する簡単な例を示します。

$(function() { 

    var flags = ["aa", "bb", "cc"]; 
    var targetUrl="@Url.Action("Summary","Home")"; 

    $("#SubmitButton").click(function(e) { 

     //First build a form element and set the action attribute value 
     var $f = $("<form></form>").attr("action",targetUrl).attr("method","post"); 

     //Loop throug the string and create an input element for each item 
     $.each(flags, function(a, b) { 

      var $el = $("<input type='hidden' name='flagsChecked' />").attr("value",b); 

      //Add the input element to the form 
      $f.append($el); 

     }); 

     //Add the form to the page and submit the form 
     $f.appendTo("body").submit(); 

    }); 

}); 

であり、httpポストアクションメソッドでは、ビューを返すことができます。

[HttpPost] 
public ActionResult Summary(List<string> flagsChecked) 
{ 
    return View("Summary"); 
} 

あなたのコードはいくつかのデータをUDPATEする場合、私は強くあなたがP-R-G patternに従うと、リダイレクト応答を返すことをお勧めします。

[HttpPost] 
public ActionResult Summary(List<string> flagsChecked) 
{ 
    return RedirectToAction("Summary"); 
} 

Answer 2

@Html.BeginFormで通常の投稿に複数の値を渡すことができます。 この値は、key=foo&key=bar&key=bazのようにエンコードされます。 あなたはより多くの情報が必要な場合は、以下の記事をチェックアウト：https://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Answer 3

MVCコントローラへのパスjsの配列

さてあなたは、2つの個別の問題を抱えています。まず、アプリケーション/ x-www-form-urlencodedまたはmultipart/form-dataまたはjsonをオブジェクト/配列にバインドする必要があります。

Phil Haacked - Model Binding To A List

抜粋：

開始

<form method="post" action="/Home/UpdateInts"> 
    <input type="text" name="ints" value="1" /> 
    <input type="text" name="ints" value="4" /> 
    <input type="text" name="ints" value="2" /> 
    <input type="text" name="ints" value="8" /> 
    <input type="submit" /> 
</form> 

あなたはシオマネキを取り、送信ボタンをクリックすると、データが実際に掲載される内容を見ていた、あなたは以下を参照してくださいね。

ints=1&ints=4&ints=2&ints=8 

デフォルトのモデルバインダーは、同じ名前を持つすべてのこれらの名前/値のペアを見て、あなたのアクションメソッドにint型パラメータとマッチングされるキーint型のコレクションにあることを変換します。ものすごく単純！

エンド

その後、さてあなたはかなりの2つの選択肢があり、別のビュー

を返します。

最初に、標準の<form>要素をURLとフォーム（submitボタン、jQueryなど）を送信する方法で使用します。長所：それは永遠にlitteralyされ、使用するのは非常に簡単でした。短所：ネットワークの停止や何かがある場合、ユーザーエクスペリエンスが非常に悪い（ブラウザ、URLが見つからないため、私は再送信しますか？私は知らない...など）

Ajaxリクエストを使用してデータを送信します。応答が成功すると、window.locationユーザは次の画面にアクセスします。長所：素晴らしいユーザーエクスペリエンス、ネットワークが失敗した場合は、再試行するか、ユーザーに再試行する方法を与えることができます。短所：実装すべきより多くの作業。

Answer 4

投稿する必要はありますか？そうでない場合は、単にポストを作成

var url = "/Controller/Action?"; 
var myArray = {id1: 100, id2: 200, "id3": 300}; 

for (var key in myArray) { 
url += key+"="+myArray[key] + "&" 
} 

window.top.location.href = url 

：

var form = $('<form></form>'); 
var url = "/Controller/Action"; 
form.attr("method", "post"); 
form.attr("action", url); 
var myArray = {id1: 100, id2: 200, "id3": 300}; 

for (var key in myArray) { 
    var field = $('<input></input>'); 

    field.attr("type", "hidden"); 
    field.attr("name", key); 
    field.attr("value", myArray[key]); 

    form.append(field); 
}); 

$(document.body).append(form); 
form.submit();