简体   繁体   中英

Adding Tabs inside a partial view

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 tabs or side menu in this partial view but it doesn't seem to work,any suggestions would be great,thanks

This is the Admin index view

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

This is the partial view

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

您有2个具有相同id的选项卡集...在视图上生成随机ID,或使用其他方法确保您的选项卡组件不会彼此弹跳。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM