Question

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

链接1
链接2
链接3

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

我想让每个动作在同一页面（局部视图）中呈现其数据，但是我不知道这样做的“最佳”方式是什么。

因此，可以说链接1正在呈现人员列表（表），链接2正在统计信息（图表），列表3呈现了一些配置属性。

我应该如何定义它，以便每次单击时都保留主框架（左边的菜单栏包含链接1-2-3，并在共享视图中定义），但仅保留中间内容（部分视图）将发生变化，请记住，链接1是表格，链接2图表和其他控件，链接3是一堆控件（文本框，下拉列表等）。

我应该在每次点击时显示/隐藏div吗？这对我来说似乎很肮脏？所有输入/建议都非常欢迎！

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

注意：我在ASP.NET MVC项目中使用C＃，我希望使用C＃ASP.NET MVC解决方案（如果需要，可以使用Javascript），而不是其他脚本/编码语言或框架。 / p>

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零件。

Answer 2

您应使用以太PHP或Java进行此类安装。另外，您可以使用Angular或React之类的JS框架，它们也可以处理它。对于Plain JS，您可以始终使用事件（单击链接）以根据需要更改页面。

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/

我仍然愿意接受其他建议，特别是如果这些建议涉及偏见而又不涉及很多其他事情。到目前为止，谢谢大家！

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

3 个答案: