How to fill a textbox based on selection in MVC ..?
Hi, I created a table and linked it to an MVC project through an ADO.NET object. Once connected, I added a controller for the object and it creates a set of cshtml files in the VIEW folder in the MVC project. But now I need to create a dropdown and a textbox. I created a dropdown in the cshtml file and also injected logic for it in CONTROLLER. I can create TEXTBOXES as well, but I am facing the problem of poulating TEXTBOX based on a dropdown selection.
My auto model generated by VS 2012 is
public partial class Plan_S
{
public int PlanId_PK { get; set; }
public string PlanNames { get; set; }
public string Hours { get; set; }
}
My controller for displaying the dropdown `
public class dropdownController : Controller
{
private PivotEntities db = new PivotEntities();
//
// GET: /dropdown/
public ActionResult Index()
{
ViewBag.plannames = new SelectList(db.Plan_S, "PlanId_PK", "PlanNames");
return View();
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
public ActionResult ddl()
{
return View(new Plan_S());
}
}`
My view.cshtml to display dropdown list
`
@model Pivot.Models.Plan_S
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>
@Html.DropDownList("PlanNames", "--select--")
</div>
`
Now when I select an item in the dropdown, it should automatically fill in the corresponding value in the table. Here in my code, the Plan_S table is autogenerated as Plan_S MODEL Class. But in the database, I have a set of values for these columns in a table.
eg..) PlanId_PK | PlanNames | Hours
1 Plan1 1hrs
2 Plan2 2hrs
3 Plan3 3hrs
Here in this Plan_S table,
PlanNames column is populated in DROPDOWNLIST, When I select Plan1 in DDL it should populate texbox as 1hrs
When I select Plan2 in DDL, it should fill the textbox as 2 hours.
This is the logic I need and I can do it in asp web forms, but it's tricky in MVC.
I think it needs Jquery for this .......
Please help me, I spent several hours finding this logic ....
Thanks in advance...
source to share
First, create a view model to store these things:
public class PlanViewModel
{
public List<SelectListItem> Plans { get; set; }
}
Then, in your controller action, create a model:
public ActionResult Index()
{
var model = new PlanViewModel();
model.Plans = db.Plan_S
.Select(p => new SelectListItem
{
Value = p.Hours,
Text = p.PlanNames
})
.ToList();
return View(model);
}
Then, in your view, do:
@model Pivot.Models.Plan_S
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div>
@Html.DropDownList("PlanNames", Model.Plans, "--select--")
<input id="planHours" type="text" />
</div>
Then you will need to do the following in jQuery:
<script type="text/javascript">
$(function () {
$("[name='PlanNames']").change(function () {
$("#planHours").val($(this).val());
});
});
</script>
source to share