1

私は Asp.net mvc に取り組んでいます。左ペインと中央ペイン (コンテンツ ペイン) を含む従来のレイアウト ページがあります。つまり、左ペインには、ホーム、イベントなどのタブが含まれています。ユーザーがいずれかのタブをクリックすると、それぞれのアクションが実行され、ページが読み込まれます。しかし、コンテンツ ペインを非同期にロードしたい、つまりページ全体をロードせずに、つまりレイアウト ページとコンテンツ ページの両方をロードしたいのですが、コンテンツ ページのみをロードしたいだけです。そのために、jquery ajax呼び出しとRenderPartialビューメカニズムを使用しました。

$('#lnkHome').click(function () {
                $.ajax({
                    url: '/Home/Home',
                    type: 'POST',
                    cache: false,
                    success: function (data) {
                        $('div.ContentPane').html(data);
                    }
                });
            });
public actionresult Home()
{
return Partial("_home");
}

しかし、すべての JavaScript コードを使用することはできません。レイアウト ページ スクリプトと重複していると思われます。私のシナリオに一致するページを非同期的にロードする方法はありますか? 私を導いてください。

4

1 に答える 1

2

これらのリンクがアンカーである場合は、クリック ハンドラーから false を返すことにより、既定のイベントを確実にキャンセルする必要があります。

$(function() {
    $('.menuLink').click(function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function (data) {
                $('div.ContentPane').html(data);
            }
        });

        return false;
    });
});

これで、左側のペインに多くのリンクを表示できます:

@Html.ActionLink("go to home", "index", "home", null, new { @class = "menuLink" })
@Html.ActionLink("go to events", "events", "home", null, new { @class = "menuLink" })
...

または単に Ajax.ActionLinks を使用します。

@Ajax.ActionLink("go to home", "index", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" })
@Ajax.ActionLink("go to events", "events", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" })
...

Ajax.ActionLink はターゲット DOM 要素の ID を想定しているため、コンテンツ ペイン ID に ID を指定するだけで済みます。

<div id="contentPane">
    ...
</div>

jquery.unobtrusive-ajaxまた、Ajax.ActionLinks が実際に目立たないように AJAX 化され、通常のリクエストではなく AJAX リクエストを送信するために、ページでスクリプトを参照することを忘れないでください。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
于 2012-10-04T14:34:53.810 に答える