How to get text from DropDownList in .Net-MVC?

Jithil John

11y35.7kLearn iOS Programming

Here is my code :

@Html.DropDownListFor(model => model.Category, new List {new SelectListItem { Text = "Select", Value= "0"},

new SelectListItem { Text = "Creator", Value= "C"},new SelectListItem { Text = "Assignee", Value= "A"},

new SelectListItem { Text = "Reporter", Value= "R"} })

16 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajeev Punhani10y ago
Hi Jithil,
You cannot get the text of a dropdown directly in MVC using forms collection.By default the value of dropdown is posted in forms collection,but you can access the same using hidden field.Below is the snippet for the same.
$(document).ready(function(){
$("#Category").change(function(){
varcatText=$("#Categoryoption:selected").text();
$("#hidCategory").val(catText);
});
});
In the controller action you can access the same .
public ActionResult Index(FormCollection collection)
{
varcat=collection["hidCategory"];
}
If the above solution is helpful then,accept the answer.
0
Rohit Mane10y ago
You may not get this easily with the default model binding. You have to a small workaround like this.
1) Add a new property to your model/viewmodel to store the selected text
```
public class DocumentModel { public int TypeID { get; set; } public List<SelectListItem> DocumentTypes { get; set; } public string SelctedType { set;get;} }
```
2) Use Html.HiddenFor Helper method to create a hidden variable in the form for this property
```
@Html.HiddenFor(x => x.SelctedType)
```
3) Use little javascript to override the submit ! ie; When user submits the form, Get the selected Text from the dropdown and set that value as the value of the Hidden field.
```
$(function () {     $("form").submit(function(){ var selTypeText= $("#TypeID option:selected").text();         $("#SelctedType").val(selTypeText); }); });
```
Now in your HTTPPost action method, This will be available in the SelectedType property.
```
[HttpPost] public void UploadDocument(DocumentModel model) { if(ModelState.IsValid) { string thatValue=model.SelectedType; } }
```
0
Vishwakant Tripathi10y ago
@Vandana, Here I am posting one sample code, that can help you
1). First create a model like below posted..
public class EmployeeModel
{
public int EmployeeId { get; set; }
public string EmpName { get; set; }
public double Salary { get; set; }
public List listEmp { get; set; }

public IEnumerable EmployeeListItems
{
get { return new SelectList(listEmp, "EmployeeId", "EmpName"); }
}
}

2.) Now you create these two Actions in your controller.
public ActionResult EmpTest()
{
var employeeModel = new EmployeeModel();
employeeModel.listEmp = GetEmployeeDataFromDB();
//Set default emp records
employeeModel.EmployeeId = employeeModel.listEmp.First().EmployeeId;
employeeModel.EmpName = employeeModel.listEmp.First().EmpName;
employeeModel.Salary = employeeModel.listEmp.First().Salary;
return View(employeeModel);
}
[HttpPost]
public ActionResult EmpTest(EmployeeModel model)
{
var employeeModel = new EmployeeModel();
employeeModel.listEmp = GetEmployeeDataFromDB();
//Filter empData based on empId
//This filter part you can do through ado.net method
//Dropdownlist selected EmployeeId will be model.EmployeeId that can be passed in to ado.net method
var emp = employeeModel.listEmp.Where(e => e.EmployeeId == model.EmployeeId).FirstOrDefault();
//Set default emp records
employeeModel.EmployeeId = emp.EmployeeId;
employeeModel.EmpName = emp.EmpName;
employeeModel.Salary = emp.Salary;
return View(employeeModel);
}
3.) Put this private method into controller. But it is actually your ado.net, where you can write query to fetch data from database.
private List GetEmployeeDataFromDB()
{
//Here you can write your query to fetch data from db
var listEmp = new List();
var emp1 = new EmployeeModel();
emp1.EmployeeId = 1;
emp1.EmpName = "Employee1";
emp1.Salary = 50000;

var emp2 = new EmployeeModel();
emp2.EmployeeId = 2;
emp2.EmpName = "Employee2";
emp2.Salary = 56000;
var emp3 = new EmployeeModel();
emp3.EmployeeId = 3;
emp3.EmpName = "Employee3";
emp3.Salary = 60000;
listEmp.Add(emp1);
listEmp.Add(emp2);
listEmp.Add(emp3);

return listEmp;

}
4.) This is View sample.(You can customize it)
@model MvcApplication1.Models.EmployeeModel
@{
ViewBag.Title = "EmpTest";
}
EmpTest
@using (Html.BeginForm("EmpTest","Home",FormMethod.Post, new { id = "demoForm", name = "demoForm" }))
{
@Html.DropDownListFor(m => m.EmployeeId, Model.EmployeeListItems, "---Select Employee---", new { Class = "ddlStyle", onchange = "SelectedIndexChanged()" })
EmployeeModel

@Html.DisplayNameFor(model => model.EmployeeId)

@Html.DisplayFor(model => model.EmployeeId)

@Html.DisplayNameFor(model => model.EmpName)

@Html.DisplayFor(model => model.EmpName)

@Html.DisplayNameFor(model => model.Salary)

@Html.DisplayFor(model => model.Salary)

}
5.) And finally you page will look like this. Yellow marked line indicates data coming from codebehind.

