1

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

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

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



        });

    });


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

2 回答 2

0

您正在使用的 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 的 Tabs，它旨在完成您需要的那种事情 - 只需查看 ajax 示例以了解您将如何使用它。

于 2012-04-07T09:30:17.710 回答
0

正如上面 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 使得干净地实现选项卡变得非常容易。

于 2012-04-07T18:39:50.387 回答