Question

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

将有一个学生模型和课程模型。我想为每个控制器都包含一个New，Edit，Delete Actions。前端看起来与此类似。

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

有人能指出我正确的方向还是建议采取干净的方法来实现这一目标？

我本来想对每个操作都拥有一个局部视图，例如：

<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中隐藏/显示div中的相关局部视图，然后再在Controller中调用Action吗？

谢谢

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

我已经向您展示了一个添加学生的最简单的示例，您可以为每个操作使用这种通用方法。

P.S。看起来您正在使用引导程序-它们具有事件处理程序，可在更改标签页时使用：https://getbootstrap.com/docs/3.3/javascript/#tabs-events

每个标签都有单独的控制器/视图吗？

1 个答案: