通过单击相关选项卡呈现多个局部视图答案

【问题标题】：Render Multiple PartialView by clicking on relevent tabs通过单击相关选项卡呈现多个局部视图
【发布时间】：2014-12-21 11:33:28
【问题描述】：

我搜索了很多，我在 stackoverflow 和其他网站上找到了很多解决方案，我尝试了很多，但没有一个对我有用。所以这就是我发布这个问题的原因。我创建了三个局部视图。每个部分视图都有提交表单，我们可以在其中创建记录。在索引视图上，我创建了 3 个选项卡并在这三个选项卡中呈现了部分视图。当页面加载时，所有三个部分视图（表单）都会加载。我只想在页面加载时加载一个局部视图。然后，当用户单击选项卡时，应加载其他视图/表单。假设如果用户单击“类”选项卡，那么 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>

【问题讨论】：

没有理由你不能有 3 个表格，每个表格都分别提交 - 有什么问题？
斯蒂芬：我有三种不同的形式。我想通过单击选项卡将每个表单加载到选项卡中。意味着当用户单击选项卡然后表单加载时。基本问题是表单加载。加载索引页面时，会加载选项卡中的所有表单。
你会使用javascript/jquery处理每个tab的点击事件来加载相应的表单，但是在页面渲染的时候加载所有3个表单有什么问题？
我是 JQuery/Javascript 新手。因为我是被拘留者，所以这是公司给我的任务。说由于性能问题仅加载一个标签页，然后如果用户单击任何其他标签，则加载相应的部分视图。我希望现在你有问题了
但是您的问题表明您在加载 3 个表单时遇到了问题。如果用户点击 2 或 3 个选项卡，则会加载 2 或 3 个表单，因此您最终仍然会遇到同样的问题。

标签： javascript jquery asp.net-mvc-4 tabs

【解决方案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 方法，则需要将其删除。

【讨论】：

兄弟我实现了你的逻辑，但页面加载时仍然加载所有选项卡。我用断点来检查。并使用 Html.Action 而不是 Url.Action。因为 Url.Action 没有在选项卡中呈现/显示任何内容。
您不能使用@Html.Action - 这是在初始加载时解析的，因此所有表单都在加载。您是否删除了 [ChildActionOnly] 属性（假设您当时使用了控制器方法）。在脚本上设置断点检查是否有任何控制台错误。
请注意我在$('#class)click() 中缺少引用 - 应该是$('#class')click()
兄弟，我更正了它。我尝试了您的代码进行了不同的更改，但现在仍然产生选项卡。它在单个选项卡上显示所有三种表单。现在我希望通过使用 switch 语句来解决这个问题，如果可能的话
@MuzamilRafique，我不使用 jquery 选项卡，但我已经在一个页面上使用 3 个空 div 对其进行了测试，它工作正常。 switch 语句不会解决您的问题。您需要使用 ajax 加载第 2 和第 3 表单。如果它们在同一个选项卡上加载，请检查元素的 id - jquery 选择器可能是错误的。

【解决方案2】：

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

【讨论】：