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.

Yasser Shaikh · Accepted Answer · 2014-03-03 12:11:20Z

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.

answered Mar 3, 2014 at 12:11

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anoop Joshi P · Accepted Answer · 2014-03-03 12:08:55Z

0

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 () { }
});

answered Mar 3, 2014 at 12:08

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

9 Comments

Haruna Ado Over a year ago

Im still having the same issue.

Anoop Joshi P Over a year ago

@HarunaAdo put an alert in the success event in ajax. check whether it happens or not.

Haruna Ado Over a year ago

I used the alert this way alert(msg); and i got the following error [object Object], [object Object]

Anoop Joshi P Over a year ago

where did you put the alert? in success? or in error??

Haruna Ado Over a year ago

@AnnopJoshi I added the alert on success

|

Collectives™ on Stack Overflow

Populating Textbox based on selecting a dropdown list value in mvc4

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related