c# - 2 つのページ レイアウトを 1 つのビューに

Question

この件についてアドバイスをいただきたいです。多数のユーザーを表示するビュー ページがあります。1 つのビューは、画像のグリッド (ギャラリーのような) にユーザーを表示することです。2 番目のビューは、同じユーザーをリスト レイアウトで名前別に表示することです。この 2 つを切り替えるためのトグル ボタンをページに配置します。それについて行く最善の方法は何ですか？2 つの別々のビュー ページを持っているか、何らかの部分ビューを持っていますか?

以下の提案の後にコードを更新する

<div data-bind="template: {name:'grid-template'}"></div>
<div data-bind="template: {name:'list-template'}"></div>

<script style="float:left"  type="text/html" id ="grid-template">
    <section " style="width:100%; float:left">
    <section id="users" data-bind="foreach: Users">
        <div id="nameImage">
            <figure id="content">
                <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
                <figcaption>
                    <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
                    <a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
                </figcaption>
            </figure>
            <p data-bind="text:Name"></p>
            </div>
        </section>
    </section>
</script>

<script style="float:left" type="text/html" id="list-template">
        <div data-bind="foreach: Users">
            <div style="width:60%; float:left; margin:10px; height:58px">
                <img style="float:left; margin-right:5px" width="58" height="58" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
                <p style="height:58px; float:left; vertical-align:central" data-bind="text:Name"></p>
                <a style="float:right"  title="Profile"  class="icon-user icon-black"></a>
                <a style="float:right"  title="Email" class="icon-envelope icon-black" data-bind="attr:{'href':'mailto:' + Email()}"></a>
            </div>
        </div>
</script>

ノックアウト スクリプト ファイル

$.views.User.UserViewModel = function (data) {
        var self = this;
        self.Name = ko.observable(data.Name);
        self.Email = ko.observable(data.Email);
        self.ContentRole = ko.observable(data.ContentRole);
        self.MD5Email = ko.observable(data.MD5Email);
        self.GravatarUrl = ko.computed(function () {
           return 'http://www.gravatar.com/avatar/' + self.MD5Email() + '?s=300&d=identicon&r=G';
        });
        self.renderMode = ko.observable('grid');
        self.displayTemplate = ko.computed(function () {
            return self.renderMode() + '-layout-template';
        });

    };