2016-06-15 52 views
1

我有下拉列表3值(FlexiPA,Motor,Fire)。这些是保险类型。

我想要的是,当用户选择任何一种类型时,将会显示一个表格(我用jquery来显示此表格),并且只会根据用户选择的类型显示记录。
例如,如果用户选择FlexiPA类型,则只显示flexitype的记录等等。
如何根据剃须刀中的下拉列表选择动态显示记录

我的问题是
对于现在的表中显示从数据库中的所有记录,它不改变基于用户选择。

  • 如何动态改变表中的数据基于用户选择?
  • 我试图从视图传递值控制器但是,情况并非如此,因为我的表没有回传,它会通过的jQuery一旦用户点击所需值显示。

我查看
我jquery--的下拉列表(flexipa,电机,火)

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

    } 

} 

谢谢。

+0

无论您更新下拉菜单的次数多少,它都不会更改,因为数据是在页面加载过程中加载的。因此,为了实现您的目标,如果触发更改下拉事件以更新表格的数据,则应该向控制器发送ajax请求。另一个解决方法是加载每种保险类型的所有数据,只显示必要的数据并在不需要时隐藏它 – Sherlock

+0

您需要ajax调用服务器方法(传递选定的值)并返回部分视图(或json )的结果并更新DOM –

回答

2

将下面的代码复制并粘贴到下面的代码中,它会工作。我在我身边进行了测试,结果非常好。

我根据你的原始代码编写代码,但肯定按照评论,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> 
    } 
} 

希望它能帮助。

相关问题