Question

我搜索了很多，我在stackoverflow和其他网站上找到了很多解决方案，我尝试了很多，但没有一个能为我工作。那就是为什么我发布这个问题。我创建了三个偏见。每个部分视图都有提交表单，我们可以在其中创建记录。在索引视图上，我在这三个选项卡中创建了3个选项卡并呈现了部分视图页面加载时，所有三个部分视图（表单）都会加载。我只想在页面加载时加载单个局部视图。然后，当用户单击选项卡时，应加载其他视图/表单。假设用户点击“Classes”选项卡，那么应该在此选项卡中加载classesPartialView，其他选项卡也应该加载。

<div role="tabpanel" class="nav">

学生类分类

<div role="tabpanel" class="tab-pane active" id="student">
 @Html.Action("CreateStudent", "StudentRecords")
</div>
<div role="tabpanel" class="tab-pane" id="class">
@Html.Action("CreateClass", "StudentRecords")
</div>
<div role="tabpanel" class="tab-pane" id="category">
@Html.Action("CreateCategory")

</div>

编辑：

  $(function () {
$("#tabs").tabs({
    beforeLoad: function (event, ui) {
        ui.jqXHR.error(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.");
        });
    }
});

}）;

编辑2（更新）：

  @model IEnumerable<MvcApplication.tbStudentInfo>
@using MvcApplication.Models;

@{
    ViewBag.Title = "Navigation Tabs";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>

<script src="../../Scripts/jquery-2.1.1.js" type="text/javascript"></script>



<div role="tabpanel" class="nav">

<ul id="tabs" class="nav nav-tabs" role="tablist">
    <li  role="presentation" ><a href="#student"  data-toggle="tab">Student</a></li>
    <li  role="presentation" ><a href="#class"   data-toggle="tab">Classes</a></li>
    <li  role="presentation" ><a href="#category"   data-toggle="tab">Categories</a></li>

  </ul>


  <div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="student">
@Html.Action("CreateStudent", "StudentRecords") 
</div>
<div role="tabpanel" class="tab-pane" id="class">

</div>
<div role="tabpanel" class="tab-pane" id="category"></div>


  </div>



</div>



<script type='text/javascript'>

 $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                ui.jqXHR.error(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.");
                });
            }
        });
    });


var isClassLoaded = false;
$('#class').click(function() {
  if(isClassLoaded = false) {

    return;
  }
  $(this).load('@Html.Action("CreateClass", "StudentRecords")'); 
  isClassLoaded = true; 
}


</script>
<script type="text/javascript">
var isCategoryLoaded = false;
$('#category').click(function() {
  if(isCategoryLoaded) {
    return;
  }
  $(this).load('@Html.Action("CreateCategory", "StudentRecords")'); 
  isClassLoaded = true; 
}
</script>

Answer 1

为每个标签指定操作链接将通过ajax加载内容

查看

@model IEnumerable<MvcApplication.tbStudentInfo>
@{
  ViewBag.Title = "Navigation Tabs";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="tabs">
  <ul>
    <li><a href="#student">Student</a></li>
    <li>@Html.ActionLink("Classes", "CreateClass", "StudentRecords")</li>
    <li>@Html.ActionLink("Categories", "CreateCategory", "StudentRecords")</li>
  </ul>
  <div id="student">
    @Html.Action("CreateStudent", "StudentRecords") // load this initially
  </div>
</div>

脚本（包括jquery和jquery-ui）

<script type="text/javascript">
  $("#tabs").tabs();
</script>

注意，如果您添加了[ChildActionOnly]和CreateClass方法，则需要删除CreateCategory属性。

Answer 2

如果您只想为每个表单加载单独的表单，其中每个表单都是局部视图。我将使用带有switch语句和viewbag的服务器端编码（razor）。 Viewbag将存储tab索引的整数变量，并且在index.chtml中我将有一个switch语句，它为每个选项卡呈现不同的局部视图。请注意，当按下选项卡时，需要刷新索引页面（使用选项卡索引作为参数调用索引操作）。

单击相关选项卡渲染多个局部视图

2 个答案: