ASP.NET MVCのコントローラに投稿するとドロップダウンリストの値がnullになる

Question

ASP.NET MVCを初めて使用しています。私は、送信ボタンとhtmlのselect要素を持つ単純なフォームを持っていて、2つの項目が入っています。フォームが私のコントローラに投稿されると、すべてのフォーム値はnullになります。私は$ .POSTを代わりに使ってみました。そして、私が送信しているid変数は、コントローラに到達するとnullです。ここに私のコードは次のとおりです。

HTML

@using (Html.BeginForm("SetOptionForUser", "MyController", FormMethod.Post, new { @class="form-inline" })) 
{ 
    @Html.AntiForgeryToken() 
    <div class="text-center"> 
     <div class="form-group"> 
      <select id="ddlSelect" class="form-control"> 
       @foreach (var item in Model.Persons) 
       { 
        <option value="@item.Id">@item.Name</option> 
       } 
      </select> 
     </div> 
     <button type="submit" class="btn btn-primary" id="btnEnter">Go</button> 
    </div> 
} 

MVCコントローラ

[ValidateAntiForgeryToken] 
[HttpPost] 
public ActionResult SetOptionForUser(FormCollection form) 
    { 
     string option = form["ddlSelect"].ToString(); //null error 
     return RedirectToAction("AnotherAction", "AnotherController"); 
    } 

形式では何も送信されていないようです。私が間違っているのは何

$("#btnEnter").click(function (e) { 
    var optionId = $("#ddlSelect").val(); //this get val correctly 
    $.post(@Url.Action("SetOptionForUser", "MyController"), optionId); 
    }); 

MVCコントローラJS方法

**MVC Controller** 

[ValidateAntiForgeryToken] 
[HttpPost] 
public ActionResult SetOptionForUser(int optionId) //null 
    { 
     string option = optionId.ToString(); //null error 
     return RedirectToAction("AnotherAction", "AnotherController"); 
    } 

ため

JS：私もこれを試してみましたか？

Answer 1

通常のフォームはあなたの選択した要素名とあなたのHTTP POSTアクションメソッドのパラメータ名が同じであれば動作するはず

あなたの通常のフォーム送信提出します。あなたはまた、オプションをレンダリングする代わりに、手動でループを書くの（項目のリストから、SELECT要素を生成するHtml.DropDownListForまたはHtml.DropDownListヘルパーメソッドを使用して検討するかもしれない

<select name="selectedPerson" id="selectedPerson" class="form-control"> 
    <!-- Options goes here --> 
</select> 

とあなたのアクションメソッド

[HttpPost] 
public ActionResult SetOptionForUser(string selectedPerson) 
{ 
    string option = selectedPerson; 
    return RedirectToAction("AnotherAction", "AnotherController"); 
} 

アイテム）。

これがajaxifiedする場合は、あなたがクエリ文字列またはリクエストボディ

$(function(){ 
    $("#btnEnter").click(function (e) { 
    e.preventDefault(); 
    var optionId = $("#selectedPerson").val(); 
    $.post('@Url.Action("SetOptionForUser", "MyController")', { selectedPerson:optionId}); 
    }); 
}); 

のいずれかにデータを送信することができます今のAjax

でデータを送信今すぐ返すにはポイントがありませんajax呼び出しのRedirectResult。アクションメソッドからのjson応答（アクションが成功したかどうかを示す）を返すことを検討し、$ .postの成功コールバックで値を調べて必要な処理を行うことができます。

[HttpPost] 
public ActionResult SetOptionForUser(string selectedPerson) 
{ 
    string option = selectedPerson; 
    return Json(new {status="success"}); 
} 

そして、あなたは、コールバックASPで

var optionId = $("#selectedPerson").val(); 
var url="@Url.Action("SetOptionForUser", "MyController")"; 
$.post(url, { selectedPerson:optionId}, function(response){ 
    if(response.status==="success") 
    { 
     alert("Success"); 
    } 
    else 
    { 
    alert("Some trouble!"); 
    } 
}); 

Answer 2

FormCollectionで応答を確認することができます。NET MVCは、入力要素のname属性に結びついている、このように、あなたのselect HTML要素にname属性を追加します。

<select id="ddlSelect" name="ddlSelect" class="form-control"> 

