使用 MVC3 将部分视图创建为选项卡答案

【问题标题】：Create partial views as tabs with MVC3使用 MVC3 将部分视图创建为选项卡
【发布时间】：2012-04-07 03:14:22
【问题描述】：

我在一个应用程序中有 2-3 个不同的视图，并且有一个主视图。我的主视图我想将这 2-3 个视图显示为选项卡。因此，如果用户单击选项卡，则应隐藏先前的视图并打开新视图。我在打开新选项卡时进行 Ajax 调用，但未打开其他视图。我该如何实现？

$('#tabRating').click(function () {
        $.ajax({
            "dataType": 'json',
            "type": "get",

            "url": '@Url.Action("TabsSelect", "Employee")'



        });

    });


public ActionResult TabsSelect()
    {
        return PartialView("Rating");
    }

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/6420092/…

标签： .net asp.net-mvc-3 tabs

【解决方案1】：

正如 Duncan 建议的那样，使用它的最佳框架是 JQuery UI Tabs，这很有趣，我一直在使用。

这里有一些代码示例。

视图有一个 Jquery 脚本，它利用 jquery.tabs() 功能：

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();
        getContentTab (1);
    });

    function getContentTab(index) {
        var url='@Url.Content("~/SiteAdmin/AjaxGetTab")/' + index;
        var targetDiv = "#tabs-" + index;
        var ajaxLoading = "<img id='ajax-loader' src='@Url.Content("~/Content")/ajax-loader.gif' align='left' height='28' width='28'>";

        $(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>"); 
        $.ajax({
          type: 'get',
          url: url,
          cache: false,
          success: function(result) {
            $(targetDiv).html(result);
          }
        });           


    }

这是我的控制器操作方法，它传递了所需的部分视图。

     /// <summary>
    /// AJAX action method to obtain the correct Tab to use.
    /// </summary>
    /// <param name="index">Tab number</param>
    /// <returns>Partial View</returns>
    public ActionResult AjaxGetTab(int id)
    {
        string partialViewName = string.Empty;
        object model = null;

        //--Decide which view and model to pass back.
        switch (id)
        {
            case 1:
                partialViewName = "_TransactionType";
                model = db.TransactionTypes.ToList();
                break;
            case 2:
                partialViewName = "_DirectionType";
                model = db.DirectionTypes.ToList();
                break;
            case 3:
                partialViewName = "_UserType";
                model = db.UserTypes.ToList();
                break;
            case 4:
                partialViewName = "_CurrencyType";
                model = db.CurrencyTypes.ToList();
                break;
            case 5:
                partialViewName = "_tabError";
                break;

        }

        return PartialView(partialViewName,model);
    }
}

这允许我运行多个选项卡并分别保存每个选项卡所需的数据。

标签的 JQuery UI 使得干净地实现标签变得非常容易。

【讨论】：

如何在标签点击时调用 getContentTab？它适用于第一次加载。

【解决方案2】：

您正在使用的 jQuery 代码进行了 ajax 调用，但没有对返回的局部视图做任何事情。如果要将其插入到页面中，则需要提供一个回调函数来执行此操作，例如：

$.ajax({
    type: "get",
    url: '@Url.Action("TabsSelect", "Employee")',
    success: function (data) {
        $("#thingToPutTabContentIn").html(data);
    }
});

（请注意，您不想要 "dataType": 'json' 位，假设您的“评级”部分只是普通的部分视图）。为了更简单地做同样的事情，你可以使用 jQuery 的 load() 方法：

$("#thingToPutTabContentIn").load('@Url.Action("TabsSelect", "Employee")');

话虽如此，如果您还没有这样做，您可能应该查看jQuery UI's Tabs，它旨在完成您需要的那种事情 - 只需查看 ajax 示例，看看您会如何去使用它。

【讨论】：