在同一页面上显示/隐藏多个局部视图

Question

我有一个类似于仪表板的页面，在左边你会有菜单项，比如：

• 链接1
• 链接2
• 链接3

它们中的每一个都将在同一控制器中执行不同的操作。

我想让每个动作在同一个页面上(在部分视图中(呈现它的数据，但我不知道做这件事的"最佳"方式是什么

假设链接1呈现人员列表(表(、链接2统计信息(图表(和列表3的一些配置属性。

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

我应该在每次单击时显示/隐藏div吗？我觉得这有点脏？欢迎所有意见/建议！

编辑：这是我想要的行为(接受的答案(：用Jquery 显示/隐藏多个潜水

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

Answer 1

您可以在链接上添加onClick处理程序：

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

假设Rigth侧像这样锁定：

<div id = "renderArea">
</div>

有了它，您可以编写handleLink1((函数如下：

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

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

Answer 2

您应该使用以太PHP或Java进行这种设置。或者，你可以使用像Angular或React这样的JS框架，他们也可以处理它。对于Plain JS，您也可以根据需要使用事件(单击链接(来更改页面。

Answer 3

现在我已经实现了这个答案：用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/

我仍然对其他建议持开放态度，特别是如果这些建议涉及部分观点，而不涉及太多其他内容。到目前为止，谢谢大家！