c# - two page layouts into one view -

i advice on matter. have view page display number of users. 1 view display users in grid (gallery like) of images. second view display same users name in list layout. have toggle button on page switch between two. best way go it? having 2 separate view pages or have partial view of sort?

update code after suggestion below

<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> 

knockout script file

$.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';         });      }; 

personally, having clean isolated small little partial views if going regular http post.
however, based on assumptions making below, think can suggest better implementation design.

my assumption

you have

1. index.cshtml parent view display list users.
2. json object array containing list of users
3. based on see, using knockoutjs.
   read knockoutjs template binding "note 5: dynamically choosing template used" part.

it kind of makes easier doing if using knockoutjs or similar.
have toggle between 2 rendering templates.

<script type="text/html" id="gallery-layout-template"> ... </script> <script type="text/html" id="listing-layout-template"> ... </script>  <div id="divoutputcontainer"      data-bind="template: { name: displaytemplate, foreach: users }"></div>  <script type="text/javascript"> $(document).ready(function() {      // writing out dummy user array here.     // render out user array json encoded using json.net.     var myusers = [         { "id" : 1, "name": "user 1" },         { "id" : 2, "name": "user 2" }     ];      // here knockoutjs view model "class"     function mykoviewmodel(users) {         var self = this;         self.users = ko.observablearray(users);          // toggle rendermode observable's value         // between 'listing' , 'gallery' via toggle button click event handler         self.rendermode = ko.observable( 'gallery' );          self.displaytemplate = function(user) {             // return 'gallery-layout-template' or 'listing-layout-template'             return self.rendermode() + '-layout-template';         }     }      ko.applybindings( new mykoviewmodel( myusers ) ); }); </script> 

so technique, don't need make ajax call every time refresh view different rendering template.
have data want display client-side javascript knockoutjs view model.
then, switch client-side rendering template using knockoutjs.

must more efficient :-)

note

i have feeling, might have use ko.computed() mykoviewmodel's displaytemplate() function this.

self.displaytemplate = ko.computed(function() {     return self.rendermode() + '-layout-template'; }