Question

作为MVC中的新手，我试图通过Ajax调用将下拉列表值放入mvc控制器这里是视图代码：

<script type="text/javascript">

$(function () {

    $('#myForm').submit(function () {
        var select = $("#SeTime option:selected").val();
        $.ajax({
            url: this.action,
            type: this.method,
            data: {'selectedtTime' : select},
            success: function(result) {
                alert("Selected value: " + select);
            }
        });
        return false;
    });
});
</script>

<div >
@using (Html.BeginForm("Details", "Employee", FormMethod.Get, new { enctype = "multipart/form-data", id="myForm"}))
{
    @Html.DropDownList("SeTime", new List<SelectListItem>
    {
        new SelectListItem{ Text="1 Min", Value = "60" },
        new SelectListItem{ Text="2 Min", Value = "120" },
        new SelectListItem{ Text="3 Min", Value = "180" },
    }, "Select Time")
    <input type="submit" value="Set Time "  />
}
</div>

<p>@Model.SetTime</p> //to show the selected value thru controller to view

这是模特：公共课时间 { public string SetTime {get;组; } }

这是控制器：

public ActionResult Details(string selectedtTime)
    {
        Time time = new Time();
        if (selectedtTime == null)
        {
            time.SetTime = "Hello";
        }
        else
        {
            time.SetTime = selectedtTime;
        }   
        return View(time);
    }
}

我在警告框中获得了正确的值，但在控制器中却没有（获得＆＃39; Hello＆＃39;对于每个选择）。我也试过POST方法，但没有工作。我可以获得一些建议如何通过控制器获取所选的下拉值

Answer 1

这是你如何做到的。如果您还需要更多信息，请与我们联系。

查看：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index59</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var userInterfaceGroups;//undefined at first
            $("#btn").click(function (ev) {

                var select = $("#SeTime option:selected").val();
                alert(select);
                $.ajax({
                    type: "POST",
                    url: "/Home/PostTime",
                    data: { 'selectedtTime': select },
                    dataType: "json",
                    success: function (response) {
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });

            })
        })
    </script>
</head>
<body>
    @Html.DropDownList("SeTime", new List<SelectListItem>
    {
        new SelectListItem{ Text="1 Min", Value = "60" },
        new SelectListItem{ Text="2 Min", Value = "120" },
        new SelectListItem{ Text="3 Min", Value = "180" },
    }, "Select Time")
    @*ajax is a button click not a submit*@
    <input type="button" value="Set Time" id="btn" />
</body>
</html>

控制器：

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult PostTime(string selectedtTime )
    {
        //put a checkpoint here and interrogate selectedTime and work with it
        return Json(new
        {
            aValue = "aValueRet"
        }
               , @"application/json");
    }

Answer 2

您可以使用url：'@Url.Action("Details","Home")' + "/" + select将select参数发送到控制器。我添加了.Netfiddle。它有效here

public ActionResult Details(string selectedtTime)
{
    var time = selectedtTime;
    return Json(new { data = time}, JsonRequestBehavior.AllowGet);
}

$(function () {
    $('#myForm').submit(function () {
      var select = $("#SeTime option:selected").val();
      $.ajax({
        url: '@Url.Action("Details","Home")' + "/" + select,
        type: this.method,
        data: {'selectedtTime' : select},
        success: function(result) {
          alert("Selected value: " + result.data);
        }
      });
      return false;
    });
});

Answer 3

更改以下内容：

var select = $("#SeTime option:selected").val();

为：

var select = $("#SetTime option:selected").val();

同样改变：

@Html.DropDownList("SeTime", new List<SelectListItem>

为：

@Html.DropDownList("SetTime", new List<SelectListItem>

获取下拉列表值到mvc控制器以查看通过Ajax调用

3 个答案: