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

Posted

技术标签:

【中文标题】每个选项卡都有单独的控制器/视图?【英文标题】: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

【讨论】:

以上是关于每个选项卡都有单独的控制器/视图?的主要内容,如果未能解决你的问题,请参考以下文章

根据选择的选项卡更改导航栏的标题?

核心数据表视图控制器的重复条目以及如何使用 NSFetchedResultsController 处理

在每个选项卡错误处使用导航控制器从视图控制器转换到选项卡栏控制器

Xcode 旧标签栏图标突然出现

如何在选项卡栏控制器中更新选项卡上的视图

核心数据、托管对象和多个表视图控制器