Tengo un tipo de página de tablero donde a la izquierda tendrías elementos de menú como:

  • enlace 1
  • enlace 2
  • enlace 3

Cada uno de ellos va a una acción diferente en el mismo controlador.

Me gustaría que cada acción procese sus datos en la misma página (en vistas parciales) pero no tengo idea de cuál sería la "mejor" forma de hacerlo.

Entonces, supongamos que el enlace 1 representa una lista de personas (tabla), estadísticas del enlace 2 (gráficos) y enumera 3 algunas propiedades de configuración.

¿Cómo debo definir esto para que en cada clic, el marco principal (que es la barra de menú a la izquierda que contiene el enlace 1-2-3 y se define en una vista compartida) permanezca pero solo el contenido medio (vistas parciales) cambiar, teniendo en cuenta que el enlace 1 es una tabla, los gráficos del enlace 2 y otros controles y el enlace 3 un conjunto de controles (cuadros de texto, menús desplegables, etc.).

¿Debo mostrar / ocultar div's en cada clic? Esto parece / se siente un poco sucio para mí? ¡Todos los comentarios / sugerencias son bienvenidos!

EDITAR: Este es el comportamiento que quiero (respuesta aceptada): Mostrar / Ocultar múltiples Divs con Jquery

Nota : estoy usando C # en un proyecto ASP.NET MVC y preferiría una solución C # ASP.NET MVC (Javascript si es necesario), no otros lenguajes de script / codificación o marcos.

0
Dimitri 30 oct. 2019 a las 22:51

3 respuestas

La mejor respuesta

Por ahora he implementado esta respuesta: Mostrar / Ocultar múltiples Divs con Jquery desde los otros no están en mi conocimiento directo para implementarlos

Ejemplo de código:

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/

Todavía estoy abierto a otras sugerencias, especialmente si involucran vistas parciales y no a muchas otras cosas. ¡Gracias a todos hasta ahora!

0
Dimitri 31 oct. 2019 a las 13:20

Debe usar ether PHP o Java para este tipo de instalación. Alternativamente, podría usar un JS Framework como Angular o React, también pueden manejarlo. Para Plain JS, siempre puede usar un evento (se hace clic en los enlaces) para cambiar la página como lo desee.

0
Sollder1 30 oct. 2019 a las 20:00

Puede agregar un controlador onClick en un enlace:

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

Suponiendo que el lado derecho se bloquee así:

    <div id = "renderArea">

    </div>

Con eso podría escribir el handleLink1 () Functio nas siguiente:

function handleLink1(){

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

}

Ahora puede escribir una Función para cada Enlace y renderizar la Parte Correcta como desee.

1
Sollder1 30 oct. 2019 a las 20:26