单击按钮后如何将选定的选项卡保持为活动状态

时间:2017-07-20 04:52:05

标签: asp.net-mvc twitter-bootstrap

以下是我的代码

在我选择电子邮件ID时的更新选项卡中 - 在返回视图后,它再次设置将标签添加为活动状态(默认情况下它被设置为活动状态)。

如何在选择电子邮件ID后将更新标签设置为有效 - 任何想法。

    <ul class="nav nav-tabs">
    <li role ='presentation' class="active"><a href="#Add" data-toggle="tab">Add</a></li>
    <li role ='presentation'><a href="#Update" data-toggle="tab">Update</a></li>
    <li role ='presentation'><a href="#Delete" data-toggle="tab">Delete</a></li>
    <li role ='presentation'><a href="#menu3" data-toggle="tab">Menu 3</a></li>
</ul>
<div class="tab-content">
    <div id="Add" class="tab-pane active">
@using (Html.BeginForm("Add", "Admin"))
{
    <div class="container container-fluid">
        <br />
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                    </div>
                    @Html.TextBoxFor(m => m.user_name, new { @class = "form-control", @placeholder = "User Name", @required = "true" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-address-card-o" aria-hidden="true"></i>
                    </div>
                    @Html.TextBoxFor(m => m.full_name, new { @class = "form-control", @placeholder = "Full Name", @required = "true" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-inbox" aria-hidden="true"></i>
                    </div>
                    @Html.TextBoxFor(m => m.user_email, new { @class = "form-control", @placeholder = "Email id", @required = "true" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-lock" aria-hidden="true"></i>
                    </div>
                    @Html.TextBoxFor(m => m.password, new { @class = "form-control", @placeholder = "Password", @required = "true" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-universal-access fa-spin" aria-hidden="true"></i>
                    </div>
                    @Html.DropDownListFor(m => m.role, ViewBag.role as IEnumerable<SelectListItem>, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-offset-1 col-lg-5">
                <button type="submit" class="btn btn-success btn-sm">
                    <i class="fa fa-check-square-o" aria-hidden="true"></i>
                    &nbsp; Add
                </button>
            </div>
        </div>

    </div>
}
    </div>

    <div id="Update" class="tab-pane">

        @using (Html.BeginForm("Load_data", "Admin")) { 
        <div class="container container-fluid">
            <br />
            <div class="row">
                <div class="col-lg-offset-1 col-lg-5">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-users" aria-hidden="true"></i>
                        </div>
                        @Html.DropDownListFor(m => m.user_email, ViewBag.user_email as IEnumerable<SelectListItem>, new { @class = "form-control",@onchange= "this.form.submit();" })
                    </div>
                </div>
            </div>
        </div>
        }

        <div id="Details">
            //Details of selected email id will be shown here 
        </div>
    </div>

    <div id="Delete" class="tab-pane">

    </div>

    <div id="menu3" class="tab-pane">

    </div>
</div>

1 个答案:

答案 0 :(得分:0)

基本上你不能那样做,因为你的页面很新鲜。如果你想要那么你需要异步。我的意思是您需要使用@Ajax.BeginFormjquery/ajax。 如果你不想这样做asynchronously,那么就有办法解决。

因此,在从“更新”标签中选择电子邮件后致电action method时,请在 ViewBag 中指定一个值。

例如,在您的操作方法中,

{
 //Rest code
 ViewBag.TabValue = "Update";
 //Rest code
}

现在您可以将此值保留在隐藏字段中。例如,在您的视图中,

<input type="hidden" value="@ViewBag.TabValue" id="myTab"/>

现在,在您的脚本中,您可以检查此值并设置标签,例如

<script>
 if($('#myTab').val() == "Update")
 {
  $("#Update").focus(); //You can add a class as active so on...
 }
</script>

希望有所帮助:)