WebForm复杂控件 - 绯色梧桐绯色月

WebForm复杂控件

Calendar 日历；

FileUpdate 文件上传；

Image 图片，可以直接给URL；

Repeater：

HeaderTemplate - 在加载开始执行一遍

ItemTemplate - 有多少条数据，执行多少遍

FooterTemplate - 在加载最后执行一遍

AlternatingItemTemplate - 交替项模板

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="lianxi.aspx.cs" Inherits="lianxi" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9 </head>
10 <body>
11     <form id="form1" runat="server">
12         <asp:Repeater ID="Repeater1" runat="server">
13             <HeaderTemplate>
14                 <table style="background-color:navy;text-align:center">
15                     <tr style="color:white;padding:10px;">
16                         <td>UserName</td>
17                         <td>PsssWord</td>
18                         <td>NickName</td>
19                         <td>Sex</td>
20                         <td>Birthday</td>
21                         <td>Nation</td>
22                     </tr>
23              </HeaderTemplate>
24             <ItemTemplate>
25                 <tr style="background-color:yellow">
26                     <td><%#Eval("UserName")%></td>
27                     <td><%#Eval("PassWord")%></td>
28                      <td><%#Eval("NickName")%></td>
29                     <td><%#Eval("Sex")%></td>
30                      <td><%#Eval("birthday")%></td>
31                     <td><%#Eval("Nation")%></td>
32                 </tr>
33             </ItemTemplate>
34             <FooterTemplate>
35               </table>
36             </FooterTemplate>            
37         </asp:Repeater>
38         
39 
40 
41 
42     </form>
43 </body>
44 </html>

1  protected void Page_Load(object sender, EventArgs e)
2     {
3         if (!IsPostBack)
4         {
5             Repeater1.DataSource = new UsersDA().Select();
6             Repeater1.DataBind();
7         }
8     }

库存预警：
通过某个属性值判断后，将某条数据的样式进行更改

属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式

 1  /// <summary>
 2     /// 性别
 3     /// </summary>
 4     public bool Sex
 5     {
 6         get { return _Sex; }
 7         set { _Sex = value; }
 8     }
 9 
10     public string SexStr
11     {
12         get { return _Sex ? "男" : "女"; }
13     }
14 
15 
16     private DateTime _Birthday;
17 
18     /// <summary>
19     /// 生日
20     /// </summary>
21     public DateTime Birthday
22     {
23         get { return _Birthday; }
24         set { _Birthday = value; }
25     }
26 
27     public string BirthdayStr
28     {
29         get { return _Birthday.ToString("yyyy年MM月dd日"); }
30     }
31 
32 
33     private string _Nation;
34 
35     /// <summary>
36     /// 民族
37     /// </summary>
38     public string Nation
39     {
40         get { return _Nation; }
41         set { _Nation = value; }
42     }
43 
44     public string NationName
45     {
46         get { return new NationData().Select(this._Nation).NationName; }
47 
48     }
49 
50     public string Age
51     {
52         get { return (DateTime.Now.Year - this._Birthday.Year).ToString(); }
53     }
54 
55     public string Red
56     {
57         get
58         {
59             string end = "";
60             if (Convert.ToInt32(Age) >= 16)
61             {
62                 end = "background-color:red;";
63             }
64             return end;
65         }
66     }

为了让大家知道，属性值不一定非得是展示用

光棒效果：

 1     <script type="text/javascript">
 2         window.onload = function () {
 3             var items = document.getElementsByClassName("tr_Item");
 4             var oldColor = "";
 5             for (var i = 0; i < items.length; i++) {
 6                 items[i].onmouseover = function () {
 7                     oldColor = this.style.backgroundColor;
 8                     this.style.backgroundColor = "yellow";
 9                 };
10                 items[i].onmouseout = function () {
11                     this.style.backgroundColor = oldColor;
12                 };
13             }
14         };
15     </script>

posted on 2016-09-22 16:55 绯色梧桐绯色月阅读(344) 评论(0) 编辑收藏举报

刷新页面返回顶部