Populating Textbox based on selecting a dropdown list value in mvc4

Question

Im using Json to populate some textbox which the value of the textbox is coming from the db. for the event to fire, user must select an email address from a drop down. then populate the textbox with the neccessary values. below is my code but its not returning anything if im running it.

JQUERY

$(function () {
        GetUserInfo($("#EmailAddress"));
    });

    function GetUserInfo(e) {
        var EmailId = $(e).val();
        console.log(EmailId);
        $.ajax({
            url: '@Url.Action("GetUserInfo", "Permit")',
        dataType: 'json',
        type: 'POST',
        data: { EmailAddress: EmailId },
        success: function (msg) {
            $("#FirstName").attr("value", msg);
            $("#LastName").attr("value", msg);
            $("#MobileNumber").attr("value", msg);
        },
        error: function () { }
    });
}

HTML

<div class="row-fluid">
  <div class="span6">
  <p class="input-wrap">
  @Html.Label("Select Email Address")
  @Html.DropDownListFor(m=>Model.contactInfo.EmailAddress, new SelectList (Model.AllEmployeeEmail,"Value","Text"),"----select One----", new { @class = "required span12",  onchange = "getEmail(this);"})
  @Html.ValidationMessageFor(m => Model.contactInfo.EmailAddress)
  </div>
  <div class="span6">
  </div>
</div>  

<div class="row-fluid">
  <div class="span6">
  <p class="input-wrap">
  @Html.LabelFor(m => Model.contactInfo.FirstName)
  @Html.TextBoxFor(m => Model.contactInfo.FirstName, new { @class = "required span12" })
  @Html.ValidationMessageFor(m => Model.contactInfo.FirstName)
  </div>
  <div class="span6">
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
  <p class="input-wrap">
  @Html.LabelFor(m => Model.contactInfo.LastName)
  @Html.TextBoxFor(m => Model.contactInfo.LastName, new { @class = "required span12" })
  @Html.ValidationMessageFor(m => Model.contactInfo.LastName)
  </div>
  <div class="span6">
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
  <p class="input-wrap">
  @Html.LabelFor(m => Model.contactInfo.MobileNumber)
  @Html.TextBoxFor(m => Model.contactInfo.MobileNumber, new { @class = "required span12" })
  @Html.ValidationMessageFor(m => Model.contactInfo.MobileNumber)
  </div>
  <div class="span6">
  </div>
</div> 

CONTROLLER

[HttpPost]
public JsonResult GetUserInfo(string Email)
{
   // ContactInfo info = new ContactInfo();
   var info = from ci in db.ContactInfo
              join cci in db.CompanyContactInfo on ci.Id equals cci.ContactInfoId
              join cr in db.CompanyReg on cci.CompanyRegId equals cr.Id
              where cr.CompanyRegCode == User.Identity.Name
              select new SelectListItem() { Value = ci.Id.ToString(), Text = ci.EmailAddress };

   return Json(info, JsonRequestBehavior.AllowGet);
} 

Please Help me. I know im missing something. I just dont know what is it. THANK YOU.

Answer 1

change this

data: { EmailAddress: EmailId },

in your jquery POST to

data: { Email: EmailId },

because your action GetUserInfo accepts a string parameter named "Email" and not "EmailAddress". Both should be same.

Answer 2

you should give the post data same as the parameters in server code. In the above case you should give Email instead of EmailAddress

function GetUserInfo(e) {
    var EmailId = $(e).val();
    console.log(EmailId);
    $.ajax({
        url: '@Url.Action("GetUserInfo", "Permit")',
    dataType: 'json',
    type: 'POST',
    data: { Email: EmailId },
    success: function (msg) {
        $("#FirstName").attr("value", msg);
        $("#LastName").attr("value", msg);
        $("#MobileNumber").attr("value", msg);
    },
    error: function () { }
});