注：id属性はDOMとname属性で物事を見つける方法であります含まれます何のためにある/ JavaScriptのjQueryのAJAX POSTの問題については

---

形で提出され、私は問題はjQueryのは、あなたのoptionIdがテキストであることをインテリジェントな推測をしているということであると信じています。あなたは、JSONデータを保持し、このように、コントローラに送信するために、その値を文字列化するオブジェクトリテラルを作成する必要があります。

var dataForServer = { 
    optionId: optionId 
}; 

$.post(@Url.Action("SetOptionForUser", "MyController"), 
     JSON.stringify(optionId), 
     null, 
     json); 

Answer 3

私はあなたのコードに欠けて見るだけの事は、あなたのドロップダウンの名前プロパティです。 nameプロパティとフォームのコレクションを持っていませんFormCollection

string option = form["ddlSelect"].ToString(); 

が、あなたのドロップダウンを使用して、あなたの最初の例あなたのための

<select id="ddlSelect" name="ddlSelect" class="form-control"> 
      @foreach (var item in Model.Persons) 
      { 
       <option value="@item.Id">@item.Name</option> 
      } 
     </select> 

は、あなたがNULL値を得ている理由であるリファレンスとしてnameプロパティを使用しています。同じ

ので追加パラメータ

public ActionResult SetOptionForUser(int myDropDownName) //null 
{ 
    string option = myDropDownName.ToString(); //null error 
    return RedirectToAction("AnotherAction", "AnotherController"); 
} 

Answer 4

ASP.NET MVCでFormCollectionは、入力要素

のname属性になってきている中で代わりにIDのドロップダウンnameプロパティを参照する2番目の例で行きますこの属性名= "ddlSelect"

Answer 5

MattoMK、

くださいPOSあなたのモデルのtコード。 通常、モデルは、Webフォームを実行するために必要なすべてのデータと、データを送信するための投稿を保持します。ビューでは、[モデル]フィールドを選択する必要があります。あなたはModel.Personsを持っているようですが、これはおそらく人を表すクラスの列挙可能です。

MODEL

は、あなたのモデルを記述しなかったため、偽の1は、ちょうど2つのプロパティは、リストの選択と人のリストを保持する文字列で示されています。うまくいけば、あなたのHttpGetアクションがあなたのモデルを正しく埋め込むことを望みます。

public class MyModel 
{ 
public string ddSelect { get ; set; } 
public List<Person> Persons { get ; set; } 
} 

HTML（多くの場合、ビューと呼ばれる）

私たちは、明示的にこのビューは、このモデルを使用していることを世界に伝えます。

@model MyModel // Tell MVC what model we are using for this view 
@using (Html.BeginForm("SetOptionForUser", "MyController", FormMethod.Post, new { @class="form-inline" })) 
    { 
    @Html.AntiForgeryToken() 
    <div class="text-center"> 
     <div class="form-group"> 
     @Html.DropDownListFor(m => m.ddSelect, Model.PersonList, new {id = "ddlSelect"})   
     </div> 
     <button type="submit" class="btn btn-primary" id="btnEnter">Go</button> 
    </div> 
} 

MVCコントローラ あなたのコントローラはタイプmymodelというのモデルを返すために、あなたの視野を期待しているので、（それができる場合）、モデルのコピーにフォーム変数をプッシュしようとします。あなたのフォームはモデルプロパティを記入していないので、あなたはNULLを返す。

[ValidateAntiForgeryToken] 
[HttpPost] 
public ActionResult SetOptionForUser(MyModel theModel, FormsCollection collection) 
{ 
    var selectedName = theModel.ddSelect; 
    return RedirectToAction("AnotherAction", "AnotherController"); 
} 

これにより、ドロップダウンリストから選択した値が返されます。サイトから生成されたHTMLに注意を払い（ブラウザでF12キーを押し、ソースを表示）、MVCの動作を確認します。戦うよりも一緒に遊ぶ方が簡単です。上記のPOSTアクションでは、含まれているパラメータコレクションを参照してください。これは、すべてのフォーム変数を保持します。必要に応じて非モデル値を見つけることができます。それは必要ではなく、削除することもできますが、そのコレクションを掘り下げてPOSTでデータがどのように構造化されているかがわかります。

希望の方はこちら