How to display records dynamically based on dropdownlist selection in razor

Question

I have dropdown list that have 3 values (FlexiPA, Motor, Fire). these are type of insurance.

What I want is that, when user choose any one type, a table will be displayed ( I used jquery to display this table )and will only show records based on the type the user chose.
For eg, if user select FlexiPA type, only records with flexitype will be displayed and so on.

My problem is
For now the table displayed all the records from database, it is not changing based on the user selection.

• How can I change the table data dynamically based on user selection?
• I tried to pass the value from view to controller but, it is not happening because my table is not postback, it will displayed through jquery once user clicked the desired value.
  

My View
My jquery-- for dropdownlist(flexipa, motor, fire)

<script type="text/javascript">
$(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();
        }         

    });
});

Razor

@Html.Label("Please Select Insurance Type :", new { id = "InsuranceTypeLabel" })

@Html.DropDownList("InsuranceType", new List<SelectListItem> {
               new SelectListItem{Text ="", Value=""},
                new SelectListItem{Text ="FlexiPA", Value="1"},
                new SelectListItem{Text ="Motor", Value="2"},
                new SelectListItem{Text ="Fire", Value="3"}
                                                 })


    <table id="ListOfRegister" border="0">
   <tr>
    <th>Registration ID</th>
    <th>Name</th>
    <th>Insurance Type</th>
</tr>

    @foreach (var item in Model.registerList)
    {
        <tr>
            <td align="center">@item.registrationId</td>
            <td>@item.registerNm</td>
            <td align="center">@item.insuranceType.InsuranceTypeNm</td>
        </tr>
    }      

My Controller

    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);
        }

    }

}

Thank you.

Answer 1

Copy and paste the code below exactly as it is below and it will work.I tested on my side and it works just fine.

I code this based on you original code but for sure as the per the comments, ajax would the professional way to achieve.
js.

<script type="text/javascript">
$(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();
    $("#ListOfFlexiPA").hide();
    $("#ListOfMotor").hide();
    $("#ListOfFire").hide();

    $('#ProviderType').change(function () {
        var value = $('#ProviderType').val();
        if (value == 1) {
            $("#InsuranceType").show();
            $("#InsuranceTypeLabel").show();

            $('#InsuranceType').change(function () {
                var type = $('#InsuranceType').val();
                if(type == 1)
                {
                    $("#ListOfFlexiPA").show();
                    $("#ListOfMotor").hide();
                    $("#ListOfFire").hide();
                }
                else if (type == 2)
                {
                    $("#ListOfMotor").show();
                    $("#ListOfFlexiPA").hide();
                    $("#ListOfFire").hide();
                }
                else
                {
                    $("#ListOfFire").show();
                    $("#ListOfFlexiPA").hide();
                    $("#ListOfMotor").hide();
                }

            });
        }
        else {
            $("#InsuranceType").hide();
            $("#InsuranceTypeLabel").hide();
            $("#ListOfFlexiPA").hide();
            $("#ListOfMotor").hide();
            $("#ListOfFire").hide();
        }


    });
});

change you existing table to these three different tables
razor

<table id="ListOfFlexiPA" border="0">
 <tr>
    <th>Registration ID</th>
    <th>Name</th>
    <th>Insurance Type</th>
</tr>

    @foreach (var item in Model.registerList)
    {
        if (item.insuranceType.InsuranceTypeNm.Equals("FlexiPA"))
        {
            <tr>
                <td align="center">@item.registrationId</td>
                <td>@item.registerNm</td>
                <td align="center">@item.insuranceType.InsuranceTypeNm</td>
            </tr>
        }

    }     
</table>

<table id="ListOfMotor" border="0">
 <tr>
    <th>Registration ID</th>
    <th>Name</th>
    <th>Insurance Type</th>
</tr>

@foreach (var item in Model.registerList)
{
    if (item.insuranceType.InsuranceTypeNm.Equals("Motor"))
    {
        <tr>
            <td align="center">@item.registrationId</td>
            <td>@item.registerNm</td>
            <td align="center">@item.insuranceType.InsuranceTypeNm</td>
        </tr>
    }
  }
</table>

<table id="ListOfFire" border="0">
<tr>
    <th>Registration ID</th>
    <th>Name</th>
    <th>Insurance Type</th>
</tr>

@foreach (var item in Model.registerList)
{
    if (item.insuranceType.InsuranceTypeNm.Equals("Fire"))
    {
        <tr>
            <td align="center">@item.registrationId</td>
            <td>@item.registerNm</td>
            <td align="center">@item.insuranceType.InsuranceTypeNm</td>
        </tr>
    }
}

Hope it helps.