ASP.NET MVC DropDownList选定的已更改事件

Question

从数据库生成的下拉列表中选择TranCode时，如何自动将分配的TabNo设置为活动状态并在标签中显示Type？

我正在使用引导程序，并且没有使用实体框架，如果您想查看所有代码，请发表评论，谢谢。

表：

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

添加ID，选项值和onchange事件。

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

在脚本中

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

希望它对您有用。

Answer 2

您可以执行回发或使用javascript处理。

使用JS：

对交易使用视图模型，并在视图模型中使用它。

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

将您的选择控件更改为此。

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

或使用Html.DropDownList

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

使用javascript（jquery）处理事件和处理视图。

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