每日学习总结：CSS：Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题

本文链接：https://blog.csdn.net/xuemoyao/article/details/8915176

2013-5-11

1 .CSS：clear属性的用法

上周在项目中，在做对用户输入信息进行验证，如果有验证有错的话，需要显示提示信息，提示信息要显示在文本框的下边，有想过用<br/>换行，但是那样的话单元格就会变成两行，影响页面的布局，而提示信息又是动态的，如果验证通过则不显示，最后想要了用clear：both的方法来解决这样的问题.

主要代码如下：

<td  >
<asp:TextBox ID="Net_adds_5_yr" runat="server"></asp:TextBox>
 <div style="clear:both">
<asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server"  Display="Dynamic"  ErrorMessage="输入的内容必须为数字"
ControlToValidate="Net_adds_5_yr"  ValidationExpression="^\d+$">
</asp:RegularExpressionValidator>
        </div>
</td>

代码中高亮的部分就是将一个验证控件放在div的内部，然后为Div添加clear：both的style这样就可以很好的起到了换行的效果，如下图所示：

图1-1 验证提示信息自动换行显示

下面就具体的了解一下CSS中的clear属性吧。

Clear属性是为了控制float属性在文档流的物理位置。

那float属性又是什么呢？

float 属性定义元素在哪个方向浮动。这个属性多应用于图像，使文本围绕在图像周围，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

如下所示：

<div style="width:1000px;">
    <div id=’left’ style="background:green; width:100px;float:left;">I'm the left float</div>
    <div id=’right’ style="background:orange; width:100px; float:right;">I'm the right float</div>
    <div id=’nothing’ style="background:lightblue; width:300px">I don't know what happened</div>
    </div>

如果不清除浮动的话，id为nothing将会和id为left、right的div在同一行显示，如果想让它在下边一行显示就需要用到clear：both属性了。下面来看一下在未使用clear：both之前的效果和使用之后的效果：

图1-2 未使用clear：both属性时效果图

图1-3 使用clear：both属性之后的效果图

这样就不难理解添加了clear：both之后div会自动换行了吧。

下边我们再把id为nothing的div宽度变窄一些看看会有什么效果。

<div style="width:500px;">
    <div style="background:green; width:100px;float:left;">I'm the left float</div>
    <div style="background:orange; width:100px; float:right;">I'm the right float</div>
    <div style="background:lightblue; width:200px;">I don't know what happened</div>
    </div>

图1-4 id为nothing的div宽度变窄之后的效果图

为什么id为noting的div排在了最左边的呢，且有一部分和id为left的div重合了，那是因为只要有一个元素浮动，且浮动不清除时，下边其他的元素都会默认的左浮动。

如下所示：

<div style="width:600px;">
    <div style="background:green; width:160px;float:right;">I'm the left float</div>
    <div style="background:orange; width:90px; float:right;">I'm the right float</div>
    <div style="background:red; width:100px; float:right;"> Ok ,I'm by stander</div>
    <div style="background:lightblue; width:200px; ">I don't know what happened</div>
</div>

图1-5 前三个div均向右浮动第四个div不浮动效果图

然后我们再为id为nothing的div添加上clear：left属性看看有什么效果。

图1-6 id为nothing的div宽度变窄之后添加clear：left属性之后的效果图

在添加清除左浮动的属性时，id为nothing的div换到了下一行显示,类似换行的效果。

到这里为止已经向大家讲述了clear属性的三个属性值，即：left，right，both，还有一个值为none即允许两边都有浮动。

2. 若要再次显示该网页，Web浏览器需要重新发送您以前提交的信息解决办法

有时候在页面刷新的时候会出现如下图所示的情况：

图2-1 页面重复交易提示示意图

出现这样的情况的原因在于，你在父页面有过提交，即IsPostBack为true，当打开的子页面经过一些列的操作之后关闭，然需要再次刷新父页面，显示对子页面的操作效果。这个时候对页面进行刷新时相当于将原来的值再次向服务器提交，处于安全的考虑，浏览器会给出如上的提示。

下面给出一个出现这样的情况的场景：

首先有一个List页，并且有查询，当你输入一些查询筛选条件，然后点击查询，出现了你想要的那些结果，然后点击其中的一项进行编辑，这时会弹出一个编辑页，待编辑完成之后，关闭弹出的编辑页，同时刷新父页面，显示编辑改变的效果。如果只是单纯的页面刷新则会出现上边的提示框，那么该如果避免以上的情况出现呢？

