C# 将两个页面布局合并到一个视图中
我想在这件事上得到一些建议。我有一个查看页面,将显示许多用户。一种视图是在网格(类似于图库)中显示用户的图像。第二个视图显示相同的用户,但在列表布局中按其名称显示。我会在页面上有一个切换按钮在两者之间切换。最好的办法是什么?有两个独立的视图页,还是有某种局部视图 根据以下建议更新代码C# 将两个页面布局合并到一个视图中,c#,asp.net-mvc,C#,Asp.net Mvc,我想在这件事上得到一些建议。我有一个查看页面,将显示许多用户。一种视图是在网格(类似于图库)中显示用户的图像。第二个视图显示相同的用户,但在列表布局中按其名称显示。我会在页面上有一个切换按钮在两者之间切换。最好的办法是什么?有两个独立的视图页,还是有某种局部视图 根据以下建议更新代码 <div data-bind="template: {name:'grid-template'}"></div> <div data-bind="template: {name:'li
<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>
就我个人而言,我喜欢有干净的、孤立的、小的、局部的视图,尤其是当它是常规的HTTP POST时。
然而,基于我在下面所做的假设,我认为我可以建议一个更好的实现设计 我的假设 你有
Index.cshtml
Parent查看以显示用户列表阅读“注意5:动态选择所使用的模板”部分,尤其是
只需在两个渲染模板之间切换即可
<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() {
// I am just writing out a dummy User array here.
// Render out your User Array JSON encoded using JSON.NET.
var myUsers = [
{ "id" : 1, "name": "User 1" },
{ "id" : 2, "name": "User 2" }
];
// here is your KnockoutJS View Model "class"
function MyKoViewModel(users) {
var self = this;
self.users = ko.observableArray(users);
// Toggle this renderMode observable's value
// between 'listing' and 'gallery' via your Toggle button click event handler
self.renderMode = ko.observable( 'gallery' );
self.displayTemplate = function(user) {
// this will return 'gallery-layout-template' or 'listing-layout-template'
return self.renderMode() + '-layout-template';
}
}
ko.applyBindings( new MyKoViewModel( myUsers ) );
});
</script>
非常感谢您提供的所有精彩信息!我会尝试一下,然后再给你回复。谢谢我已经考虑了你的建议。我唯一剩下的就是为这两个视图创建一个切换按钮,我想创建一个网格按钮和列表按钮,当按下其中一个按钮时,它会显示出来。目前,我有两个网格和列表显示在页面上。
<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() {
// I am just writing out a dummy User array here.
// Render out your User Array JSON encoded using JSON.NET.
var myUsers = [
{ "id" : 1, "name": "User 1" },
{ "id" : 2, "name": "User 2" }
];
// here is your KnockoutJS View Model "class"
function MyKoViewModel(users) {
var self = this;
self.users = ko.observableArray(users);
// Toggle this renderMode observable's value
// between 'listing' and 'gallery' via your Toggle button click event handler
self.renderMode = ko.observable( 'gallery' );
self.displayTemplate = function(user) {
// this will return 'gallery-layout-template' or 'listing-layout-template'
return self.renderMode() + '-layout-template';
}
}
ko.applyBindings( new MyKoViewModel( myUsers ) );
});
</script>
self.displayTemplate = ko.computed(function() {
return self.renderMode() + '-layout-template';
}