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

Duncanが上記でアドバイスしているように、それを使用するのに最適なフレームワークはJQuery UIタブであり、これは私が使用している面白いものです。

ここにいくつかのコードサンプルがあります。

ビューには、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);
    }
}

これにより、複数のタブを実行し、各タブに必要なデータを個別に設定できます。

タブ用のJQueryUIを使用すると、タブを非常に簡単にクリーンに実装できます。

于 2012-04-07T18:39:50.387 に答える
0

使用している jQuery コードは ajax 呼び出しを行いますが、返された部分ビューでは何もしません。ページに挿入したい場合は、そのためにコールバック関数を提供する必要があります。次に例を示します。

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

"dataType": 'json'( 「Rating」パーシャルが単なる通常の部分ビューであると仮定すると、持っているビットは必要ないことに注意してください)。同じことをもう少し簡単に行うには、jQuery のload()メソッドを使用できます。

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

そうは言っても、まだ行っていない場合は、必要な作業を正確に実行するように設計されているjQuery UI の Tabsを確認する必要があります。ajax の例を見て、どのように使用するかを確認してください。それ。

于 2012-04-07T09:30:17.710 に答える