CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
zam
zam

Reputation: 191

Get the dropdown list value into mvc controller to View thru Ajax call

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: 8195

Answers (3)

hasan
hasan

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

sleeyuen
sleeyuen

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

kblau
kblau

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

Related Questions