在局部视图中添加选项卡

Question

I'm trying to put tabs in a partial view which is inside a set of tabs already,the admin index view has a set of tabs which when selected render a partial view,I would like to put another set of此部分视图中的选项卡或侧边菜单，但它似乎不起作用，任何建议都很好，谢谢

这是管理索引视图

   
       <script>
           $(function () {
               $("#tabs").tabs({
                   beforeLoad: function (event, ui) {
                       ui.jqXHR
                   }
               });
           });
   
    </script>

<body>
    <div id="tabs" >
        <ul>
            <li><a href="@Url.Action("AllUsersTab","Admin")">All Users</a></li>
            <li><a href="@Url.Action("DoctorTab","Admin")">Doctor</a></li>            
            <li><a href="@Url.Action("StaffTab","Admin")">Staff</a></li>           
        </ul>
        
    </div>


</body>

这是局部视图

<script>
  $( function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  } );
    </script>

<body> 
    <div id="tabs">
    <ul>
        <li><a href="#tab1">Add Doctor</a></li>
        <li><a href="#tab2">Tab 1</a></li>
        <li><a href="#tab3">Tab 2</a></li>        
    </ul>
    <div id="tab1">
        <h2>Create Doctor</h2>

        @Html.ValidationSummary(false)
        @using (Html.BeginForm("Create", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" }))


        {
            <div class="form-group">
                <label>First Name</label>
                @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Last Name</label>
                @Html.TextBoxFor(x => x.LastName, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Address</label>
                @Html.TextBoxFor(x => x.Address, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Telephone</label>
                @Html.TextBoxFor(x => x.Telephone, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Date Of Birth</label>
                @Html.TextBoxFor(x => x.DOB, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Email</label>
                @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Password</label>
                @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
                    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })


        }
    </div>
    </div>    
</body>

Answer 1

您有 2 个具有相同 ID 的选项卡集...在您的视图上生成一个随机 ID，或任何确保您的选项卡组件不会相互弹跳的东西。

在局部视图中添加选项卡

Adding Tabs inside a partial view

c#

ajax

asp.net-mvc

jquery

jquery-ui-tabs