¿Cómo puede mover controles ASP.Net a diferentes lugares en el formulario web en tiempo de ejecución?

Question

¿Existe una forma aceptada de "mover" un control.

Mi cliente desea colocar un cierto fragmento de marcado (que representa un elemento visual) en uno de varios lugares diferentes en la página. Las ubicaciones son diferentes al punto en que no puedo efectuar el cambio en CSS junto (al dejarlo flotando o algo así).

Consideré simplemente poner el control en varios puntos con el conjunto visible en "falso", y luego mostrar el que estaba en el lugar que deseaban para esa página en particular.

Sin embargo, el código para este control no es trivial; hay un par de secciones de plantilla, por ejemplo. Tener que engañar esto en múltiples lugares se volvería difícil de manejar. Además, no quiero tener que trabajar con este control estrictamente desde el código subyacente por la misma razón.

Por lo tanto, me gustaría ponerlo en un lugar en el formulario web, moverlo en función de dónde lo desee. ¿Podría poner Placeholders en diferentes lugares, tener el control en un solo lugar, luego quitar y agregarlo al lugar correcto? Sospecho que esto funcionaría.

¿Alguien tiene una idea mejor? ¿Hay una mejor práctica para esto?

Answer 1

me gustaría recomendar el uso de un control de marcador de posición, moviendo su margen de beneficio en un control de usuario independiente, a continuación, cargar esto en tiempo de ejecución y añadiéndola al marcador de posición correspondiente.

Por ejemplo.

// Load a user control 
MyControl userCtrl = (MyControl) LoadControl("~/Controls/MyControl.ascx"); 

// Or create an instance of your control 
SubclassedControl subclassedCtrl = new SubclassedControl(); 

// Do stuff with controls here 
userCtrl.LoadData(); 
subclassedCtrl.Text = "Hello World"; 

// Check which placeholder to add controls to 
PlaceHolder placeHolder = (foo=="bar") ? placeHolder1 : placeHolder2; 

// Add the controls 
placeHolder.Controls.Add(userCtrl); 
placeHolder.Controls.Add(subclassedCtrl); 

Esto evitará estorbar encima de su página con el formato innecesario, y lo carga en tiempo de ejecución también evitar confusiones innecesarias después, cuando otro desarrollador mira el código y no se puede ver de inmediato por qué es un control en un solo lugar en el marcado, pero se representa en una parte completamente diferente de la página.

Answer 2

¿Los elementos web hacen lo que quiere hacer?

O bien, puede cambiar el elemento principal programáticamente de sus controles para moverlos a un área separada.

Answer 3

Siempre puede colocar paneles en las ubicaciones predefinidas y agregar el control al panel específico en el tiempo de ejecución ... Aquí hay un ejemplo de agregar una etiqueta (la etiqueta podría reemplazarse con cualquier control).

Dim lblDisplay As Label = New Label() 
lblDisplay.ID = "myLabel" 
lblDisplay.Text = "Some Text" 
pnlDisplay.Controls.Add(lblDisplay) 

Por lo que ...

"Además, yo no quiero tener que trabajar con este control estricto de la de código subyacente por la misma razón."

Creo que vas a tener que hacer la mayor parte de tu trabajo en el código subyacente.

PS .. un buen ejemplo de la configuración de todo usercontrol se puede descargar aquí .. http://www.asp.net/downloads/starter-kits/time-tracker/

Answer 4

Puede reemplazar el método Render y colocar los controles donde quieras en el html.

Solo necesita agregar controles a la colección de controles que debe interactuar en el servidor. El resto de su HTML solo se puede escribir en la secuencia de respuesta. Si anula Render, puede crear el html de la forma que mejor le parezca, colocando los controles en cualquier orden.

A continuación se muestra un ejemplo de cómo escribir su html.

protected override void Render(HtmlTextWriter writer) 
{ 
    AddAttributesToRender(writer); 
    writer.RenderBeginTag(TagKey); 

    writer.RenderBeginTag(HtmlTextWriterTag.Div); 
    _control.RenderControl(writer); 
    writer.RenderEndTag(); 

    writer.RenderEndTag(); 
} 

Answer 5

Una alternativa (y una que he visto muchas veces) es a través de javascript y el DOM. Renderice su control dentro de una etiqueta div oculta. Por lo que haría que el contenido aquí:

<div id='rendercontent' style='display:none'> 
    .. control here .. 
</div> 

Entonces, digamos que usted quiere mover todo aquí (la etiqueta span está en el interior, porque eso es lo que vamos a reemplazar):

<div id='newlocation1'><span></span></div> 

se podría definir el siguiente JavaScript:

<script language="JavaScript"> 
function replaceNode(newElementID, targetElementID) 
{ 
    var targetElement=document.getElementById(targetElementID); 
    var newElement=document.getElementById(newElementID); 
    targetElement.replaceChild(newElement, targetElement.firstChild); 
} 
</script> 

Y cuando se desea mover el contenido a la nueva ubicación, llame a:

<script language="JavaScript"> 
replaceNode('rendercontent','newlocation1'); 
</script>