Reputation: 191
as new in MVC, I am trying to get the dropdown list value into mvc controller thru Ajax call here is the Views code:
<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
Here is Model: public class Time { public string SetTime { get; set; } }
Here is the controller:
public ActionResult Details(string selectedtTime)
{
Time time = new Time();
if (selectedtTime == null)
{
time.SetTime = "Hello";
}
else
{
time.SetTime = selectedtTime;
}
return View(time);
}
}
I am getting the right value in alert box but not in the controller (getting 'Hello' for each selection). I have also tried with POST method but didn't work. May I get some advice how to get the selected dropdown value thru controller
Upvotes: 1
Views: 8189
Reputation: 3502
You can use url: '@Url.Action("Details","Home")' + "/" + select
to send select parameter to controller. I added .Netfiddle. It works 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;
});
});
Upvotes: 1
Reputation: 951
Change the following:
var select = $("#SeTime option:selected").val();
to:
var select = $("#SetTime option:selected").val();
Also change:
@Html.DropDownList("SeTime", new List<SelectListItem>
to:
@Html.DropDownList("SetTime", new List<SelectListItem>
Upvotes: 0
Reputation: 2107
Here is how you do it. Please let me know if you need anything more.
View:
<!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>
Controller:
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");
}
Upvotes: 1