How to Get HTML drop down list value from View to controller in MVC?

Question

Small help required

1) I have created an html Dropdown in MVC view like this

<select name="Associateddl" id="Associateddl"></select>

2)I am appending the options to the dropdownlist using Jquery Ajax like

$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'customservice.asmx/getallmember',
dataType: 'JSON',
success: function (response) {
var getData = JSON.parse(response.d);
console.log(getData.length);
if (getData.length > 0) {
$("#msg").hide();
$.each(getData, function (i, item) {
var optiontext = "";
optiontext = "<option value='" + item.Aid + "'>" + item.AMail + "</option>";
$("#Associateddl").append(optiontext);
});
}
else {
$("#msg").append("<p style='color:red'><b>Currently there are no members ,Please Add !!</b></p>");
}
},
error: function (err) {
//alert(err);
}
});

3)Now i want to retrive the dropdown selected value to controller from View.

My Model:

public class Event
{
[DisplayName("Event Name")]
[Required(ErrorMessage ="Event Name is Mandatory...")]
public string Eventname { get; set; }
[DisplayName("Event Year")]
[Required(ErrorMessage ="Enter the Year...")]
public int Year { get; set; }
[DisplayName("Associate ID")]
[Required(ErrorMessage ="Associate ID is required...")]
public string Associateddl { get; set; }
}

My Controller:

[HttpPost]
public ActionResult Index(Event eve)
{

string ename = eve.Eventname;
int eyr = eve.Year;
string eassociate = eve.Associateddl; //Here i want to retrive the dropdownselected Value

return View();
}

Please help me to get the Html dropdown seleted value to Controller from View.

You want to retrieve the value in what event ? When the form is submitted ? Is the SELECT element inside a form ? — Shyju, Sep 11 '18 at 18:50
@Shyju when the form is submitted, i want that value in controller. — Satish Marni, Sep 11 '18 at 18:52
Then the `Associateddl` property will be populated with the selected option value. What is happening now ? — Shyju, Sep 11 '18 at 18:54
String eassociate = eve.Associateddl; then i am getting eassociate as “undefined” , i am not getting the value — Satish Marni, Sep 11 '18 at 18:55
That means your option value has that value. Can you add a `console.log(getData)` and share it ? does each item have a `Aid` property ? — Shyju, Sep 11 '18 at 18:57
getData has values , in MVC view dropdown i am getting options to select but i am not able to retrieve the selected option in the controller. Anyway i will share the getData variable value. — Satish Marni, Sep 11 '18 at 19:00
Please find the getData value 0: {AId: 1, AName: "Marni", AMail: "satishmarni10@gmail.com", ADob: "2004-06-20T00:00:00", Active: "N "} 1: {AId: 2, AName: "marni", AMail: "satishmarni99@gmail.com", ADob: "1995-07-29T00:00:00", Active: "Y "} 2: {AId: 3, AName: "marni", AMail: "satishmarni3@gmail.com", ADob: "1995-07-29T00:00:00", Active: "Y "} 3: {AId: 4, AName: "sairam", AMail: "sairam@gmail.com", ADob: "1994-12-11T00:00:00", Active: "N "} — Satish Marni, Sep 12 '18 at 04:38
JavaScript is case sensitive. Replace `item.Aid` with `item.AId` — Shyju, Sep 12 '18 at 04:43
Just now tested and it worked like a charm :-) , Thank You so much for your keen observation and interest in solving the problem. Really appreciate your work :-) — Satish Marni, Sep 12 '18 at 04:52
Possible duplicate of [Getting values from an asp.net mvc dropdownlist](https://stackoverflow.com/questions/1398196/getting-values-from-an-asp-net-mvc-dropdownlist) — Ravikumar, Sep 19 '18 at 14:39

kblau · Answer 1 · 2018-09-11T22:15:46.937

Here is an example on how you can see the value of the ddl in the controller. I will get you an ASP.NET Fiddle you can click on that will host the solution.

web service

[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
    [WebMethod]
    public string getallmember()
    {
        var drop2 = new List<SelectListItem>();
        SelectListItem sli1 = new SelectListItem { Text = "MoreOptions1", Value = "1" };
        SelectListItem sli2 = new SelectListItem { Text = "MoreOptions2", Value = "2" };
        drop2.Add(sli1);
        drop2.Add(sli2);
        //GET NewtonSoft
        var json = JsonConvert.SerializeObject(drop2);
        return json;
    }

Controller

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut118(string Associateddl)
    {
        //put breakpoint here
        return View();
    }

    public ActionResult Tut118()
    {
        return View();
    }

View

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut118</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#theButton").click(function () {
               $.ajax({
                    type: "Post",
                    url: "customservice.asmx/getallmember",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#Associateddl").empty();
                        var theData = JSON.parse(response.d);
                        $.each(theData, function (i, anObj) {
                            $("#Associateddl").append($('<option>').text(anObj.Text).attr('value', anObj.Value));
                        });
                    }
                    ,
                    error: function (request, status, error) {
                        alert(error);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <input type="button" id="theButton" value="click to get ddl" />
            <select name="Associateddl" id="Associateddl"></select>
            <input type="submit" value="click after selecting ddl" />
        }

    </div>
</body>
</html>

Here is the ASP.NET MVC Fiddle (it uses JQuery web method, instead of web service, but my post shows web service) : https://dotnetfiddle.net/9ggy9O — kblau, Sep 11 '18 at 22:39

How to Get HTML drop down list value from View to controller in MVC?

1 Answers1