0

現在、ASP.NET MVC3 でサイトをセットアップしていますが、すべてのレイアウトがモバイル デバイス用に最適化されています。

デスクトップ ブラウザーやタブレットの追加の画面スペースを活用するために、いくつかの既存のビューを組み合わせたいと思います。

1 つはリンクのリストを表示し、もう 1 つは各リンクによって生成されたコンテンツを表示します。これらのビューは両方とも、別々のコントローラーによって処理されます。これがリストビューです（簡略化）。これはレイアウト ページを使用するため、レイアウトで@RenderBody()が呼び出されたときに表示されるものです (私の 2 番目のビューも同じレイアウト ファイルでこのように動作します)。

@model IEnumerable<CommandCenterEntity>
@{
    if (Request.Browser.IsMobileDevice) {
        Layout = "~/Views/Shared/_LayoutMobileContent.cshtml";
    }
    else {
        Layout = "~/Views/Shared/_LayoutDesktop.cshtml";
    }
}
<ul data-role="listview" id="commandcenterlist" data-filter="true" data-inset="true" data-theme="b">
    @foreach (var entity in Model)
    {
    <li>
        @Html.CommandCenterLinks(@entity, x => Url.Action("Index", "Worksheet", new { ParentId = @entity.ID_Item }))
    </li>
    }
</ul>

CommandCenterLinks ヘルパーは、エンティティのいくつかのプロパティに応じて異なるアイコンを含む "a" タグを生成するだけです。

画面の左側の div タグにあるリスト内のリンクをクリックすると、生成されたコンテンツが右側の別の div タグに表示されるように、ビューを組み合わせたいと思います。

モバイル レイアウトで使用されているのと同じアクション/コントローラーを再利用できることを望んでいたので、jQuery を使用してリストのクリック イベントをインターセプトし、アクションから返されたデータをキャプチャして、div に挿入しようとしました。

$(document).on("click", "#commandcenterlist a", function (e) {
    $.mobile.showPageLoadingMsg();        
    $.ajax({
        url: this.href,
        success: function (data) {
            $.mobile.hidePageLoadingMsg();
            $("#desktopContentPane").html(data);
        }
    });
    return false;
});

ただし、ajax 成功ハンドラーで返されるデータには、完全な html ページが含まれています。

<!DOCTYPE html> 
<html> 
    <head>...</head>
    <body>...</body>
</html>

...必要なのは、レイアウトの@RenderBody()呼び出しで生成されたコンテンツだけです。コントローラーのメソッドを havereturn PartialView("Index");に変更してみましたが、同じ結果になりました。ビューのその部分だけを取り戻す方法はありますか? または、これを行うためのよりクリーンで「MVC」な方法はありますか?

4

1 に答える 1

1

最良のオプションは、別のコントローラー アクションから部分的なビューを返すことです。そのため、機能させるためにいくつか変更します。

  1. 共有したいコンテンツ (デスクトップの div に表示したいもの) を取得し、部分ビューに配置します。
  2. この部分ビューのみを返すコントローラー アクションを作成し ( PartialViewメソッドを使用して部分ビュー名を渡します)、デスクトップ バージョンの JavaScript から呼び出します。
  3. モバイル バージョンのビューでは、RenderPartialメソッドを使用して、部分ビューのコンテンツをモバイル ページに含めることができます。
于 2012-07-19T16:05:17.197 に答える