软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP.NET > ASP.NET就是喜欢Web Form 就是喜欢拖控件(四)

ASP.NET就是喜欢Web Form 就是喜欢拖控件(四)

到上一篇ASP.NET:就是喜欢Web Form,就是喜欢拖控件(三)为止,我们有了一个功能比较完善表单来插入数据,以及比较方便GridView来显示数据。然而客户是绝对无法接受一个如此张牙舞爪、如此粗犷的页面的:(尽管从技术角度,这个页面已经具有一定功能性了……)

image

首先,第一个问题是表格长宽、大小不一。我们可以通过CSS来解决:

首先我们要给GridView添加一个客户端CSS类,以便我们在CSS中使用,添加属性:CssClass="commodity_data"

图片单元格比较特殊,我们给它加上两个客户端CSS类:HeaderStyle-CssClass="image" ItemStyle-CssClass="image"

然后我们用CSS来改变样式:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
table.commodity_data
{
width:100%;
}
table.commodity_data tr th
{
width:15em;
background-color:Gray;
}
table.commodity_data tr td
{
width:15em;
text-align:center;
}
table.commodity_data tr td.image
{
width:auto;
}
table.commodity_data tr th.image
{
width:auto;
}

下面的样式加入之后,页面看起来舒服多了。不过大小不一的图片还是影响视觉效果,所以我们要处理一下,使用JavaScript把它们缩放到合适的大小。我们希望把长宽都限制在100x100之内,并保持长宽比。我们首先要用一个100x100的容器把图片限制住,改写img的代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<asp:Image ID="Image" runat="server"
ImageUrl='<%# Eval("id", "\\CommodityImage.aspx?id={0}") %>' />

改写为:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<div style="text-align:center; line-height:100px; font-size:12px; height:100px;width:100px;overflow:hidden;">
<asp:Image ID="Image" onreadystatechange="OnImageReady.apply(this,arguments);" runat="server"
ImageUrl='<%# Eval("id", "\\CommodityImage.aspx?id={0}") %>' />
</div>

现在图片大小被限制了,不过是剪切的这看起来很不爽。这时候我们需要JavaScript来做了:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<div style="text-align:center; line-height:100px; font-size:12px; height:100px;width:100px;overflow:hidden;">
<asp:Image ID="Image" onreadystatechange="OnImageReady.apply(this,arguments);" runat="server"
ImageUrl='<%# Eval("id", "\\CommodityImage.aspx?id={0}") %>' />
</div>

相关阅读
网友评论
栏目导航
推荐软件