时间戳

首页 > 解决方案 > 每个选项卡都有单独的控制器/视图？

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

问题描述

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

当单击按钮时，在调用控制器中的操作之前，我将使用 Jquery 在 div 中隐藏/显示相关的局部视图？

谢谢

标签： c#jqueryhtml.netasp.net-mvc

解决方案

您可以使用 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>

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

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

推荐阅读