ASP.Net中是否存在用於表單布局的標准方法？
[英]Is there a standard way for form layout in ASP.Net?
問題描述
這是我的表單布局：
<body>
<p>Note that this form doesn't actually do anything
except illustrate the Required Field Validator.</p>
<form id="frmValidator" method="post" runat="server">
Usuario:
<asp:TextBox id="txtUserName" runat="server" />
<asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />
<br />
Contrasena:
<asp:TextBox id="txtPassword" runat="server" />
<asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>Hint: Try submitting it before you enter something.</p>
</body>
這是一個簡單的布局，僅用於學習目的，但它們的對齊方式很差。 他們只是在一起。
有人建議我只是使用“空格”鍵在它們之間創建空格，但這根本無法對齊它們。 它們永遠無法正確對齊。
有人說使用表，但我討厭使用表進行布局的想法。
如何在這兩個領域之間實現簡單的組織風格？
5 個解決方案
解決方案1
1 已采納 2010-01-23 17:04:17
擴展Creasey的答案。
<div style="width=150">Usuario:</div>
<asp:TextBox id="txtUserName" runat="server" />
...
<div style="width=150">Contrasena:</div>
<asp:TextBox id="txtPassword" runat="server" />
解決方案2
0 2010-01-23 16:33:20
用一個類將標簽包裝在div中。 然后將標簽類的最小寬度設置為所需的寬度，然后所有字段/標簽將對齊。
解決方案3
0 2010-01-23 16:36:36
如何填充它們以免它們被一起弄臟？ 當然，您可能想創建一個css類而不是style屬性，但是您明白了。
至於ASP.NET的標准，只需使用良好的標准CSS。 ASP.NET與其他任何Web編程語言沒有本質上的不同。
<form id="frmValidator" method="post" runat="server">
<div style="padding:5px;">
Usuario:
<asp:TextBox id="txtUserName" runat="server" />
<asp:RequiredFieldValidator id="userNameValidator" ControlToValidate="txtUserName" ErrorMessage='<img src="../Images/no.png">' runat="server" />
</div>
<div style="padding:5px;">
Contrasena:
<asp:TextBox id="txtPassword" runat="server" />
<asp:RequiredFieldValidator id="passwordValidator" ControlToValidate="txtPassword" ErrorMessage='<img src="../Images/no.png">' runat="server" />
</div>
<div style="padding:5px;">
<asp:button id="btnSubmit" text="Submit" runat="server" />
</div>
</form>
解決方案4
0
我會嘗試使用模板或表單生成器。 解決方案的一個很好的起點是：
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
:-)
解決方案5
0 2012-03-08 16:55:06
不需要多余的<div> － CSS就是這樣！
這是一個使用ASP呈現為HTML的基本示例： http : //jsfiddle.net/qWcpN/
如果您不想看鏈接，那么這里是代碼。
HTML：
<asp:Label runat="server" AssociatedControlID="txtUserName" Text="Username" />
<asp:TextBox runat="server" id="txtUserName" />
<asp:RequiredFieldValidator runat="server" id="userNameValidator" CssClass="formError" ControlToValidate="txtUserName" ErrorMessage='Username is required!' />
<asp:Label runat="server" AssociatedControlID="txtPassword" Text="Password" />
<asp:TextBox runat="server" id="txtPassword" />
<asp:RequiredFieldValidator runat="server" id="passwordValidator" CssClass="formError" ControlToValidate="txtPassword" ErrorMessage='Password is required!' />
<asp:Button runat="server" id="btnSubmit" text="Submit" />
CSS：
label{
display:block;
font-weight:bold;
margin-bottom:2px;
}
input[type='text'],
input[type='password']{
display:block;
margin-bottom:10px;
padding:3px;
}
button,
input[type='button'],
input[type='submit']{
padding:5px;
}
.formError{
background:#F00;
color:#FFF;
display:block;
font-weight:bold;
margin-bottom:10px;
max-width:300px;
padding:3px;
}
ASP.NET局部視圖（如果已加載布局），否則使用默認視圖的標准視圖
[英]ASP.NET Partial View if Layout is already loaded, else Standard View with default Layout
在標准ASP.NET Web窗體控件上添加/刪除其他CSS類的簡單方法
[英]Simple way to add/remove an additional CSS class on a standard ASP.NET web-forms control
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.