通过单击相关选项卡渲染多个部分视图

Render Multiple PartialView by clicking on relevent tabs

本文关键字：个部 视图 单击 选项      更新时间：2023-09-26

我搜索了很多，我在stackoverflow和其他网站上找到了很多解决方案，我尝试了很多，但没有一个对我有用。所以这就是我发布这个问题的原因。我创建了三个部分视图。每个 Partial View 都有提交表格，我们可以在其中创建记录。在索引视图上，我创建了 3 个选项卡并在这三个选项卡中呈现了部分视图。页面加载时，将加载所有三个部分视图(窗体(。我只想在页面加载时加载单个部分视图。然后，当用户单击选项卡时，应加载其他视图/表单。假设如果用户单击"类"选项卡，则类部分视图应加载在此选项卡中，其他选项卡也是如此。

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

为每个选项卡指定操作链接将通过 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>

请注意，如果已添加 CreateClass 和 CreateCategory 方法，则需要从 [ChildActionOnly] 属性中删除它们。

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

相关文章：