Web窗体文本字段不是直接在ASP Identity Register页面上 [英] Web Form Text Fields Not straight on ASP Identity Register page

问题描述

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

I'm having a problem with text fields not aligning properly in a Web Forms project. I created a New ASP.NET Web Application using Web Forms in Visual Studio 2013. I made a change to the ASP Identity user table to take additional information about each user. (Address, City State, Zip, Phone, Fax & Email) I then went into the Account Signup Register.aspx page and copied the first field User Name so that I would be using all the same bootstrap class names for each field etc.. and created several copies of it and renamed each one and have had no problem capturing that new information on the Register page.

但是

渲染的页面被顶起.我添加的每个新字段均未对齐.看到这里:

The rendered page is jacked up. Each new field I added is misaligned. See Here:

因此，现在我将向您展示该页面的代码.

So now I will show you what my code looks like for that page.

已更新为显示错误
在此代码页的结尾附近，在按钮分割之前立即查看评论

    <%@ 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>

抱歉，我知道很多代码:但是我想确保没有遗漏任何东西，所以我发布了整个页面.

SORRY I KNOW THAT IS A LOT OF CODE: But I wanted to make sure I didn't leave anything out so I posted the entire page.

此外，这是Visual Studio中设计视图"的屏幕快照.

Also, here is a screen shot of the Design View in Visual Studio.

我了解，您可以清楚地看到设计视图中每个文本字段的位置和大小有所不同，但是我只触及了代码.在其他地方是否有文件可以跟踪设计视图中其他可能影响页面最终结果的其他类型的格式.我以前曾经使用过Web表单，但从来不记得遇到这种类型的问题.

I understand, you can clearly see something is different about the placement and size of each text field in the design view, But I only touched the code. Is there a file somewhere else that maybe keeps track of some other type of formatting from the design view that may effect the final result on the page. I have used web forms before and never remember having this type of problem.

任何帮助或想法都将不胜感激.从功能上讲，它可以工作，但从美学上讲，它是胡扯，我无法弄清楚.

Any help or ideas would be so much appreciated. Functionally it works, but aesthetically it's crap and I can't figure it out.

推荐答案

           <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或格式不正确所致.

The missing div is causing your css to be off. Usually when you have an alignment issue it is due to css or improper formatting.

这篇关于Web窗体文本字段不是直接在ASP Identity Register页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！