Come è possibile spostare i controlli ASP.Net in diverse posizioni sul modulo Web in fase di runtime?

Question

Esiste un modo accettato di "spostare" un controllo.

Il mio cliente desidera posizionare un determinato frammento di markup (che rappresenta un elemento visivo) in uno dei diversi punti della pagina. Le posizioni sono diverse dal punto in cui non posso effettuare il cambiamento sul CSS (fluttandolo o qualcosa del genere).

Ho considerato di mettere il controllo in più punti con Visible impostato su "false", quindi di visualizzare quello nel posto desiderato per quella particolare pagina.

Tuttavia, il codice per questo controllo non è banale: ad esempio, vi sono un paio di sezioni del modello. Doversi ingannare in più punti sarebbe ingombrante. Inoltre, non voglio dover lavorare con questo controllo rigorosamente dal code-behind per lo stesso motivo.

Quindi, mi piacerebbe metterlo in un posto sul modulo Web, spostarlo in base a dove lo voglio. Posso inserire segnaposto in punti diversi, avere il controllo in un punto, quindi rimuoverlo e aggiungerlo nel punto giusto? Sospetto che questo funzionerebbe.

Qualcuno ha un'idea migliore? C'è una buona pratica per questo?

Answer 1

Mi consiglia di utilizzare un controllo di segnaposto, spostare il markup in un controllo utente separato, quindi il caricamento di questo in fase di esecuzione e aggiungendolo al segnaposto rilevanti.

Es.

// 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); 

Ciò eviterà ingombrare la pagina con i markup inutili, e il caricamento in fase di esecuzione sarà anche evitare inutile confusione più tardi, quando un altro sviluppatore guarda il codice e non può vedere immediatamente il motivo per cui un controllo è in un unico luogo nel markup, ma esegue il rendering su una parte completamente diversa della pagina.

Answer 2

Le web part fanno ciò che si desidera fare?

Oppure, è possibile modificare il genitore a livello di programmazione dei controlli per spostarli in un'area separata.

Answer 3

È sempre possibile inserire i pannelli nelle posizioni predefinite e aggiungere il controllo al pannello specifico in fase di esecuzione. Ecco un esempio di aggiunta di un'etichetta (l'etichetta può essere sostituita con qualsiasi controllo).

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

Per quanto riguarda ...

"Inoltre, io non voglio avere a lavorare con questo controllo rigorosamente dal code-behind per la stessa ragione."

Penso che dovrai fare gran parte del tuo lavoro nel codice.

PS .. un buon esempio di tutta la configurazione UserControl può essere scaricato qui .. http://www.asp.net/downloads/starter-kits/time-tracker/

Answer 4

È possibile ignorare il metodo Render e posizionare i controlli dove vuoi nel codice HTML.

È sufficiente aggiungere controlli alla raccolta Controls che deve interagire sul server. Il resto del tuo HTML può essere scritto nel flusso di risposta. Se si esegue l'override di Render, è possibile creare l'html come meglio credi, posizionando i controlli in qualsiasi ordine.

Di seguito è riportato un esempio di come scrivere il proprio 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

Un'alternativa (e una che ho visto fare molte volte prima) è tramite javascript e il DOM. Rendi il tuo controllo all'interno di un tag div nascosto. Così si avrebbe rendere il contenuto qui:

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

Quindi, diciamo che si voleva spostare tutto qui (il tag span è dentro perché è quello che stiamo andando a sostituire):

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

si potrebbe definire quanto segue javascript:

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

E quando si desidera spostare il contenuto nella nuova posizione, chiamare:

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