Show/hide 同一页面上的多个局部视图

Question

我有一个仪表板类型的页面，在左侧您会有如下菜单项：

link 1
link 2
link 3

他们每个人在同一个控制器中执行不同的操作。

我想让每个操作在同一页面（在部分视图中）呈现它的数据，但我不知道 "best" 这样做的方式是什么。

所以假设 link 1 正在呈现人员列表 (table)，link 2 统计数据（图表）并列出 3 一些配置属性。

我应该如何定义它，以便在每次单击时，主框架（这是左侧的菜单栏，包含 link 1-2-3 并在共享视图中定义）保留但只有中间内容（部分视图）会发生变化，请记住 link 1 是一个 table，link 2 图表和其他控件以及 link 3 一堆控件（文本框、下拉菜单等）。

我应该在每次点击时 show/hide div 吗？这seems/feels对我来说有点脏？欢迎大家input/suggestions！

编辑：这是我想要的行为（接受的答案）：Show/Hide Multiple Divs with Jquery

注意：我在 ASP.NET MVC 项目中使用 C#，我更喜欢 C# ASP.NET MVC 解决方案（Javascript 如果需要），而不是其他 script/coding 语言或框架。

Answer 1

您应该使用以太币 PHP 或 Java 进行此类设置。或者你可以使用像 Angular 或 React 这样的 JS 框架，它们也可以处理它。对于 Plain JS，您始终可以使用事件（链接被点击）来根据需要更改页面。

Answer 2

您可以在 Link 上添加一个 onClick 处理程序：

<a onClick="handleLink1()">Link1</a>

假设右侧锁是这样的：

    <div id = "renderArea">

    </div>

这样你就可以编写句柄Link1() 函数如下：

function handleLink1(){

//Here you asign the new HTML:
Document.getElementById("renderArea").innerHTML = "<div/>";

}

现在您可以为每个 Link 编写一个函数，并根据需要重新渲染 Rigth Part。

Answer 3

现在我已经实现了这个答案：Show/Hide Multiple Divs with Jquery 因为我不直接知道其他答案来实现它们

代码示例：

jQuery(function() {
 jQuery('#showall').click(function() {
  jQuery('.targetDiv').show();
 });
  jQuery('.showSingle').click(function() {
   jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/

我仍然对其他建议持开放态度，特别是如果它们涉及部分观点而不是其他很多事情。到目前为止谢谢大家！

Show/hide 同一页面上的多个局部视图

Show/hide multiple partial views on same page

javascript

html

asp.net-mvc

partial-views

show-hide