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

【问题标题】：Show/hide multiple partial views on same page在同一页面上显示/隐藏多个部分视图
【发布时间】：2019-11-10 18:03:58
【问题描述】：

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

链接 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），而不是其他脚本/编码语言或框架。

【问题讨论】：

参见this 和this 作为众多示例中的两个。
@SteveGreene 感谢您提供的示例。我认为这对我来说有点复杂，我真的认为会有一种更简单的方法来处理部分视图......我猜我错了:)

标签： javascript html asp.net-mvc partial-views show-hide

【解决方案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 部分。

【讨论】：

我试过了，但点击链接没有任何作用。我的链接 (...) 在共享视图 (layout.cshtml) 中，我的函数也是如此。
位于另一个视图中，其中包含部分视图。

【解决方案2】：

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

【讨论】：

我不能使用 PHP、React 或 TypeScript，因为我不懂这些语言，但你能告诉我更多关于 Javascript 方法的信息吗？我无法想象这将是我设置中的唯一选择？感谢您的反馈！

【解决方案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/

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

【讨论】：