ASP.NET----实现动态投票增长显示功能

动态点击增加票数颜色条发生变化：

效果：

后台代码：

  
    

   
     using
   
      System;

   
     using
   
      System.Configuration;

   
     using
   
      System.Data;

   
     using
   
      System.Linq;

   
     using
   
      System.Web;

   
     using
   
      System.Web.Security;

   
     using
   
      System.Web.UI;

   
     using
   
      System.Web.UI.HtmlControls;

   
     using
   
      System.Web.UI.WebControls;

   
     using
   
      System.Web.UI.WebControls.WebParts;

   
     using
   
      System.Xml.Linq;


   
     public
   
      
   
     partial
   
      
   
     class
   
      _Default : System.Web.UI.Page 
{
 
   
     //
   
     红色Label的宽度
   
     

   
      
   
     protected
   
      
   
     static
   
      
   
     int
   
      vote1
   
     =
   
     100
   
     ;
 
   
     //
   
     蓝色Label的宽度
   
     

   
      
   
     protected
   
      
   
     static
   
      
   
     int
   
      vote2
   
     =
   
     100
   
     ;
 
   
     //
   
     黄色Label的宽度
   
     

   
      
   
     protected
   
      
   
     static
   
      
   
     int
   
      vote3
   
     =
   
     100
   
     ;
 
   
     //
   
     投票数的数组 
 
   
     //
   
     数据的第一个元素即红色投票数
 
   
     //
   
     第二个为蓝色投票数
 
   
     //
   
     第三个为黄色投票数
   
     

   
      
   
     protected
   
      
   
     static
   
      
   
     int
   
     [] voteCounts
   
     =
   
     new
   
      
   
     int
   
     [
   
     3
   
     ];

 
   
     protected
   
      
   
     void
   
      Page_Load(
   
     object
   
      sender, EventArgs e)
 {
 
   
     if
   
      (
   
     !
   
     this
   
     .IsPostBack)
 {
 
   
     //
   
     由于所有的静态变量都已经具有初始值 直接绑定数据
   
     

   
      
   
     this
   
     .DataBind();
 }
 }
 
 
   
     //
   
     红色Label后的按钮
   
     

   
      
   
     protected
   
      
   
     void
   
      btnVote1_Click(
   
     object
   
      sender, EventArgs e)
 {
 
   
     //
   
     使红色Label变宽 15个像素
   
     

   
      vote1
   
     +=
   
     15
   
     ;
 
   
     //
   
     红色投票数增加1
   
     

   
      voteCounts[
   
     0
   
     ] 
   
     +=
   
      
   
     1
   
     ;
 
   
     //
   
     重新绑定
   
     

   
      
   
     this
   
     .DataBind();
 }

 
   
     //
   
     蓝色Label后的按钮
   
     

   
      
   
     protected
   
      
   
     void
   
      btnVot2_Click(
   
     object
   
      sender, EventArgs e)
 {
 
   
     //
   
     使蓝色Label变宽 15个像素
   
     

   
      vote2 
   
     +=
   
      
   
     15
   
     ;
 
   
     //
   
     蓝色投票数增加1
   
     

   
      voteCounts[
   
     1
   
     ] 
   
     +=
   
     1
   
     ;
 
   
     //
   
     重新绑定
   
     

   
      
   
     this
   
     .DataBind();
 }

 
   
     //
   
     黄色Label后的按钮
   
     

   
      
   
     protected
   
      
   
     void
   
      btnVot3_Click(
   
     object
   
      sender, EventArgs e)
 {
 
   
     //
   
     使黄色Label变宽 15个像素
   
     

   
      vote3 
   
     +=
   
      
   
     15
   
     ;
 
   
     //
   
     黄色投票数增加1
   
     

   
      voteCounts[
   
     2
   
     ] 
   
     +=
   
      
   
     1
   
     ;
 
   
     //
   
     重新绑定
   
     

   
      
   
     this
   
     .DataBind();
 }

}
  
    

前台html：

  
    

   
     <
   
     body
   
     >
   
     
 
   
     <
   
     form 
   
     id
   
     ="form1"
   
      runat
   
     ="server"
   
     >
   
     
 
   
     <
   
     div
   
     >
   
     
 你觉得瘦肉精对你的生活影响大吗？
   
     <
   
     br 
   
     />
   
     
 红色：非常严重。
   
     <
   
     br 
   
     />
   
     
 蓝色：一般，影响不大。
   
     <
   
     br 
   
     />
   
     
 黄色：基本无影响。
   
     <
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定红色Label的宽度
   
     -->
   
     
 
   
     <
   
     asp:Label 
   
     runat
   
     ="server"
   
      ID
   
     ="lblLong"
   
      BackColor
   
     ="red"
   
      Width
   
     ='<%# 
   
     vote1 %
   
     >
   
     '>
   
     </
   
     asp:Label
   
     >
   
     
 
   
     <
   
     asp:Button 
   
     runat
   
     ="server"
   
      ID
   
     ="btnVote1"
   
      Text
   
     ="投票"
   
      Height
   
     ="21px"
   
      OnClick
   
     ="btnVote1_Click"
   
      
   
     /><
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定选择红色的票数
   
     -->
   
     
 票数：
   
     <%
   
     =
   
     voteCounts[
   
     0
   
     ] 
   
     %>
   
     <
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定蓝色Label的宽度
   
     -->
   
     
 
   
     <
   
     asp:Label 
   
     runat
   
     ="server"
   
      ID
   
     ="lblNomal"
   
      BackColor
   
     ="blue"
   
      Width
   
     ='<%# 
   
     vote2 %
   
     >
   
     '>
   
     </
   
     asp:Label
   
     >
   
     
 
   
     <
   
     asp:Button 
   
     runat
   
     ="server"
   
      ID
   
     ="btnVot2"
   
      Text
   
     ="投票"
   
      Height
   
     ="22px"
   
      OnClick
   
     ="btnVot2_Click"
   
      
   
     /><
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定选择蓝色的票数
   
     -->
   
     
 票数：
   
     <%
   
     =
   
     voteCounts[
   
     1
   
     ] 
   
     %>
   
     <
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定黄色Label的宽度
   
     -->
   
     
 
   
     <
   
     asp:Label 
   
     runat
   
     ="server"
   
      ID
   
     ="lblNothing"
   
      BackColor
   
     ="yellow"
   
      Width
   
     ='<%# 
   
     vote3 %
   
     >
   
     '>
   
     </
   
     asp:Label
   
     >
   
     
 
   
     <
   
     asp:Button 
   
     runat
   
     ="server"
   
      ID
   
     ="btnVot3"
   
      Text
   
     ="投票"
   
      Height
   
     ="22px"
   
      OnClick
   
     ="btnVot3_Click"
   
      
   
     /><
   
     br 
   
     />
   
     
 
   
     <!--
   
     绑定选择黄色的票数
   
     -->
   
     
 票数：
   
     <%
   
     =
   
     voteCounts[
   
     2
   
     ] 
   
     %>
   
     <
   
     br 
   
     />
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     form
   
     >
   
     

   
     </
   
     body
   
     >