Hej. Positionen kan du ebstämma med css ge den en klass bara. Tackar! Troligtvis behöver du inte positionera dina boxar. Tackar och bockar för hjälpen. Jag kom en bit på vägen med era svar!Dynamisk ritning på webbsida.
Jag har ett projekt som jag vill konvertera från Windows Forms till Web Forms.
Det som kommer ställa till problem är att jag ritar upp en massa text-boxar dynamiskt i en panel i det ursprungliga programmet.
Någon som har bra tips på hur jag löser detta till webbsidan?
Det behöver nödvändigtvis inte vara textboxar, det viktiga är att jag har möjlighet att sätta in en "box" och samtidigt bestämma var den ska sitta på webbsidan ( x- och y-led).
Tar tacksamt emot tips!
mvh
//MartinSv: Dynamisk ritning på webbsida.
Koden borde se ut ungefär såhär:
Panel panel = new Panel();
panel.CssClass = "BoxContainer";
//Adda den till dokumentet på något sätt, vet inte exakt hur man gör det men borde inte vara svårt.
Och csskoden blir då:
<code>.BoxContainer
{
position: absolute;
left: 300px;
top: 200px;
}</code>
Där left är x-led och top är y-led.Sv:Dynamisk ritning på webbsida.
Det här ska jag kika på!
Vet du hur jag sköter detta dynamiskt? t.ex. så att jag kan ladda in 30-40 boxar och sätta olika egenskaper (x- och y-pos) på var och en?Sv: Dynamisk ritning på webbsida.
Antagligen räcker det att du låter dem lägga sig rätt själv.
Detta gör du med CSS.
Jag gissar att du ska rita ut ett formulär med textboxar och tillhörande Labels? Isåfall kan du göra så här:
(Pseudo)Markup:
=======================
<form>
<asp:Panel ... ... ID="EditControlsContainer" CssClass="inputFormContainer">
</asp:Panel>
</form>
(pseudo)Codebehind
=======================
foreach()
{
pnl = new Panel();
pnl.CssClass = "EditElement";
txt = new TextBox();
txt.CssClass = "textBox;
txt.Value = "...";
lbl = new Label();
lbl.Text = "Yada yada";
pnl.Controls.Add(lbl);
pnl.Controls.Add(txt);
EditControlsContainer.Controls.Add(pnl);
}
CSS:
==============
.inputFormContainer
{
width: 600px;
float: left;
}
.inputFormContainer .EditElement
{
width: 290px;
float: left;
margin: 0;
padding: 5px 10px 0 0;
}
.inputFormContainer .EditElement Label
{
float: left;
width: 150px;
}
.inputFormContainer .EditElement .textBox
{
float: right;
width: 120px;
}
ovanstående är ett exempel som jag inte provkört själv, men principen använder jag alltid och det funkar mkt bra. Du kan sen i efterhand justera kolumner och marginaler bara genom att ändra i CSS utan att behöva kompilera om. Eller ännu bättre: du kan be någon annan som är bra på design och css att sköta det själv utan din inblandning.
För att få rätt på designen kan du mixtra med width på de olika elementen, lättast är om du kör Firefox och laddar in tillägget Developer toolbar eller Firebug. Båda tillåter att du ändrar i CSS utan att du behöver ladda om sidan. När du fått till en snygg design så kopiera du dina ändringar och klistrar in i Visual studio.
Glöm inte att testa det även i Internet Explorer.Sv:Dynamisk ritning på webbsida.
mvh
//Martin