Web表单文本字段不在ASP身份注册页面上

时间:2014-01-19 06:48:15

标签: asp.net twitter-bootstrap webforms visual-studio-2013 textfield

我遇到的问题是文本字段在Web窗体项目中没有正确对齐。我在Visual Studio 2013中使用Web窗体创建了一个新的ASP.NET Web应用程序。我对ASP Identity用户表进行了更改,以获取有关每个用户的其他信息。 (地址,城市状态,邮编,电话,传真和电子邮件)然后我进入了帐户注册Register.aspx页面并复制了第一个字段User Name,以便我将使用所有相同的引导程序类名称对于每个字段等..并创建它的几个副本并重命名每个,并且在注册页面上捕获新信息没有问题。

无论其

渲染的页面被抬起。我添加的每个新字段都是错位的。见这里:

enter image description here

现在我将向您展示我的代码对于该页面的样子。

更新显示错误
在关键代码页末尾的按钮DIV之前查看评论

    <%@ Page Title="Register" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WFK5.Account.Register" %>

    <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
        <h2><%: Title %>.</h2>
        <p class="text-danger">
            <asp:Literal runat="server" ID="ErrorMessage" />
        </p>

        <div class="form-horizontal">
            <h4>Create a new account.</h4>
            <hr />
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="text-danger" />
            <div class="form-group">
                <asp:Label ID="Label1" runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label">User name</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName"
                        CssClass="text-danger" ErrorMessage="The user name field is required." />
                </div>
            </div>
            <div class="form-group">
                <asp:Label ID="Label2" runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">Password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Password"
                        CssClass="text-danger" ErrorMessage="The password field is required." />
                </div>
            </div>
            <div class="form-group">
                <asp:Label ID="Label3" runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                </div>
            <div class="form-group">
                <asp:Label ID="Label4" runat="server" AssociatedControlID="Address" CssClass="col-md-2 control-label">Address</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Address" CssClass="form-control" />
                </div>
            </div>

            <div class="form-group">
                <asp:Label ID="Label5" runat="server" AssociatedControlID="City" CssClass="col-md-2 control-label">City</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="City" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label6" runat="server" AssociatedControlID="State" CssClass="col-md-2 control-label">State</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="State" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label7" runat="server" AssociatedControlID="Zip" CssClass="col-md-2 control-label">Zip</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Zip" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label8" runat="server" AssociatedControlID="Phone" CssClass="col-md-2 control-label">Phone</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Phone" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Phone"
                        CssClass="text-danger" ErrorMessage="The Phone field is required." />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label9" runat="server" AssociatedControlID="Fax" CssClass="col-md-2 control-label">Fax</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Fax" CssClass="form-control" />
                </div>
            </div>

           <div class="form-group">
                <asp:Label ID="Label10" runat="server" AssociatedControlID="Email" CssClass="col-md-2 control-label">Email</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Email" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="Email"
                        CssClass="text-danger" ErrorMessage="The Email field is required." />
                </div>
            </div>


            </div> <!--THIS DIV SHOULD HAVE BEEN THE CLOSING DIV FOR THE PASS CONF FIELD -->
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <asp:Button ID="Button1" runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-default" />
                </div>
            </div>
        </div>
    </asp:Content>

抱歉,我知道有很多代码: 但是我想确保我没有留下任何东西,所以我发布了整个页面。

此外,这是Visual Studio中的设计视图的屏幕截图。

enter image description here

据我所知,您可以清楚地看到设计视图中每个文本字段的位置和大小有所不同,但我只触及了代码。是否有其他位置的文件可能会从设计视图中跟踪可能影响页面最终结果的其他类型的格式。我之前使用过Web表单,但从来没有记住过这类问题。

任何帮助或想法都会非常感激。在功能上它是有效的,但在美学上它是废话,我无法弄明白。

1 个答案:

答案 0 :(得分:2)

           <div class="form-group">
                <asp:Label ID="Label3" runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label">Confirm password</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
                        CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
                </div>
</div>------------------------Missing This Closing Div----------------------
<div class="form-group">
                <asp:Label ID="Label4" runat="server" AssociatedControlID="Address" CssClass="col-md-2 control-label">Address</asp:Label>
                <div class="col-md-10">
                    <asp:TextBox runat="server" ID="Address" CssClass="form-control" />
                </div>
            </div>

丢失的div导致你的css关闭。通常当你有对齐问题时,这是由于CSS或格式不正确。