Use selected item from DropDownList to query another table and fill textboxes

Question

I want to get the description and price of the selected artikel, but i want to be able to edit it afterwards so for example you have a standard price which can be adjusted.

Here is what my database looks like.

Here is my view code. (I left out some input fields)

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

        <div class="form-group">
            @Html.LabelFor(model => model.ArtikelID, "ArtikelID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ArtikelID", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ArtikelID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ArtikelBeschrijving, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ArtikelBeschrijving, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ArtikelBeschrijving, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ArtikelPrijs, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ArtikelPrijs, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ArtikelPrijs, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

and the controller for the view.

        // GET: Orders/Create
        public ActionResult Create()
        {
            ViewBag.ArtikelID = new SelectList(db.Artikels, "ArtikelID", "ArtikelNummer");
            ViewBag.PaardID = new SelectList(db.Paarden, "PaardID", "Naam");
            return View();
        }

        // POST: Orders/Create
        // To protect from overposting attacks, enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "OrderID,Ordernummer,PaardID,KlantNaam,PaardNaam,ChipNummer,Levensnummer,ArtikelID,ArtikelBeschrijving,ArtikelPrijs,Datum")] Orders orders)
        {
            if (ModelState.IsValid)
            {
                db.Orders.Add(orders);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.ArtikelID = new SelectList(db.Artikels, "ArtikelID", "ArtikelNummer", orders.ArtikelID);
            ViewBag.PaardID = new SelectList(db.Paarden, "PaardID", "Naam", orders.PaardID);
            return View(orders);
        }

This is essentially what i want.

I've tried searching everywhere, but i couldn't find anything similar to what i want. Hopefully you guys can help me out.

Answer 1

Below is a work demo, you can refer to it.

1.Add id to ArtikelID, ArtikelBeschrijving,ArtikelPrijs, like below:

@Html.DropDownList("ArtikelID", null, htmlAttributes: new { @class = "form-control" ,@id="list" })
@Html.EditorFor(model => model.ArtikelBeschrijving, new { htmlAttributes = new { @class = "form-control" ,@id="id01"} })
@Html.EditorFor(model => model.ArtikelPrijs, new { htmlAttributes = new { @class = "form-control", @id="id02" } })

2.Add below <script> to your Create view.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/jscript">
  $(function() {
    $("#list").change(function() {
      var selectedid = $('option:selected').val();
     
        $.ajax({
          url: "/YourControllerName/GetDropDownList",
          data: {
            id: selectedid
          },
          type: "Post",
          dataType: "Json",
          success: function(result) {                 
              document.getElementById('id01').value = result.beschrijving;
              document.getElementById('id02').value =result.prijs;
          },
          error: function() {
           
          }
        });
      
    });
  });
</script>

3.In your Controller, add GetDropDownList action like below:

 [HttpPost]
  public IActionResult GetDropDownList(int id)
  {
   var result = db.Artikels.FirstOrDefault(m => m.ArtikelID == id);  
   return Json(result);
  }

Result:

Update get id