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代码进行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示例，看看你是怎么做的我会去使用它。

Answer 2

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

以下是一些代码samnples。

该视图有一个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使得很容易干净地实现Tabs。

使用MVC3创建部分视图作为选项卡

2 个答案: