As we know that whenever we want to pass dropdown text from view to controller using the model object, the value of dropdown is transferred but in some cases, we required text of the drop-down.
in this article I discuss that how we can perform this.
Step1: Create New ASP.NET MVC empty project.
Step2.: now we will create data context and Employee model using ado.net entity data model code first approach.
Employee.cs:
namespace DropDownTextatController.Models { using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using System.Data.Entity.Spatial; public partial class Employee { public int id { get; set; } [Required] public string EmpName { get; set; } public int salary { get; set; } [Required] public string address { get; set; } } }
Model1
namespace DropDownTextatController.Models { using System.Data.Entity; public partial class Model1 : DbContext { public Model1() : base("name=Model1") { } public virtual DbSet<Employee> Employees { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { } } }
Step2: create a new controller and add index action, add view using create scaffolding.
using DropDownTextatController.Models; using System.Web.Mvc; namespace DropDownTextatController.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } // Http Post will be called when user submit data [HttpPost] public ActionResult Index(Employee obj, FormCollection fobj) { if (ModelState.IsValid) { using (var db = new Model1()) { // Overwrite the employee model object(obj) address property obj.address = fobj["hidden1"].ToString(); db.Employees.Add(obj); db.SaveChanges(); return RedirectToAction("Index"); } } return View(); } } }
Index.cshtml
@model DropDownTextatController.Models.Employee @{ ViewBag.Title = "Index"; } <h2>Index</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Employee</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.EmpName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.EmpName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.EmpName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.salary, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.salary, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.salary, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.address, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @*@Html.EditorFor(model => model.address, new { htmlAttributes = new { @class = "form-control" } })*@ @Html.DropDownListFor(m => m.address , new List<SelectListItem> { new SelectListItem { Text ="Rajasthan" , Value="1" }, new SelectListItem { Text ="UP" , Value="2" }, new SelectListItem { Text ="MP" , Value="3" } } ,"--select State --", new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.address, "", new { @class = "text-danger" }) <input type="hidden" id="hidden1" name="hidden1" value="" /> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" class="btn btn-default" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script> $(document).ready(function () { $("#address").change(function () { var ddtext = $("#address option:selected").text(); $("#hidden1").val(ddtext); }) }) </script>
OutPut:
I didn’t get the part of jquery. How do you know that the name of the dropdown is “address”?
Inspect element in browser window and see the id of drop down.
Sir, in case of editing how to get it selected?
i didn’t show any output
Thank you this article is very useful, specially dropdown binding.