title: How to display records dynamically based on dropdownlist selection in razor
body: <p>I have <strong>dropdown list</strong> that have <strong>3 values</strong> (FlexiPA, Motor, Fire). these are type of insurance. <br><br>
  What I want is that, when user choose any one type, a table will be displayed ( <em>I used jquery to display this table</em> )and will only show records based on the type the user chose.<br>For eg, if user select FlexiPA type, only records with flexitype will be displayed and so on.
  <br></p>
  
  <p><strong>My problem is</strong> <br>
  For now the table displayed all the records from database, it is not changing based on the user selection.<br></p>
  
  <ul>
  <li>How can I change the <strong>table data dynamically</strong> based on user selection?</li>
  <li>I tried to pass the <strong>value from view to controller</strong> but, it is not happening because <strong>my table is not postback</strong>, it will displayed through jquery once user clicked the desired value.<br></li>
  </ul>
  
  <p><strong>My View</strong><br>
  My jquery-- for dropdownlist(flexipa, motor, fire)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      //  alert('jQuery Load.If this message box shows it means jQuery is correctly referenced and can be used on this page');
      $("#InsuranceType").hide();
      $("#InsuranceTypeLabel").hide();
      $("#ListOfRegister").hide();
  
      $('#ProviderType').change(function () {       
          var value = $('#ProviderType').val();
          if (value == 1) {
              $("#InsuranceType").show();
              $("#InsuranceTypeLabel").show();
  
              $('#InsuranceType').change(function () {
                  $("#ListOfRegister").show();
              });
          }
          else
          {
              $("#InsuranceType").hide();
              $("#InsuranceTypeLabel").hide();
              $("#ListOfRegister").hide();
          }         
  
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Razor</p>
  
  <pre><code>@Html.Label("Please Select Insurance Type :", new { id = "InsuranceTypeLabel" })
  
  @Html.DropDownList("InsuranceType", new List&lt;SelectListItem&gt; {
                 new SelectListItem{Text ="", Value=""},
                  new SelectListItem{Text ="FlexiPA", Value="1"},
                  new SelectListItem{Text ="Motor", Value="2"},
                  new SelectListItem{Text ="Fire", Value="3"}
                                                   })
  
  
      &lt;table id="ListOfRegister" border="0"&gt;
     &lt;tr&gt;
      &lt;th&gt;Registration ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Insurance Type&lt;/th&gt;
  &lt;/tr&gt;
  
      @foreach (var item in Model.registerList)
      {
          &lt;tr&gt;
              &lt;td align="center"&gt;@item.registrationId&lt;/td&gt;
              &lt;td&gt;@item.registerNm&lt;/td&gt;
              &lt;td align="center"&gt;@item.insuranceType.InsuranceTypeNm&lt;/td&gt;
          &lt;/tr&gt;
      }      
  </code></pre>
  
  <p></p>
  
  <p><strong>My Controller</strong></p>
  
  <pre><code>    public class AdminController : Controller
  {
      //
      // GET: /Admin/
      TMXEntities db = new TMXEntities(); //ESTABLISHING CONNECTION TO DATABASE
  
  
      public ActionResult Index()
      {
  
          using (var dataBase = new TMXEntities())
          {
              var model = new RegisterInfoPA()
              {
                  registerList = dataBase.registers.ToList(),
                  insuType = dataBase.insuranceTypes.ToList()
              };
              return View(model);
          }
  
      }
  
  }
  </code></pre>
  
  <p>Thank you.</p>