how can i get the selected text from dropdownlistfor - asp.net-mvc

Question

i have a model :
public class studentmodel
{
public int id { get; set; }
public string name { get; set; }
}
i populate my dropdown :
// GET: dropdown/Test
public ActionResult Index()
{
List<SelectListItem> list = new List<SelectListItem>();
{
list.Add(new SelectListItem { Text = "saurav", Value = "1"});
list.Add(new SelectListItem {Text = "Rj", Value = "2" });
list.Add(new SelectListItem {Text = "rahul", Value = "3" });
ViewBag.studentlist = list;
}
return View();
}
[HttpPost]
public ActionResult Index(studentmodel s)
{
return View();
}
i have a controller action which is postback:
#using (Html.BeginForm("Index", "Test", FormMethod.Post))
{
#Html.DropDownListFor(m => m.name, (IEnumerable<SelectListItem>)ViewBag.studentlist, "select student");
<div>
<input type="submit" value="submit" />
</div>
<div> you have selected : #ViewBag.selected </div>
}
How do i get the text from my drop down list? Thanks

Answer 1

You need to use client side javascript as the change happens at the browser.
First change the markup a little bit to wrap the selection in a span.
<div> you have selected : <span id="selectedItem">#ViewBag.selected</span> </div>
Remove the #ViewBag.selected from the above line if your GET action is not really setting anything to that.
Now the script
$(function(){
$("#name").change(function(){
var selected = $(this).find("option:selected").text();
$("#selectedItem").text(selected);
});
});
This will read the selected option's Text and set that on our span.
If you want this text in the HttpPost action, you can add a new property to your view model
public class studentmodel
{
public int id { get; set; }
public string name { get; set; }
public string SelectedText{ get; set; }
}
And keep a hidden field inside the form
#Html.HiddenFor(s=>s.SelectedText)
Now, set the value of this using javascript set the value of this hidden field.
$(function(){
$("#name").change(function(){
var selected = $(this).find("option:selected").text();
//var selected = $("#name option:selected").text(); // another option
$("#selectedItem").text(selected);
$("#SelectedText").val(selected);
});
});
Now when you submit the form, the value of the hidden field SelectedText will also be submitted.

Answer 2

Model add one viewmodel as below
public class studentmodel
{
public int id { get; set; }
public string name { get; set; }
}
public class SomeViewModel
{
public string studentname {get; set;}
public SelectList studentlist {get; set;}
}
Updated
public ActionResult Index()
{
SomeViewModel Model = new SomeViewModel();
var studentlist = new List<SelectListItem>();
studentlist.Add(new SelectListItem() { Value = "1", Text = "saurav" });
studentlist.Add(new SelectListItem() { Value = "2", Text = "Rj" });
studentlist.Add(new SelectListItem() { Value = "3", Text = "rahul" });
Model.studentlist = new SelectList(studentlist, nameof(SelectListItem.Value), nameof(SelectListItem.Text));
return View(Model);
}
[HttpPost]
public ActionResult Index(SomeViewModel s)
{
return View();
}
and change your view as below
Updated
#model somenamespace.SomeViewModel
#Html.DropDownListFor(m => m.studentname , Model.studentlist , "select student");