2

バンドルが読み込まれた _layout.cshtml を含む MVC プロジェクトでは、ビューが読み込まれるたびにレイアウトとバンドルが読み込まれます。RenderBody() がまだ持っていないコンテンツのみをロードする (レイアウトをリロードしない) ように、そのようなものを最初にのみロードするために使用できる組み込みメカニズムはありますか? これはパーシャルの出番ですか？

パーシャルがそれを処理する正しい方法である場合、これは、各コントローラーメソッドの 2 つのバージョン (1 つはレイアウトあり、もう 1 つはなし) が必要であることを意味しますか? ここでのヒントは素晴らしいでしょう。

4

1 に答える 1

1

私が知る限り、レイアウト ページを一度に読み込む組み込みのメカニズムはありません。サーバーにとって軽量になるように、レイアウトを一度にのみロードする場合は、クライアント側のアプローチを使用してそれを行うことができます。これがステップです。MVC4 アプリケーションを作成します。

_Layout.cshtml に、ロードする html ページを保持する div を追加します。私の場合は「ページホルダー」 

 <div id="body">
            <div id="pageholder">
                @RenderSection("featured", required: false)
                <section class="content-wrapper main-content clear-fix">
                @RenderBody()
                </section>
            </div>
 </div>

このスクリプトを _Layout.cshtml に追加します 

@Scripts.Render("~/Scripts/common.js")
<script type="text/javascript">
            $(document).ready(function() {
                $('.pagelink').click(function() {
                    var settings = {
                        'url': $(this).attr('url'),
                        'type': 'GET',
                        'dataType':'html'
                    };
                    get_html(settings);
                });
            });    
</script>

メニュー リンクを変更する

<nav>
    <ul id="menu">
     <li>@Html.ActionLink("Home", "Index", "Home")</li>
     <li><a href="#" class="pagelink" url="/home/about">About</a></li>
     <li> <a href="#" class="pagelink" url="/home/contact">Contact</a></li>
      </ul>
</nav>

js ファイルを追加して common.js という名前を付け、このコンテンツを配置します

function get_html(settings) {
        settings.success = function(data) {
            $('#pageholder').empty().html(data);
        };
    settings.error = function (xhr, ajaxOptions, thrownError) {
        alert(xhr.statusText);
    };
    $.ajax(settings);
}

レイアウトを設定 = null; AboutビューとContactビューの両方

@{
    ViewBag.Title = "About";
    Layout = null;
}

アプリケーションを実行し、About ページと Contact ページをテストする

于 2013-10-11T04:39:07.370 に答える