如何基於剃須刀中的下拉列表選擇動態顯示記錄

Question

我有一個包含3個值 （FlexiPA，Motor，Fire）的下拉列表 。 這些是保險類型。

我想要的是，當用戶選擇任何一種類型時，將顯示一個表（ 我使用jquery來顯示此表 ），並且僅顯示基於用戶選擇的類型的記錄。
例如，如果用戶選擇FlexiPA類型，則僅顯示具有flexitype的記錄，依此類推。

我的問題是
目前，該表顯示了數據庫中的所有記錄，它不會根據用戶選擇而更改。

• 如何根據用戶選擇動態更改表數據 ？
• 我試圖將值從視圖傳遞給控制器 ，但是沒有發生，因為我的表沒有回發 ，一旦用戶單擊所需的值，它將通過jquery顯示。
  

我的觀點
我的jQuery-用於下拉列表（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();
        }         

    });
});

剃刀

@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>
    }      

我的控制器

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

    }

}

謝謝。

Answer 1

復制並粘貼下面的代碼即可，它可以正常工作。我在我這邊進行了測試，效果很好。

我根據您的原始代碼對此進行編碼，但是可以肯定的是，按照注釋，ajax將是專業的實現方式。
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();
        }


    });
});

將現有表更改為這三個不同的表
剃刀

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

希望能幫助到你。