Существует ли стандартный способ размещения форм в ASP.Net? - PullRequest
Новая
       11

Существует ли стандартный способ размещения форм в ASP.Net?

1 голос
/ 23 января 2010

Вот мой макет формы: 

    <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 голос
/ 23 января 2010

Чтобы расширить ответ Криси. 

<div style="width=150">Usuario:</div>
<asp:TextBox id="txtUserName" runat="server" />

... 

<div style="width=150">Contrasena:</div>
<asp:TextBox id="txtPassword" runat="server" />
0 голосов
/ 08 марта 2012

Нет необходимости в дополнительных <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;
}​
0 голосов
/ 23 января 2010

Как насчет заполнения их, чтобы они не были вместе? Конечно, вы можете захотеть создать класс css вместо атрибута style, но вы получите точку.

Что касается стандарта ASP.NET, просто используйте хороший стандартный CSS. В ASP.NET нет ничего принципиально отличного от любого другого языка веб-программирования. 

<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>
0 голосов
/ 23 января 2010

Я бы попробовал использовать шаблон или генератор форм. Отличная отправная точка для решений:

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

: -)

0 голосов
/ 23 января 2010

оберните ваши метки в div с классом. Затем установите минимальную ширину класса меток так, чтобы он был настолько широким, насколько вам нужно, тогда все ваши поля / метки будут выровнены.

...