使用MVC3将局部视图创建为选项卡

Question

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

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

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



        });

    });


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

Answer 1

正如邓肯上面建议的那样，使用它的最好的框架是JQuery UI Tabs，我一直在使用这个非常有趣的框架。

下面是一些代码示例。

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

<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使得清晰地实现选项卡变得非常容易。

Answer 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示例，看看你会如何使用它。