title: JSON Function - cascading DropDownList - update the model
body: <p>Premise: I'm new with MVC, and my english is not perfect, I hope you'll understand my post, otherwise I'm here for explainations.</p>
  
  <p>I'm working on a project created by another developer in ASP.Net MVC and I have this problem:</p>
  
  <p>In a View I have two cascading DropDownList: one with the Distributors and the other with the Vendors of the Distributor selected in the first DropDownList.</p>
  
  <p>This is the code:</p>
  
  <hr>
  
  <p>In the Body:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
         &lt;span&gt;Distributor&lt;/span&gt;
      &lt;/td&gt;
      &lt;td&gt;
         @Html.DropDownList("DistributorID")
         @Html.ValidationMessageFor(model =&gt; model.DistributorID)
      &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;
         &lt;span&gt;Vendor&lt;/span&gt;
      &lt;/td&gt;
      &lt;td class="tdAlignLeft"&gt;
         @Html.DropDownList("VendorCode")
         @Html.ValidationMessageFor(model =&gt; model.ClientHeaderInformation.VendorCode)
      &lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <hr>
  
  <p>In the Script:</p>
  
  <pre><code>$("#DistributorID").change(function (e) {
  
     var SelectGroupId =$(this).val();
  
     $.getJSON('@Url.Action("VendorByDistributor", "ClientInfo")', { VendorGroup: DistributorID }, function (param) {
         var vendorCodes = $('#VendorCode');
         vendorCodes.empty();
         $.each(param, function (index, param) {
            vendorCodes.append(
               $('&lt;option/&gt;')
                  .attr('value', param.vendorCode)
                  .text(param.vendorName)
            );
         });
      });
   });
  </code></pre>
  
  <hr>
  
  <p>In the Controller:</p>
  
  <pre><code>public ActionResult VendorByDistributor(int _DistributorID)
   {
      var Vendors = db.View_Vendors.Where(n =&gt; n.DistributorID.Equals(_DistributorID)).Select(
         x =&gt; new
         {
            vendorCode = x.VendorCode,
            vendorName = x.VendorName
         });
      return Json(Vendors, JsonRequestBehavior.AllowGet);
   }
  </code></pre>
  
  <hr>
  
  <p>'View_Vendors' is a SQL Server view, mapped with Entity Framework, this is the SQL:</p>
  
  <pre><code>SELECT A.DistributorID, A.DistributorName, B.VendorName, B.VendorCode
   FROM dbo.Distributors AS A LEFT OUTER JOIN dbo.Vendors AS B ON 
   A.VendorCode = dbo.Vendor.VendorCode
  </code></pre>
  
  <hr>
  
  <p>All seems to work well, but when I save the view sometimes the VendorCode property of the ClientInfo class hasn't the last selected value. This happens if I change The Distributor on the first DropDownList, in this case the second DropDownList (Vendors) gets the right values, but if I select a Vendor and then I save the model, the property VendorCode has still the first value.</p>
  
  <p>I also tried to create a function to test the event 'change' of the Vendors DropDownList ...</p>
  
  <pre><code>$ ("# VendorCode.") Change (function (e) {
       SelectId var = $ (this). val ();
       $. getJSON ('@ Url.Action ("updateVendorCode", "ClientInfo")', {VendorCodePass: SelectId});
    });
  </code></pre>
  
  <p>... and in fact the event fires correctly only if I not change the Distributor and the Vendor items are not reloaded, in that case the event fires only the first time.</p>
  
  <p>Sounds like a refresh problem of the second DropDownList Vendors, but I can't find the solution ...</p>
  
  <p>Pileggi</p>