ASP.NET MVC DropDownList Ausgewähltes geändertes Ereignis

Question

Wenn ich einen TranCode aus einer Dropdownliste auswähle, die von der Datenbank generiert wird, wie kann er automatisch die zugewiesene TabNo aktiv setzen und den Typ in einem Label anzeigen, zwischendurch benutze ich bootstap und i verwende kein Entity-Framework, nur kommentieren, wenn Sie den ganzen Code sehen möchten, danke.

Tabelle:

TranCode-----TabNo-----Type 
100100-------1---------Cash 
100101-------1---------Card 
100102-------2---------Card 
100103-------3---------Cash 
100104-------1---------Cash 
100105-------3---------Card 
100106-------3---------Cash 

Index.chtml

<select class="form-control"> 
@foreach (System.Data.DataRow dr in Model.Transactions.Rows) 
{ 
    <option>@dr["TranCode"].ToString()</option> 
} 
</select> 

<label id="lblType" for="lblTypeValue">Type: </label> 
<label id="lblTypeValue">N/A</label> 

<div class="panel-heading"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1default" data-toggle="tab">Tab 1</a></li> 
     <li><a href="#tab2default" data-toggle="tab">Tab 2</a></li> 
     <li><a href="#tab3default" data-toggle="tab">Tab 3</a></li> 
    </ul> 
</div> 

Answer 1

Fügen Sie ID, Optionswert und Onchange-Ereignis hinzu.

<select class="form-control" onchange="select_onchange(this);" id="selTab"> 
    @foreach (System.Data.DataRow dr in Model.Data.Rows) 
    { 
     <option value="@dr["TabNo"].ToString()$@dr["Type"].ToString()">@dr["TranCode"].ToString()</option> 
    } 
</select> 


<div class="panel-heading"> 
    <ul class="nav nav-tabs" id="myTabs"> 
     <li><a href="#tab1default" data-toggle="tab">Tab 1</a></li> 
     <li><a href="#tab2default" data-toggle="tab">Tab 2</a></li> 
     <li><a href="#tab3default" data-toggle="tab">Tab 3</a></li> 
    </ul> 
</div> 

In Skript

<script type="text/javascript"> 


     $(function() { 
      var val = $("#selTab").val().split("$"); 
      setTab(val[0]); 
      $("#lblTypeValue").text(val[1]); 
     }); 

     function setTab(value) { 
      $('#myTabs a[href="#tab' + value + 'default"]').tab('show'); 
     } 

     function select_onchange(sel) { 
      var val = sel.value.split("$"); 
      setTab(val[0]); 
      $("#lblTypeValue").text(val[1]); 
     } 

    </script> 

Ich hoffe, es wird für Sie arbeiten.

Answer 2

Sie können entweder ein Postback tun oder Javascript, dies zu umgehen verwenden.

Mit JS:

ein Ansichtsmodell für Ihre Transaktionen verwenden und es Ihrer Ansicht nach Modell verwenden.

public class TransactionViewModel 
{ 
    public string TranCode { get; set; } 
    public int TabNo { get; set; } 
    public string Type { get; set; } 
} 

Ändern Sie Ihre Auswahlsteuerung auf diese.

<select id="myTransaction" class="form-control"> 
@foreach (var transaction in Model.Transactions) 
{ 
    <option value="@transaction.TranCode">@transaction.TranCode</option> 
} 
</select> 

oder verwenden Html.DropDownList

@Html.DropDownList("myTransaction", new SelectList(Model.Transactions, "TranCode", "TranCode"), new { @class="form-control" }) 

verwenden Javascript (jquery) Ereignisse zu handhaben, und die Sicht zu manipulieren.

<script type="text/javascript"> 
    $(document).ready(function(){ 

     var _transactions = JSON.parse('@Html.Raw(Json.Encode(Model.Transactions.Rows))'); 

     $('#myTransaction').change(function(){ 
      var _tranCode = $(this).value; 
      var _transaction = arraySelect(_transactions, "TranCode", _tranCode); 

      if(_transaction) {    
       $("#lblType").attr("tabindex", _transaction.TabNo); // Assigns the tab index of the control 
       $("#lblTypeValue").attr("tabindex", _transaction.TabNo);  
       $("#lblTypeValue").val(_transaction.Type); // Sets the type 
      } 
     }); 
    }); 

    function arraySelect(data, propertyName, expectedValue) { 
     for (var i = 0; i < data.length; i++) { 
      if (data[i][propertyName] === expectedValue) 
       return data[i]; 
     } 
     return null; 
    } 
</script>