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

ASP.NET:就是喜欢Web Form,就是喜欢拖控件(一)
ASP.NET:就是喜欢Web Form,就是喜欢拖控件(二)
ASP.NET:就是喜欢Web Form,就是喜欢拖控件(三)
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来改变样式:

 

    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的代码:

 

<asp:Image ID="Image" runat="server" 
                        ImageUrl
='<%# Eval("id", "\\CommodityImage.aspx?id={0}") %>' />

 

 

改写为: 

<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来做了:

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

 

 

然后在header里面写好script:

function OnImageReady(e) { 
    
if (this.readyState == 'complete') { 
        
if (this.height < 100 && this.width < 100return
        
if (this.width > this.height) { 
            
this.height = Math.floor(this.height * 100 / this.width); 
            
this.width = 100
        } 
        
else { 
            
this.width = Math.floor(this.width * 100 / this.height); 
            
this.height = 100
        } 
    } 
}

 

 

这算法眼熟吗?请看http://www.cnblogs.com/JeffreyZhao/archive/2009/11/24/precision-of-float-point-calculation.html,这里正是一个简化了的JS版。

这样我们的Grid就顺眼多了:

image

不过相比起来,FormView可真丑。而且没人会把这样的插入表单放到界面上的吧。所以我们要把FormView美化一下。首先我们来看看默认的模板:

<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource" 
    DefaultMode
="Insert"> 
    
<InsertItemTemplate> 
        name: 
        
<asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' /> 
        
<br /> 
        company_id: 
        
<asp:DropDownList ID="DropDownList1" runat="server" 
            DataSourceID
="CompanyDataSource" DataTextField="name" DataValueField="id" 
            SelectedIndex
='<%# Bind("company_id") %>'> 
        
</asp:DropDownList> 
        
<br /> 
        image:
<asp:FileUpload ID="imageFileUpload" runat="server" FileBytes='<%# Bind("image") %>'/> 
        
<br /> 
        
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
            CommandName
="Insert" Text="Insert" /> 
        
&nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" 
            CausesValidation
="False" CommandName="Cancel" Text="Cancel" /> 
    
</InsertItemTemplate> 
</asp:FormView>

 

 

我们保持绑定的数据控件不变,稍微调整一下结构:

<asp:FormView ID="FormView1"  runat="server" DataSourceID="SqlDataSource" 
    DefaultMode
="Insert"> 
    
<InsertItemTemplate> 
        
<span class="form_item_name">name:</span> <asp:TextBox CssClass="form_item_input" ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' /> <br /> 
        
<span class="form_item_name">company:</span> <asp:DropDownList CssClass="form_item_input"  ID="DropDownList2" runat="server" 
            DataSourceID
="CompanyDataSource" DataTextField="name" DataValueField="id" 
            SelectedIndex
='<%# Bind("company_id") %>' /> <br /> 
        
<span class="form_item_name">image:</span> <asp:FileUpload CssClass="form_item_input" ID="imageFileUpload" runat="server" FileBytes='<%# Bind("image") %>'/> <br /> 
        
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
            CommandName
="Insert" Text="Insert" /> 
    
</InsertItemTemplate> 
</asp:FormView>

 

 

再配合CSS: 

 

    .form_item_name 
    
{ 
        display
:inline-block; 
        width
:100px; 
        height
:25px; 
        line-height
:25px; 
        border
:solid 1px Gray; 
        background
:#cccccc; 
        text-align
:left; 
    
} 
    .form_item_input 
    
{ 
        display
:inline-block; 
        width
:230px; 
        height
:25px; 
        line-height
:25px; 
        border
:solid 1px Gray; 
        background
:#cccccc; 
        text-align
:left; 
    
} 
    .Form 
    
{ 
        background
:#eeeeee; 
        text-align
:center; 
        border
:solid 1px Gray; 
    
}

 

效果看起来还好吧,当然我这里只是一个例子,各位高手可以尽情发挥CSS才能,多多美化视觉效果并且兼容浏览器:
image

posted @ 2009-12-15 00:36  winter-cn  阅读(...)  评论(... 编辑 收藏