每个选项卡都有单独的控制器/视图？

Posted 2023-05-09

【中文标题】每个选项卡都有单独的控制器/视图？

【英文标题】：Having separate Controller/Views for each Tab?

【发布时间】：2019-04-30 08:19:18

【问题描述】：

我在 Asp.NET MVC 中创建一个应用程序。主页将包含几个选项卡，例如，学生和课程。

会有学生模型和课程模型。我想为每个包含新建、编辑、删除操作的控制器。前端看起来与此类似..

我想在每个选项卡的正文中使用部分视图。以第一个选项卡为例，当页面加载时，它会在选项卡主体中显示一个学生列表作为局部视图。在此局部视图中单击“添加学生”时，它将调用学生控制器中的一个操作，然后返回并在选项卡主体中显示一个局部视图，其中包含一个创建新学生的表单。发布此表单后，它将再次在选项卡正文中显示学生列表部分视图。

谁能指出我正确的方向或建议一种干净的方法来实现这一目标？

我的一个想法是对每个动作都有一个局部视图，例如：

<div class="tab-content" style="margin-top:20px;margin-left:10px;">
    <div class="tab-pane fade active in" id="page-config-tab">
        @html.Partial("~/Views/Student/_List.cshtml")
        @Html.Partial("~/Views/Student/_Add.cshtml")
        @Html.Partial("~/Views/Student/_Edit.cshtml")
    </div>
    <div class="tab-pane fade" id="candidates-tab">
        @Html.Partial("~/Views/Course/_List.cshtml")
        @Html.Partial("~/Views/Course/_Add.cshtml")
        @Html.Partial("~/Views/Course/_Edit.cshtml")
    </div>
</div>

当一个按钮被点击时，我会在调用Controller中的Action之前使用Jquery在一个div中隐藏/显示相关的局部视图？

谢谢

【问题讨论】：

您是否有特别的原因要使用 jquery 而不是说 React 或 Angular？

说实话我还没学过 React 或 Angular 但我对 Jquery 很熟悉。

【参考方案1】：

您可以使用 AJAX 调用返回正确局部视图的必要操作。在页面加载时将它们全部呈现是浪费的，因为一次只会显示 1 个局部视图。 您的初始 HTML 应如下所示，仅呈现您需要的视图：

<div class="tab-content" style="margin-top:20px;margin-left:10px;">
<div class="tab-pane fade active in" id="page-config-tab">
    @Html.Partial("~/Views/Student/_List.cshtml")
</div>
<div class="tab-pane fade" id="candidates-tab"></div>

然后，添加一个脚本块：

<script>
    $(function() 
        $('#addStudentBtn').click(function() 
            $.ajax(
                method: 'GET',
                url: '@Url.Action("Add", "Student")',
                success: function(data) 
                    $('#page-config-tab').html(data); // 'data' will be your partial view
                
           );
        );
    );
</script>

我已经向您展示了添加学生的最低限度示例，您可以对每个操作使用这种通用方法。

附：看起来您正在使用引导程序 - 它们具有您可以在更改选项卡时使用的事件处理程序：https://getbootstrap.com/docs/3.3/javascript/#tabs-events