2017-06-20 7 views
-1

ストアドプロシージャのデータを使用して、ビューページに<select>ドロップダウンメニューを生成しました。 JavaScriptを使用して、選択した<option>にアクセスし、テキストを変数に保存しました。今私は別のストアドプロシージャのパラメータとしてそれを使用することができるように私のコントローラにその変数を返す必要があります。ビューからコントローラに変数を渡すにはどうすればいいですか?

は、ここに私のコントローラ、名称「EventsController.cs」

public ActionResult Dropdown(string text) 
    { 
     ViewData["ids"] = db.uspGetAllEventIds().ToArray(); 
     Console.WriteLine(text); 
     return View(); 
    } 

だからあなたは、私が第一ストアドプロシージャを実行し、ビューに送信見ることができます。ここで

は、ビューで何が起こるかです:

@model IEnumerable<Heatmap.Models.Event> 
@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title></title> 
    <script> 
     function showValue() 
     { 
      var list = document.getElementById("EventId"); 
      var text = list.options[list.selectedIndex].text; 
      alert(text);  
     } 
    </script> 
</head> 
<body> 
    <div> 
     @using (Html.BeginForm("", "", FormMethod.Post)) 
     { 
     <select id="EventId"> 
      @{ 
       var ids = ViewData["ids"] as string[]; 
       for (var i = 0; i < ids.Length; i++) 
       { 
       <option>@ids[i]</option> 
       } 
       } 
     </select> 
     <input name="text" type="submit" value="Submit" /> 
     <button onclick="showValue()">Click me!</button> 
     } 
    </div> 
</body> 
</html> 

だから今私はちょうど私が私が選択しoptionへのアクセス権を持っていることを自分自身に証明するためにこのアラート機能を持っています。私はコントローラに戻すためにFormMethod.Postを使用する必要があると確信していますが、私はそれまでの参考文献を見つけることができませんでした。

私の変数textがコントローラに戻されるようにこれをフォーマットするにはどうすればよいですか?

+0

POSTのあなたのコントローラのあなたのアクションメソッドはどこですか? – krillgar

+0

@krillgar投稿する前に私は別のものを持っていましたが、私はそれを削除して私の質問をより理解しやすくしました。それは基本的に私が幸運なしにデータを渡そうとした 'ActionResult'関数でした。 –

+0

どのようにActionメソッドを設定してデータを送信するかを決めました。 – krillgar

答えて

3

私は、ページを更新せずに、コントローラから変数を送信してもらうためにjqueryの$.getJSONメソッドを使用することをお勧めします。私は追加しました.NetFiddleそれは動作しますhere

[HttpGet] 
public JsonResult GetDropdownList() 
{ 
    var yourdata = db.uspGetAllEventIds().ToList(); 
    Console.WriteLine(text); 
    return Json(new { data = yourdata}, JsonRequestBehavior.AllowGet); 
} 

[HttpPost] 
public ActionResult Dropdown() 
{ 
    // add your code here 
} 

//html 
@using (Html.BeginForm("Dropdown","YourControllerName", FormMethod.Post)) 
{ 
    <select id="EventId" name="eventId"> 
    </select>   
    <input name="text" type="submit" value="Submit" />    
} 
<button style="margin-top:20px;" id="yourid">Fill Dropdown!</button> 

// jquery 
$("#yourid").on("click", function(){ 
    showValue(); 
}) 

function showValue() 
{ 
    $.getJSON('@Url.Action("GetDropdownList", "YourControllerName")', function (result) { 

     $("#EventId").html(""); // makes select null before filling process 
     var data = result.data; 
     for (var i = 0; i < data.length; i++) { 
      $("#EventId").append("<option>"+ data[i] +"</option>") 
      console.log(data[i]) 
     } 

    }) 
} 
+0

ビューの最後のセクションを表示していますか? –

+0

フォームを送信してコントローラ – hasan

+0

から値を取得する必要はありません。したがって、Jsonを解析して新しいselect要素を生成する必要があります。その場合、関数は選択したオプションをコントローラに返す必要がありますか? –

0

これを行うには、ボタンをクリックしてDropdown(...)アクションのポストバックを行い、その署名をDropdown(string EventId)に変更して、EventIdを選択する必要があります。

ここでは両方の方法を使用した完全なコードです。

public class EventsController : Controller 
    { 
     public ActionResult Dropdown() 
     { 
      ViewData["ids"] = new[] { 1, 2, 3 }; 
      return View(); 
     } 

     [HttpPost] 
     public ActionResult Dropdown(string eventId) 
     { 
      //call your sp instead of going back to the same page 

      ViewData["ids"] = new[] { 1, 2, 3 }; 
      return View(); 
     } 

     public ActionResult Direct(int id) 
     { 
      //call your sp instead of going back to the same page 

      ViewData["ids"] = new[] { 1, 2, 3 }; 
      return View("Dropdown"); 
     } 

    } 

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title></title> 
    <script 
       src="https://code.jquery.com/jquery-3.2.1.min.js" 
       integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
       crossorigin="anonymous"></script> 
    <script> 
     function showValue() { 
      var list = document.getElementById("EventId"); 
      var text = list.options[list.selectedIndex].text; 
      $.getJSON('/Events/Direct/' + text, function(data) { 
       console.log(data); 
      }); 
     } 
    </script> 
</head> 
<body> 
    <div> 
     @using (Html.BeginForm("Dropdown", "Events", FormMethod.Post)) 
     { 
     <select id="EventId" name="eventId"> 
      @{ 
       var ids = ViewData["ids"] as int[]; 
       for (var i = 0; i < ids.Length; i++) 
       { 
       <option>@ids[i]</option> 
       } 
       } 
     </select> 
     <button type="submit">Postback</button> 
     } 

     <button onclick="showValue()">Get JSON</button> 
    </div> 
</body> 
</html> 
+0

JavaScriptでポストバックを呼び出すか、単に 'onClick'でコールする必要がありますか? –

+0

私はこれでどこかになっていると思います。私は昼食を取ろうとしています。あなたはそれまでにまだ周りにいたいと思っていますが、私は何かを見つけたら投稿しているかもしれません。これまでの助けてくれてありがとう! –

+0

'ActionResult Dropdown(string eventId)'を入力する際に​​問題があるようです。最初に 'Console.WriteLine(eventId);'を追加しましたが、それは決して呼び出されません。 –

関連する問題