title: In an MVC project, how do you update the model when a drop down list changes value?
body: <p>I have a MVC project using Kendo controls.  On one of the views is a drop down box and text box.  Both are initially getting their values from the model.  How can I change the model (and therefore the text box) when the user selects an  item from the drop down?</p>
  
  <p>For example, the Model is filled in the controller setting the original value of the item the drop down box is based on to "General" and the item the text box is based on to "Widgets".  When the user selects "Special" from the drop down, the controller would query the database to get data based on "Special", find that the new value of the text box should say "Doodads", add "Doodads to the model and change the text box to "Doodads".</p>
  
  <p>View</p>
  
  <pre><code>@model GPC.Models.ModelInstrumentListingDetail
  @using (Html.BeginForm("InstrumentListingDetailClick", "Home", FormMethod.Post, new { id = "InstrumentListingDetailForm" }))
  {
  &lt;div id="divInstrumentListingDetailHeader" class="detailDivs"&gt;
      &lt;table&gt;
          &lt;tr&gt;
          &lt;tr&gt;
              &lt;td style="text-align: right;" class="dropdowns"&gt;
                  &lt;label&gt;Category:&lt;/label&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt; // divInstrumentListingDetailHeader
  
  &lt;div id="divInstrumentListingDetailBody" class="detailDivs details"&gt;
      &lt;table class="details"&gt;
          @*Field 1*@
          &lt;tr&gt;
              &lt;td style="text-align: right;"&gt;
                  @Html.DisplayFor(m =&gt; m.Label1)
              &lt;/td&gt;
              &lt;td width="2px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td class="dropdowns"&gt;
                  @Html.TextBoxFor(m =&gt; m.Field1, new { @class = "details" })
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt; // divInstrumentListingDetailBody
  }
  
  &lt;script&gt;
  function onChange_ddInstrumentCategory(arg) {
      var categoryID = $(arg).find('option:selected').val();
  
      // Update model based on the category ID
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public ActionResult InstrumentListingEdit(TblInstrumentTag model)
  {
      TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);
  
      // Fill Category drop down
      List&lt;TblInstrumentFormCategory&gt; categories = data.GetAllCategories();
  
      // Create model
      ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
      {
          InstrumentTagID = currentInstrumentTag.InstrumentTagID,
          InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
          Field1 = currentInstrumentTag.FormCategory1Value1,
          Label1 = categories.FirstOrDefault().Label1 + ":",
          ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
       };
  
       return View("InstrumentListingEdit", detailModel);
  }
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>public class ModelInstrumentListingDetail
  {
      // Drop down ID's
      public int InstrumentTagID { get; set; }
      public int InstrumentCategory { get; set; }
  
      // Detail fields
      public string Field1 { get; set; }
  
      // Detail labels
      public string Label1 { get; set; }
  
      // Drop downs for add/edit page
      public IEnumerable&lt;SelectListItem&gt; ieInstrumentCategories { get; set; }
  }
  </code></pre>
  
  <p>What I'd like is to get from the javascript to something like this code below to update the text box.  I'd rather not post the entire page.  I don't want the screen to "blink"; I just want the user to select an item from the dropdown and for the textbox value to change.</p>
  
  <p>Need to get from jQuery to something like this without submitting the form:</p>
  
  <pre><code>public ActionResult UpdateModel(TblInstrumentTag model, int newCatgoryID)
  {
  TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);
  
  // Fill Category drop down
  List&lt;TblInstrumentFormCategory&gt; categories = data.GetAllCategories();
  
  // Create model
  ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
  {
      InstrumentTagID = currentInstrumentTag.InstrumentTagID,
      InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
      Field1 = currentInstrumentTag.FormCategory2Value1, // &lt;- Value of Field 1 has changed
      Label1 = categories.FirstOrDefault().Label1 + ":",
      ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
  };
  
  return View("InstrumentListingEdit", detailModel);
  }
  </code></pre>