大多数朋友会采取在Edit页的提交按钮中写下这样的代码：

Response.Write("<script language='javascript'>window.opener.location.href = window.opener.location.href;window.close();</script>");

即关闭edit页，同时导向父页面，但是这个时候另一个问题就出来的，你之前的查询条件都被清空了，也就是说你的List列表重新被绑定了，查询条件也没有了，这样你就没有办法马上看到你刚刚的一些编辑效果。

所以最好的解决办法就是，当子页面关闭之后，在父页面中再次的调用查询按钮的click事件，即相当于再次查询，这样就避免的页面的重复交易的提示。

图2-2 模拟的List页面示意图

在上边的页面中输入查询过滤的内容，查询出符合的条件，然后选择其中一项编辑，编辑之后，再调用查询按钮的click事件，在前台页面可以这样写：

document.getElementById("btnSearch").click();

这句代码应该是在页面的回调函数中执行的，根据各自的情况进行添加吧。

3. asp.net 显示消息提示框之后页面变乱

这种提示框出现的情形往往是在，用户登录验证失败之后、以及新增、编辑信息失败之后给用户的错误提示信息。

往往在后台会这样写：

Response.Write("<script language='javascript'>alert('新增信息失败！')</script>");

因为这样写的话页面的输出流就要发生变化在页面文档最前面写上<script>字符串，这样会使文档的声明失效，因为文档声明之前是不能有其他字符的。

只需将以上的代码改为如下代码即可，即在后台采用脚本注册的方式解决此问题。

ClientScript.RegisterStartupScript(this.GetType(),"alert","<script language='javascript'>alert('新增信息失败！');</script>",true);

4. asp.net 调用smtp服务发送邮件问题

上周项目开发中有遇到需要调用smtp服务发送邮件的需求。本来这是一个很简单的一个开发任务，但在实际开发中却遇到了很多很多的问题。下面就和大家分享一下其中遇到的问题。

先向大家展示一下一段邮件发送的测试代码：

 SmtpClient client = new SmtpClient("公司的邮件服务");
            client.Credentials = new NetworkCredential("用户", "密码"); //设置发件人的验证凭据

            client.UseDefaultCredentials = true;
            client.DeliveryMethod = SmtpDeliveryMethod.Network; //通过网络将电子邮件发送到smtp服务器
            client.EnableSsl = true; //使用安全套接字层加密连接
            MailMessage mess = new MailMessage();
            mess.From = new MailAddress("发件人邮箱", "发件人");
            mess.To.Add(new MailAddress("收件人邮箱", "收件人"));
            mess.Priority = MailPriority.High; //设置邮件优先级
            mess.BodyEncoding = Encoding.UTF8;
            mess.SubjectEncoding = Encoding.UTF8;
            mess.IsBodyHtml = true; //设置内文内容是否为html格式
            mess.Subject = "主体";
            mess.Body = "正文";
            client.Send(mess);

1) 邮箱不可用。服务器响应为:5.7.1 Unable to replay for xxx@qq.com

问题出现情况在于使用公司内部的邮件服务时，对公司内部员工发送邮件没有任何问题，

但是对其他邮箱的用户比如：qq、新浪、网易等邮箱发送邮件时会提示上边的错误。

解决方法是：将部署发送邮件程序的服务器IP 添加到邮件服务器的中继列表中。

具体的操作为：在smtp虚拟服务器中进行设置，找到默认的SMTP服务点击右键à属性à访问à中继à选择可以通过该虚拟服务器进行中继的计算机à选择仅以下列表à然后点击添加à添加你要支持发送右键的服务器的ip即可（例如本地iP：127.0.0.1也可以是其他ip）

2) smtpClient发邮件错误：不允许使用邮箱名称。服务器响应为: You are not authorized to send mail, authentication is required

出现这样的原因可能在于有些邮箱不支持调用其服务发送邮件，比如网易的最新申请的邮箱均不支持，所以大家在测试的时候最好就不要用网易的邮件服务了，那样只会浪费更多的时间。

另一个原因是有些邮件服务的验证用户名，需要为XXX@sina.com的格式，而有些邮箱比如网易的邮箱验证用户名则只需输入用户名不需要@163.com的部分

3) SMTP 服务器要求安全连接或客户端未通过身份验证。服务器响应为: Authentication required

出现这样的错误在于邮件服务连接为非安全连接，解决方法是：首先确保服务器支持安全连接，然后将服务器连接设置为安全连接，即：添加如下代码：

client.EnableSsl = true;即可

4) 服务器不支持安全连接