How to populate a textbox based on dropdown selection in MVC..?

Question

Hi I have created a table and connected it to MVC project through ADO.NET entity. After connecting I added the controller for the entity and it creates a set of cshtml files in VIEW folder in MVC project. But now What I need is to create a dropdownlist and textbox. I created the dropdownlist in a cshtml file and also wriiten the logic for it in the CONTROLLER. I can also create TEXTBOXES,but i'm facing the problem of poulating TEXTBOX based on the dropdownlist selection.

My Model auto 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 dropdownlist is `

 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 for displaying dropdownlist is

`

@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 dropdownlist, it should automatically populate the corresponding value in the table. Here in my code, Plan_S table is autogenrated as Plan_S MODEL Class. But in Database I have set of values for these columns in 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 the DROPDOWNLIST, When I select the Plan1 in DDL it should populate the texbox as 1hrs

When I select the Plan2 in DDL it should populate the textbox as 2hrs.

This is the logic i need and I can do this in asp webforms but it is tricky in MVC.

I think that Jquery is needed for it.......

Please help me, I had spent hours in finding this logic....

Thanks in advance...

Solution

Firstly, let's create a View Model to hold these things:

public class PlanViewModel
{
    public List<SelectListItem> Plans { get; set; }
}

Then, in your controller action let's build the 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'll need to do the following in jQuery:

<script type="text/javascript">
    $(function () {
        $("[name='PlanNames']").change(function () {
            $("#planHours").val($(this).val());
        });
    });
</script>