如何将我的视图中的变量传递给我的控制器？

-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）;'到一开始，它永远不会被调用 –

如何将我的视图中的变量传递给我的控制器？

回答

相关问题