Question

我在视图页面上生成了一个<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将其恢复到Controller，但到目前为止我还没有找到任何有用的参考资料。

如何格式化，以便将变量text发送回控制器？

Answer 1

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

    })   
}

Answer 2

更好的方法是，您点击按钮时对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>

如何将变量从我的视图传递到控制器？

2 个答案: