how to populate textbox on selecting item from dropdownlist

Question

I am new to MVC and I got stuck in doing a task that when I select an item from the drop down list the data corresponding to that item in drop down must be shown in the textbox below the dropdown list. There is a button just below the textbox and when hitting on the button it must redirect to edit page with the id same as in the selected item in drop down list. The problem is that the value in the drop down list is getting from another table called students. so when I select a student from drop down list, the fee of the student in another table called details ust ne listed in textbox, when clicking on the new button the id of the student want to pass and go to edit page and when any changes happends it must reflect it back. The dropdown list are performing in the Index action method and below all these the list of index appears.

controller

 

 

public async Task<ActionResult> Index()

{

ViewBag.Id = new SelectList(db.Students, "ID", "FirstName");

return View(await db.Details.ToListAsync());

}

 

 

view

 

 

@model IEnumerable<A.Models.Detail>

@using (Html.BeginForm("Edit","Details", FormMethod.Post))

{

@Html.AntiForgeryToken()

<div class="col-lg-12" style="padding-bottom:10px;">

<div class="col-sm-2">

Student Name

</div>

<div class="col-lg-4">

@Html.DropDownList("Id", null, "select", htmlAttributes: new { @class = "form-control" })

</div>

</div>

<div class="col-lg-12" style="padding-bottom:10px;">

<div class="col-sm-2">

Fee

</div>

<div class="col-lg-4">

@Html.Editor("Fee", new { htmlAttributes = new { @class = "form-control" } })

</div>

</div>

<div class="form-group">

<div class="col-md-offset-2 col-md-10">

<input type="submit" value="New" class="btn btn-default" />

</div>

</div>

}

 <table class="table">

....

</table>

 

 

 can anyone please help me to find the solution that how can I get data in textbox and to pass the Id ??