ASP.NET学习记录（2019.04.27）

一、RequiredFieldValidator和CompareValidator

        设计注册界面时，一般都会让用户输入两次相同的密码来保证密码的真实有效性。在ASP.NET中，我们可以通过RequiredFieldValidator和CompareValidator这两个验证控件来完成这一部分的功能。
1、RequiredFieldValidator
        RequiredFieldValidator表示“必填验证域”（或是必填验证控件），我们可以通过设置ControlToValidate属性的值来绑定用户必须填写的控件：

<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label" style="text-align: right;">用户名</asp:Label>
    <div class="col-md-10">
        <asp:TextBox runat="server" ID="UserName" CssClass="form-control" placeHolder="请输入用户名" />
        <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" InitialValue="admin"
            CssClass="text-danger" ErrorMessage="“用户名”输入有误，请重新输入。" />
    </div>
</div>

        上面这段代码是一个简单示例，ControlToValidate属性的值指向对应控件的ID，通过InitialValue属性来重置待验证控件的初始值（默认为空）。当用户输入的值与初始值一致时，系统就会认定验证未通过，页面上会显示我们在ErrorMessage中设置的信息。上方代码的效果如下：

        我们可以将RequiredFieldValidator指向密码输入框以确保关键输入不为空（前提是你没修改InitialValue的值），但对输入进行更进一步的验证还需要其他的操作。
2、CompareValidator
        CompareValidator表示“比较验证域”，它能将两个组件的值进行比较，并将验证结果体现在待验证组件上。在这里有两个关键属性我必须要提一下，一个是ControlToCompare，它表示“将要与待验证组件进行比较的组件”，你可以将它理解成“请输入密码”；另一个是ControlToValidate，它表示“将要进行验证的组件”，也就是待验证组件，你可以理解成“请再次输入密码”。举个例子，如果我们要确认输入域A和输入域B的值是否一致，我们可以将ControlToCompare的值指向A，将ControlToValidate的值指向B，在ErrorMessage中写入错误提示，剩下的工作就交给系统就好。下面是一个确认密码的案例：

<div class="form-group">
   <asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label" style="text-align: right;">密码</asp:Label>
    <div class="col-md-10">
        <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
        <asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
            CssClass="text-danger" ErrorMessage="“密码”字段是必填字段。" />
    </div>
</div>
<div class="form-group">
    <asp:Label runat="server" AssociatedControlID="ConfirmPassword" CssClass="col-md-2 control-label" style="text-align: right;">确认密码</asp:Label>
    <div class="col-md-10">
        <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" />
        <asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
            CssClass="text-danger" Display="Dynamic" ErrorMessage="“确认密码”字段是必填字段。" />
        <asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
            CssClass="text-danger" Display="Dynamic" ErrorMessage="密码和确认密码不匹配。" />
    </div>
</div>

        效果如下：

        这是个很实用的功能，我们应该大力用起来。

二、runat = “server”

        runat属性可以作用在aspx文件中的任何一个控件上，它表示该控件“可以运行在服务器上”，当你为某一个控件添加了runat属性并赋值为“server”时，你就可以在cs文件中直接使用它。比如你有一个ID为“input”的文本控件，你可以在对应的aspx.cs中以input.XXX的方式来使用它，如果没有这条属性，你将不能这么做。
        有鉴于网络上说这个属性对性能几乎没有什么影响，为了方便cs文件使用，我觉得还是有必要在关键控件上都加上这玩意儿的（VS也确实这么做了）。

三、使用表单设计登录/注册界面的思路

        VS的ASP.NET项目默认使用了Bootstrap框架，和一堆asp标签混在一起用，刚看到那一大段代码的时候我当场就想换方向了，但还好坚持下来了。可能是为了增强标签的语义，.NET有属于自己风格的一套标签，其中多数标签的名字和C#的图形组件名字一致，尽管在aspx中也可以使用html标签，但为了入乡随俗，还是把风格转换过来为妙。借助巨硬提供的参考案例，我整理了一下用表单设计登录/注册界面的思路：

        上面是一个简单的例子，每一个蓝色区域都是一个div，巨硬为了让代码拥有更好的可读性和可维护性，使用了大量的div对代码进行划分，这一思路也同样应用到了注册页面中。

• 使用div将整个表单包裹起来，用class .form或者是class .form-horizontal对该div进行修饰。
• 使用class .form-group修饰每一个子块元素，使子块具有鲜明的功能特征，比如第一块负责收集用户名信息，第二块负责收集密码等等。
• 对每个Label都使用class .control-label进行修饰。
• 对每个input元素都使用class .form-control进行修饰。

        这里的input元素说的是TextBox之类的，对Button有独有的class .btn-default样式可以进行修饰。在最后，我们通过<asp:Button>的OnClick属性调用aspx.cs里的方法执行注册或登录操作。至此，一个简单的注册/登录界面就安排上了。

四、关于Bootstrap的用法

        Bootstrap的特色就在于它使用了一套被称之为“响应式网格系统”的规则来控制控件的位置，随着屏幕或视口（viewport）尺寸的增加，系统会自动将页面分为最多12列。如果一个div没有被另一个显式的声明为“row”的div包围，则该div会将会和其他的元素混在一起。
这是正常的效果：
这是异常的效果：