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来显示数据。然而客户是绝对无法接受一个如此张牙舞爪、如此粗犷的页面的：（尽管从技术角度，这个页面已经具有一定功能性了……）

首先，第一个问题是表格长宽、大小不一。我们可以通过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  <   100 )  return ; 
         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就顺眼多了：

不过相比起来，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才能，多多美化视觉效果并且兼容浏览器：