ASP.NET MVC DropDownList Selected Changed Event

Question

When I select a TranCode from a dropdownlist generated from the database, how can it automatically set the assigned TabNo to active and display the Type in a label?

I'm using bootstap and I'm not using the entity framework, just comment if you want to see all the code, thanks.

Table:

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

Add id, option value and onchange event.

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

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

I hope it will work for you.

Answer 2

You can either do a postback or use javascript to handle this.

Using JS:

Use a view model for your transactions and use it in your view's model.

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

Change your select control to this.

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

or use Html.DropDownList

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

Use javascript (jquery) to handle events and manipulating the view.

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