如何將我的視圖中的變量傳遞給我的控制器？

-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被髮送回控制器？

來源

2017-06-20 Luke Danger Kozorosky

您的控制器的POST方法在哪裏？ – krillgar

@krillgar在發佈之前我有一個單獨的，但我刪除它試圖讓我的問題更容易理解。它基本上只是一個'ActionResult'函數，我試着將數據傳遞給沒有任何運氣 –

而您如何設置Action方法則決定了如何將數據發送給它。 – krillgar

我建議使用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]) 
     } 

    }) 
}

來源

2017-06-20 14:50:26 hasan

您是否在視圖中放置了代碼的最後一部分？ –

您不必提交表單以獲取控制器的值 – hasan

因此，我必須通過Json解析以生成新的select元素，然後函數應該將選定的選項返回給控制器？ –

一個更好的方法是，你做一個回發到你的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>

來源

2017-06-20 14:43:27 Alpesh

我應該在JavaScript中還是僅在'onClick'中調用回發？ –

好吧，我認爲我們正在與此相處。我即將吃午飯，我會更多地看。希望你到那時還在，但如果我遇到任何問題，我可能會回覆。感謝你目前的幫助！ –

輸入'ActionResult Dropdown（string eventId）'似乎有問題。我添加了'Console.WriteLine（eventId）;'到一開始，它永遠不會被調用 –

如何將我的視圖中的變量傳遞給我的控制器？

回答

相關問題