Показать / скрыть несколько частичных просмотров на одной странице

Question

У меня есть страница типа панели инструментов, где слева у вас есть пункты меню, такие как:

• ссылка 1
• ссылка 2
• ссылка 3

Каждый из них выполняет свое действие в одном и том же контроллере.

Я бы хотел, чтобы каждое действие отображало данные на одной странице (в частичных представлениях), но я понятия не имеюкакой "лучший" способ сделать это был бы.

Итак, допустим, что ссылка 1 отображает список людей (таблица), статистика ссылки 2 (диаграммы) и список 3 некоторых свойств конфигурации.

Как мне определить это так, чтобы при каждом щелчке оставался основной фрейм (то есть строка меню слева, содержащая ссылку 1-2-3 и определяемая в общем представлении), но только среднее содержание (частичные представления)) изменится, учитывая, что ссылка 1 - это таблица, таблица ссылок 2 и другие элементы управления, а ссылка 3 - группа элементов управления (текстовые поля, раскрывающиеся списки и т. д.).

Должен ли я показывать / скрывать элементы div накаждый клик? Мне это кажется / кажется грязным? Весь ввод / предложения приветствуются!

РЕДАКТИРОВАТЬ: Это поведение, которое я хочу (принятый ответ): Показать / Скрыть несколько Divs с Jquery

Примечание: Я использую C # в проекте ASP.NET MVC, и я бы предпочел решение C # ASP.NET MVC (при необходимости, Javascript), а не другие языки сценариев / кодирования или платформы.

Answer 1

Вы можете добавить обработчик onClick для ссылки:

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

Предполагая, что сторона Rigth блокируется следующим образом:

    <div id = "renderArea">

    </div>

С этим вы можете написать handleLink1 () Functio nasследует:

function handleLink1(){

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

}

Теперь вы можете написать функцию для каждой ссылки и перерисовать Rigth Part по вашему желанию.

Answer 2

На данный момент я реализовал этот ответ: Показать / скрыть несколько делений с помощью 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/

Я все еще открыт для других предложений, особенно если они касаются Частичных взглядов, а не многих других вещей. Спасибо всем пока!

Answer 3

Вы должны использовать эфир PHP или Java для такого рода установки. В качестве альтернативы вы можете использовать JS Framework, такой как Angular или React, они также могут его обрабатывать. Для Plain JS вы всегда можете использовать Событие (щелкают ссылки), чтобы изменить страницу по своему желанию.