Mvc: Select item in dropdownbox and use other related fields to populate text boxes

Question

I want my users to select an item in a dropdownbox and once selected, I want the other fields associated to this value selected to populate the text boxes. As you change values on the dropdown, the records in the text boxes changes.

For example if you select customerId of 1001 the FirstName, LastName and EmailAddress assosciated to 1001 should populate the text boxes for the 3 fields. CustomerId="1001", FirstName="John", LastName="Travolta", EmailAddress="John.Travolta@yahoo.com"

Here is the controller code

         public class HomeController : Controller
            {
                public ActionResult Index()
                {
                    var list = new SelectList(new[] 
                    {
                        new { ID = "1", Name = "Select Id" },
                        new { ID = "2", Name = "1001" },
                        new { ID = "3", Name = "1002" },
                        new { ID = "4", Name = "1003" },
                    },
                    "ID", "Name", 1);

                    ViewData["list"] = list;

                    return View();
                }

                public List<Customer> GetCustomerById(String CustomerId)
                {
                    var objCustomer = new List<Customer>();

                    objCustomer.Add(new Customer {CustomerId="1001", FirstName="John", LastName="Travolta", EmailAddress="John.Travolta@yahoo.com"});
                    objCustomer.Add(new Customer {CustomerId = "1002", FirstName = "Bayo", LastName = "Adenuga", EmailAddress = "Bayo.Adenuga@yahoo.com" });
                    objCustomer.Add(new Customer { CustomerId = "1003", FirstName = "Feyi", LastName = "Olawoye", EmailAddress = "feyi.olawoye@yahoo.com" });


                    var objResult = from c in objCustomer
                                    where c.CustomerId == CustomerId
                                    select c;

                    return objResult.ToList();
                }

                [HttpPost]
                public ActionResult Action(string customerId)
                {     
                    var results = GetCustomerById(customerId);           
                    return Json(results);
                }

            }

Here is my code for the view

            @model DropdownSelectedFillTextBox.Models.Customer

        @{
            ViewBag.Title = "Home Page";
        }

        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
        </script>

        @using (@Html.BeginForm("Action","Home",FormMethod.Post))
        {

             <h2>Dotuns Test</h2>

            <div>
                @Html.DropDownList("drpList",ViewData["list"] as SelectList)
            </div>

            <div>First Name</div>
            <div>
                  @Html.TextBox("FirstName", null, new { @class = "form-control" })            
            </div>

            <div>Last Name</div>
            <div>
                  @Html.TextBox("LastName", null, new { @class = "form-control" })         
            </div>

            <div>Email Address</div>
            <div>
                 @Html.TextBox("EmailAddress", null, new { @class = "form-control" })
            </div>

        }

           <script type="text/javascript">

               function Action(customerId) {
            $.ajax({
                url: '@Url.Action("Action", "Home")',
                type: "POST",
                data: { "customerId": customerId },
                "success": function (data) {
                    if (data != null) {
                        var vdata = data;
                        $("#FirstName").val(vdata[0].FirstName);
                        $("#LastName").val(vdata[0].LastName);
                        $("#EmailAddress").val(vdata[0].EmailAddress);
                    }
                }
            });
        }
        </script>

I changed the jquery to the code below. I put an alert box there and that is getting hit but nothing is happening. When I put a break point on the method in the controller. It does not hit the break point.

    <script type="text/javascript">
           $('#drpList').change(function () {
               alert("Hello Test");
               $.ajax({
                   url: '@Url.Action("Action", "Home")',
                   type: "POST",
                   data: { "customerId": customerId },
                   "success": function (data) {
                       if (data != null) {
                           var vdata = data;
                           $("#FirstName").val(vdata[0].FirstName);
                           $("#LastName").val(vdata[0].LastName);
                           $("#EmailAddress").val(vdata[0].EmailAddress);
                       }
                   }
               });

           });
    </script>