I hope it will help you a lot. First try to make a sample with above example and then customize as your requirement.
All the best.

0
vandana rathi10y ago
Thanks for the reply Vd Tripathi, I want to get the vale of EmpName, Salary Dept by selecting the EmpId on selected index change event in mvc
0
Vishwakant Tripathi10y ago
@Vandana Rathi
Do you want to get dropdownlist select value in ado.net method? If it is, better you should call your Controller's action method through jquery/javascript as ajax get/post method. Your action should have one parameter for dropdownlist selected value and same parameter name should be passed in ajax call with dropdown selected value.
you can follow this thread how to get dropdownlist selected value on change event.
1.) http://stackoverflow.com/questions/20225823/jquery-ajax-callback-onchange-from-dropdownlist
2.) https://api.jquery.com/change/
And how to do ajax call, follow this link
1.) http://stackoverflow.com/questions/18697034/how-to-pass-parameters-in-ajax-post
2.) http://www.w3schools.com/jquery/ajax_ajax.asp
3.) http://api.jquery.com/jquery.ajax/

Edit- And in last from controller's action, you can call selected value to your ado.net method.
Hope this information will help you.
0
vandana rathi10y ago
I wanted to get the value by clicking on dropdown to the textboxes by ado.net method in mvc
0
Vincent Maverick Durano11y ago
Also, if you are new to ASPNET MVC then here's a step by step tutorial about doing insert,update and delete using Entity Framework:

http://geekswithblogs.net/dotNETvinz/archive/2011/06/03/asp.net-mvc-3-creating-a-simple-sign-up-form.aspx

http://geekswithblogs.net/dotNETvinz/archive/2012/01/09/asp.net-mvc-3---editing-and-updating-the-form.aspx
0
Vincent Maverick Durano11y ago
When submitting, I want to insert that drop down value in to the DB and the text to the UI.

The code provided should enable you to get the dropdownlist value. You should be able to insert that value to your database. You can also use ViewBag to pass the selected value to your Index. A Quick example for inserting is something like this using the traditional ADO.NET:
public ActionResult(string dropDownSelected){
//the dropDownSelected will contain the selected value from the list (the value of the selected option)

//Otherwise you can access it through the Request.Form collection
string selected = Request.Form["YourDropDownName"];
InsertData(selected);

ViewBag.Selected = selected;

return View("Index");
}

private void InsertData(string selectedItem){
using (SqlConnection connection = new SqlConnection("YOUR CONNECTION STRING HERE")) {
string sql = "INSERT INTO TableName (FieldName) VALUES (@Val1)";
using (SqlCommand cmd = new SqlCommand(sql, connection)) {
connection.Open();
cmd.Parameters.AddWithValue("@Val1", selectedItem);
cmd.ExecuteNonQuery();
}
}
}

Then you can display the value of the ViewBag like this in your Index view:

@ViewBag.Selected
0
Jithil John11y ago
When submitting, I want to insert that drop down value in to the DB and the text to the UI.
0
Vishwakant Tripathi11y ago
There is little bit confusion in your question now, like you asked you want to get text from dropdownlist, now you want to show it on some different page.

can you please be more clear on how many pages you have in this scenario, and which page have dropdownlist control, and on which page you want to show it.
0
Jithil John11y ago
I want to display it in the index page.
0
Vishwakant Tripathi11y ago
If you want to show dropdown selected text on UI as user select it, then you need to use jQuery for dropdownlist selection event.And for db, i think my previous answer will help you because as you will get selected value in Controller through model, you can do save operation.

//in above example, selectedValue is id of dropdownlist.
0
Jithil John11y ago
I want to display that text in my UI, and the value in my db
0
Vincent Maverick Durano11y ago

As long as your DropDownList is within a form and then submit this form to an MVC action, you can grab the value that was selected from your DropDownList by it's name :
public ActionResult(string dropDownSelected){
      //the dropDownSelected will contain the selected value from the list (the value of the selected option)

      //Otherwise you can access it through the Request.Form collection
      string selected = Request.Form["YourDropDownName"];
      return View();
}
0
Vishwakant Tripathi11y ago
If you want to get drop down list selected value in controller so you will be able to get it through model property, in below example, I added one selectedValue property in my model, and through that property you can get it on controller.

@Html.DropDownListFor(model => model.selectedValue,
new List {
new SelectListItem { Text = "Select", Value= "0"},
new SelectListItem { Text = "Creator", Value= "C"},
new SelectListItem { Text = "Assignee", Value= "A"},
new SelectListItem { Text = "Reporter", Value= "R"}
})

Let me know It helps you.
0
Shailesh Uke11y ago
you use the form collection

public void getdata(FormCollection fomr)
        {

            string name = Request.Form["name"];


      }

// ["name"]; is control name property
0

How to get text from DropDownList in .Net-MVC?

EmpTest