Set Text Box value using drop-down list's selected value

Question

I have a schema ( table saved in Sql) like this:

 ID | Name | Address
 1     Sam     ADD1
 2     John    ADD2
 3     Tony    ADD3

I have three fields in my form - ID , Name and Address.
Now I have implemented a drop-down for the ID field using ViewBag to pass data between the view and the controller.
I want to set the value of the fields Name and Address using the ID selected from the drop-down and not manually but I am unable to figure out a way and tried searching but could not find any appropriate solution.
Thanks for the Help.

EDIT:
My Code So Far:
Model Has been generated using the table itself (Database First Approach)
Controller

        public ActionResult Create()
        {
            ViewBag.codes = db.Users.ToList();

            return View();
        }


        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Entity_Master entity_Master)
        {
            if (ModelState.IsValid)
            {
                db.Entity_Master.Add(entity_Master);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            ViewBag.codes = db.Users.ToList();
            return View(entity_Master);
        }

View

   @Html.LabelFor(model => model.ID, htmlAttributes: new { @class = "control-label col-md-2" })

      @Html.DropDownListFor(model => model.ID, new SelectList(ViewBag.codes, "ID", "ID", "Select ID"))
      @Html.ValidationMessageFor(model => model.ID, "", new { @class = "text-danger" })


   @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

      @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
      @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })


   @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })

      @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
      @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })

Rendered Html

        <select id="ID" name="ID">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
      <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
      <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
      <input class="form-control text-box single-line" id="Address" name="Address" type="text" value="" />
      <span class="field-validation-valid text-danger" data-valmsg-for="Address" data-valmsg-replace="true"></span>

You need to post the rendered html as well as we have no way to process your MVC code — Asons, Feb 21 '16 at 16:47

score 2 · Accepted Answer · edited May 23 '17 at 12:17

You need to listen to the change event on this dropdown, get the selected value and using the value, get the details ( Name & Address) from Id. You may make an ajax call to the server to get the data.

$(function(){

  $("#ID").change(function(){

    var v = $(this).val();
    var url="@Url.Action("Details",Users")";
    $.getJSON(url, { id : v }, function(data){

       $("#Name").val(data.Name);
       $("#Address").val(data.Address);

    });

  });

});

Now you need to have an action method which accepts the Id and return a JSON structure which has Name and Address property.

public ActionResult Details(int id)
{
    var details = new { Name="Shyju", Address="5580 Twin lakes dr" };
    //Hard coded for demo. You may replace it with data from db.
    return Json(details, JsonRequestBehavior.AllowGet);
}

I have used Url.Action helper method to generate the proper relative url to the action method. This will work if your js code is inside the razor view. If your code is inside an external js file, you may use the solution explained in this post.

There's a problem ... id is being passed to the controller as null . — shubhamr, Feb 22 '16 at 08:06
And My edit was not accepted ... please edit it yourself so that others don't face the problem thanks. `$.getJSON(url,function(data)` should be `$.getJSON(url,{id: v},function(data)` — shubhamr, Feb 22 '16 at 10:28
Yea. I missed that in a hurry ! Thanks. I updated it. I am not sure why the edit was rejected. People simply click reject without even reading it ! — Shyju, Feb 22 '16 at 14:04

Set Text Box value using drop-down list's selected value

1 Answers1