How do I return option value from DropDownList into controller in ASP.NET

MiguelBarra
January 21, 2022
99 views
0 votes
2 Answers

Here is the Razor code

@Html.DropDownList("ddl", Model.estados.Select(item => new SelectListItem
                   {
                       Value = item.Id_Estado.ToString(),
                       Text = item.Nombre_Estado,
                       Selected = "select" == item.Id_Estado.ToString()
                   }), new { @class = "form-select", aria_label="Default select example" }
                  )

Here is the view model, it’s an IEnumerable:

public class ViewModel
{
    public UsuariosViewModel usuario { get; set; }
    public IEnumerable<TiposUsuariosViewModel> tiposUsuarios { get; set; }
    public IEnumerable<EstadosViewModel> estados { get; set; }
}

Tags: asp.net c#html.dropdownlistfor razor

Answers

change the model

public class ViewModel
    {
        public string ddl {get; set;}
        public IEnumerable<SelectListItem> estadoItems { get; set; }
        public UsuariosViewModel usuario { get; set; }
        public IEnumerable<TiposUsuariosViewModel> tiposUsuarios { get; set; }
        public IEnumerable<EstadosViewModel> estados { get; set; }
    }

in your action add estado items to a view model

estadoItems= context.estados.Select(item => new SelectListItem
                               {
                                   Value = item.Id_Estado.ToString(),
                                   Text = item.Nombre_Estado,
                                }).ToList();
viewModel.estadoItems = estadoItems

and view

@Html.DropDownListFor(model=>model.ddl, @Model.estadoItems, new { @class = "form-select", aria_label="Default select example" });

but it is better to use select, since it is automatically selects item from list

<select class="form-control" asp-for="ddl" asp-items="@Model.estadoItems"> select </select>

I am assuming the you want to send the value of the selected option to your Controller method. Now since you have not shown your Controller method, I will give a basic example using AJAX and Jquery:

First give an id to your drop down list:

@Html.DropDownList("ddl", Model.estados.Select(item => new SelectListItem
                   {
                       Value = item.Id_Estado.ToString(),
                       Text = item.Nombre_Estado,
                       Selected = "select" == item.Id_Estado.ToString()
                   }), new { @class = "form-select", aria_label="Default select eaxmple", @id="myddl" }
                  )

You can have a button which will invoke the event or whatever event you are using, you can do that. I am using a button event here:

<input type="button" value="Process Input" class="btn btn-primary btn-lg btn-block" id="mySubmitbtn" />

Then you can use AJAX to send it to your Controller method and get a response back:

$(document).ready(function () {
    $("#mySubmitbtn").click(function () {
            var mySelectedValue= $('#myddl').find(":selected").text();
            var json = {
               mySelectedValue: mySelectedValue
            };

            var options = {};
            options.url = "@Url.Action("ProcessInput", "Home")";
            options.type = "POST";
            options.data = {"json": JSON.stringify(json)};
            options.contentType = "application/json";
            options.dataType = "json";
            options.success = function (msg) {
                alert("Successfully processed");
            };
            options.error = function () {
                alert("Error");
            };
            $.ajax(options);
    })
});

And finally your Controller method will be:

using System.Web.Script.Serialization;

[HttpPost]
public JsonResult ProcessInput(string json)
{
  var serializer = new JavaScriptSerializer();
  dynamic jsondata = serializer.Deserialize(json, typeof(object));

  //Get your variables here from AJAX call
  var mySelectedValue = jsondata["mySelectedValue"];
  //Do your stuff
}

Please signup or login to give your own answer.

Click here to cancel reply.