title: Updating a table based on selected dropdown using Jquery in ASP.NET MVC?
body: <p>I've got the below code on my view, and everything is working fine. I've got a dropdown, and got a list of tables below the drop-down. I'd like to write a jquery code that only displays one table at a time depending on the selected drop-down value. My first method would be having all the tables on client-side and just 'filtering' them using jquery, and my second method would be using an ajax request to the server and updating the table. Please have a look at the code below. Any help would be greatly appreciated - Thanks</p>
  
  <pre><code>  &lt;div id="dropDown" class="span11"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span4"&gt;
              Select Year of Manufacturing
          &lt;/div&gt;
          &lt;div class="span8"&gt;
              @Html.DropDownListFor(x =&gt; x.Products.SingleOrDefault().Year, @productItems)
          &lt;/div&gt;
      &lt;/div&gt;
      foreach (var item in Model.Products) {
      &lt;h3&gt;@item.Year&lt;/h3&gt;
      &lt;div id="dropDownDiv"&gt;
          &lt;table class="table table-bordered"&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      ProductId
                  &lt;/th&gt;
                  &lt;th&gt;
                      Name
                  &lt;/th&gt;
                  &lt;th&gt;
                      Description
                  &lt;/th&gt;
                  &lt;th&gt;
                      Price
                  &lt;/th&gt;
                  &lt;th&gt;
                      Proposed Price
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;@item.Id
                  &lt;/td&gt;
                  &lt;td&gt;@item.Name
                  &lt;/td&gt;
                  &lt;td&gt;
                      @item.Description
                  &lt;/td&gt;
                  &lt;td&gt;@item.Price
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="number" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      } 
  &lt;/div&gt;
  </code></pre>
  
  <p>For Ajax Request, I'm thinking to do something like this, but not sure how to proceed.</p>
  
  <pre><code>&lt;script&gt;
      //Filter By Year
      $(function () {
          $("select#Year").change(function (evt) {
              if ($("select#Year").val() != "-1") {
                  $.ajax({
                      url: "/AjaxDropDown/FilterByYear",
                      type: 'Post',
                      data: { Year: $("select#Year").val() },
                      success: function (data) {  
                                       //Need some code here
  
                      }
                  });
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Also, at some point I would like to enable inline editing on this table using ajax, so that the users can submit their proposed price..Thanks</p>