在局部视图中添加选项卡

时间:2016-09-12 16:40:44

标签: c# jquery ajax asp.net-mvc jquery-ui-tabs

我正在尝试将标签放在已经在一组标签内的局部视图中,管理索引视图有一组标签,当选中这些标签呈现局部视图时,我想放置另一组标签或在这个局部视图中的侧边菜单,但它似乎不起作用,任何建议都会很棒,谢谢

这是管理员索引视图

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

1 个答案:

答案 0 :(得分:0)

你有2个带有相同ID的标签集...在你的视图上生成一个随机id,或者确保你的标签组件没有相互反弹的任何内容..