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.

No matter how many times you update your dropdown, it will not change since data are loaded during page load. So to achieve your goal, you should send an ajax request to the controller if dropdown event changed is triggered to update the data of your table. Another work around would be to load all the data per insurance type and show only the necessary data and hide it when it is not needed — DarkMakukudo
You need ajax to call a server method (passing the selected value) and return a partial view (or json) of the results and update the DOM — user3559349

user3643092 user3643092 · Accepted Answer · 2016-06-15T04:44:06

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.

How to display records dynamically based on dropdownlist selection in razor

1 Answers