[ASP.net WebForm]「這篇文章讓你覺得?」Yahoo奇摩投票圖表功能實作

[ASP.net WebForm]「這篇文章讓你覺得?」Yahoo奇摩投票圖表功能實作

以這篇文章當示範:轉貼:睡前的十五分鐘抬腳

 

image

image

 

 

這網頁的CSS總共15萬行左右,經過好朋友IE9開發者工具的刪刪減減,現在已留下這些CSS


{
    background: white;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: rgb(51, 51, 51);
    font-family: "Arial" , "MingLiU" , "PMingLiU";
    font-size: 79%;
}

input
{
    font-family: "Arial";
}

.clearfix
{
    zoom: 1;
}
/*讓框線框住內容*/
.clearfix::after
{
    height: 0px;
    clear: both;
    display: block;
    visibility: hidden;
    content: ".";
}

/*控制Value圖在背景內*/
.moodbg .moodtop .vote .votebd .items .chart
{
    margin: 0px auto;
    border: 1px solid rgb(169, 169, 169);
    width: 25px;
    position: relative;
}
/*長條圖的背景1*/
.moodbg .moodtop .vote .votebd .items .chart .bg
{
    background: url("bg_chart_inside_bg.gif") repeat-y;
    margin: 1px;
    border: 1px solid rgb(205, 205, 205);
    width: 21px;
    height: 108px;
}
/*長條圖的背景2*/
.moodbg .moodtop .vote .votebd .items .chart .bg .degree
{
    background: url("bg_chart_degreen.gif") repeat-y 0px 108px;
    margin: 1px;
    left: 0px;
    top: 0px;
    width: 23px;
    height: 108px;
    border-bottom-color: rgb(0, 92, 110);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    position: absolute;
}

/*Value值的圖片*/
.moodbg .moodtop .vote .votebd .items .chart .degree img
{
    width: 23px;
    left: 0px;
    bottom: 0px;
    position: absolute;
}






.mood
{
    text-align: left;
    padding-left: 140px;
}
.moodbg
{
    background: url("bg_mood_collection.gif") repeat-y;
    width: 520px;
    margin-top: 15px;
}
.moodbg .moodtop
{
    background: url("bg_mood_top_collection.gif") no-repeat top;
}
.moodbg .moodtop .vote
{
    padding: 17px 17px 0px;
}
.moodbg .moodtop .vote .votehd h3
{
    background: url("ico_mood.gif") no-repeat;
    padding: 0px 0px 5px 24px;
    color: rgb(10, 97, 128);
    font-size: 123.1%;
}
.moodbg .moodtop .vote .votebd
{
    margin-top: 8px;
}

/*face和長條圖的y間距*/
.moodbg .moodtop .vote .votebd .items label
{
    width: 47px;
    text-align: center;
    font-size: 93%;
    margin-top: 5px;
    float: left;
}

/*face的圖片*/
.moodbg .moodtop .vote .votebd .items label img
{
    margin: 0px auto 3px;
    display: block;
}
/*每個face的RadioButton*/
.moodbg .moodtop .vote .votebd .items label input
{
    margin: 5px auto 4px;
    display: block;
}

/*每個長條圖和face和RadioButton的排列*/
.moodbg .moodtop .vote .votebd .items .each
{
    width: 47px;
    text-align: center;
    float: left;
}






/*送出 按鈕的樣式1*/
.moodbg .moodtop .vote .votebd .novote
{
    margin-top: 16px;
    margin-left: 10px;
    float: left;
}
/*送出 按鈕的樣式2*/
.moodbg .moodtop .vote .votebd .novote .vote_btn
{
    width: 80px;
    background-image: url("btn_bg.gif");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-color: transparent;
}
/*送出 按鈕的樣式3*/
.moodbg .moodtop .vote .votebd .novote input
{
    background: url("btn_bg.gif") no-repeat;
    margin: 0px 8px;
    border: currentColor;
    width: 80px;
    height: 25px;
    color: rgb(69, 69, 69);
    line-height: 1.5;
    font-weight: bold;
}

/*下框線*/
.moodbg .moodtop .moodbottom
{
    background: url("bg_mood_bottom_collection.gif") no-repeat bottom;
    height: 5px;
}

/*票數結果(總票數)的背景圖*/
.moodbg .moodtop .vote .votebd .total
{
    background: url("bg_mood_count.gif") no-repeat;
    width: 98px;
    height: 112px;
    margin-left: 10px;
    float: left;
}

/*以下兩個的容器,控制排列*/
.moodbg .moodtop .vote .votebd .total .num
{
    background: url("bg_black_white.gif") repeat-x bottom;
    margin: 0px auto;
    padding: 20px 0px 17px;
    width: 80%;
    text-align: center;
}
/*總共票數數字*/
.moodbg .moodtop .vote .votebd .total .num ins
{
    color: rgb(10, 97, 128);
    font-size: 146.5%;
    font-weight: bold;
}
/*"投票"的文字*/
.moodbg .moodtop .vote .votebd .total .num p
{
    color: rgb(102, 102, 102);
    padding-top: 6px;
    font-size: 93%;
}

 

.aspx的設計畫面也大都擺好了



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="mood">
        <div class="moodbg">
            <div class="moodtop">
                <div class="vote clearfix">
                    <div class="votehd">
                        <h3>
                            這篇文章讓你覺得?</h3>
                    </div>
                    <div class="votebd clearfix">
                        <div class="items">
                            <!--各投票選項-->
                            <div class="each">
                                <!--第一個投票項目-->
                                <div class="chart clearfix" id="div_item1" runat="server">
                                    <!--圖表區域,未按下投票前,style="display:none;"-->
                                    <div class="bg">
                                        <!--長條圖背景1-->
                                        <div class="degree">
                                            <!--長條圖背景2-->
                                            <!--要改變height的前景長條圖-->
                                            <asp:Image ID="img_face1" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <!--包住face圖和心情文字和RadioButton的容器-->
                                <label for="satu0">
                                    <!--face圖-->
                                    <img src="images/ico_att_0.gif" alt="有趣"/>有趣
                                    <!--投票用的RadioButton-->
                                    <asp:RadioButton runat="server" id="rbo_face1" GroupName="vote"   />
                                </label>
                            </div>
                            <!--第一個投票項目完-->
                            <div class="each">
                                <div class="chart clearfix" id="div_item2" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face2" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu1">
                                    <img src="images/ico_att_1.gif" alt="很酷"/>很酷
                                    <asp:RadioButton runat="server" id="rbo_face2" GroupName="vote"   /></label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item3" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face3" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu2">
                                    <img src="images/ico_att_2.gif" alt="神奇"/>神奇
                                    <asp:RadioButton runat="server" id="rbo_face3" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item4" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face4" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu3">
                                    <img src="images/ico_att_3.gif" alt="新鮮"/>新鮮
                                    <asp:RadioButton runat="server" id="rbo_face4" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item5" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face5" runat="server" ImageUrl="css/value.png" Height="10%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu4">
                                    <img src="images/ico_att_4.gif" alt="誇張"/>誇張
                                    <asp:RadioButton runat="server" id="rbo_face5" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item6" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face6" runat="server" ImageUrl="css/value.png" Height="40%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu5">
                                    <img src="images/ico_att_5.gif" alt="頓悟"/>頓悟
                                    <asp:RadioButton runat="server" id="rbo_face6" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item7" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face7" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu6">
                                    <img src="images/ico_att_6.gif" alt="實用"/>實用
                                    <asp:RadioButton runat="server" id="rbo_face7" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item8" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face8" runat="server" ImageUrl="css/value.png" Height="20%" />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu7">
                                    <img src="images/ico_att_7.gif" alt="警惕"/>警惕
                                    <asp:RadioButton runat="server" id="rbo_face8" GroupName="vote"   />
                                    </label></div>
                        </div>
                         <div class="total" id="div_total" runat="server"  >
                            <div class="num">
                                <ins>
                                    <asp:Literal Text="71" ID="li_totalVotes" runat="server" /></ins><!--超過1千萬會破版-->
                                <p>
                                    投票</p>
                            </div>
                            
                        </div>
                        <div class="novote"  id="div_voteSubmit" runat="server">
                            <asp:Button ID="btn_submit" runat="server" CssClass="vote_btn" Text="送 出" 
                                onclick="btn_submit_Click" />
                        </div>
                       
                    </div> 
                </div>
                <div class="moodbottom">
                </div>
            </div>
        </div>
    </div>

    
    </form>
</body>
</html>

 

 

目前執行起來是把全部的控制項、區塊都顯示

image

確認沒漏什麼重要的東西後

 

再從資料庫開一個Table


Go

Create table article_vote  /*文章投票數*/
(
 article_id int identity primary key, /*文章id,主鍵*/
 face1 int default(0),/*face1的投票數*/
 face2 int default(0),/*face2的投票數*/
 face3 int default(0),/*face3的投票數*/
 face4 int default(0),/*face4的投票數*/
 face5 int default(0),/*face5的投票數*/
 face6 int default(0),/*face6的投票數*/
 face7 int default(0),/*face7的投票數*/
 face8 int default(0),/*face8的投票數*/


)
Go
 

 

功能流程大概這樣

Step 1. 畫面一進到此網頁,會帶QueryString(article_id),沒有的話預設為1

Step 2. 使用者先點選了其中一張臉(心情),按下送出(投票)後

Step 3. 程式先去判斷此文章是否有投票過,沒有的話,就Insert一筆資料並把剛剛點選的那張臉的票數設為1,已有此文章的投票資料的話,就直接Update該文章剛剛點選的臉(心情)的票數累加1

Step 4. 有數據後,就要把原本隱藏起來的圖表顯示出來,再把每個RadioButton隱藏

Step 5. 程式去DB撈出此文章的總投票數,再算出每張臉的投票率[(每張臉的投票數/總投票數)*100]

Step 6. 以上面的圖表來說,灰色的圖是背景圖,藍色的圖就是投票率,它的Height就是投票率數字

 

原本顯示、隱藏是想藉由jQuery操作,但發現會有圖表出現一下子後,才隱藏的現象(就是反應慢了點的感覺)

所以顯示、隱藏區塊的動作都由Server端操作

 

Code-Behind,先處理第一次進到網頁時的顯示隱藏區塊


using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
/*要引用以下的命名空間*/
using System.Web.Configuration;
 

public partial class _Default : System.Web.UI.Page
{
    //DB連線字串
    string connStr = WebConfigurationManager.ConnectionStrings["connStr"].ConnectionString;
    int article_id = 1;
    protected void Page_Load(object sender, EventArgs e)
    {
        #region 檢查QueryString
        if (!string.IsNullOrEmpty(Request.QueryString["article_id"]))
        {//QueryString有值
            int.TryParse(Request.QueryString["article_id"],out this.article_id);
            //如果轉型失敗就用預設值1
        }

        #endregion


        if (!IsPostBack)//Get Method 要做的事
        {
            //隱藏圖表區塊
            for (int i = 1; i <= 8; i++)
            {
                Control div_item = (Control)this.FindControl("div_item" + i);
                div_item.Visible = false;
            }

            //隱藏總票數的區塊
            div_total.Visible = false;
            
            //總投票數設為0
            li_totalVotes.Text = "0";
        }
    }

     

 
}

執行結果:

image

確認無誤

到時候設定圖片高度是用style=”height:50%”這樣的設定方式,所以各圖片的Height屬性要先拿掉



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="mood">
        <div class="moodbg">
            <div class="moodtop">
                <div class="vote clearfix">
                    <div class="votehd">
                        <h3>
                            這篇文章讓你覺得?</h3>
                    </div>
                    <div class="votebd clearfix">
                        <div class="items">
                            <!--各投票選項-->
                            <div class="each">
                                <!--第一個投票項目-->
                                <div class="chart clearfix" id="div_item1" runat="server">
                                    <!--圖表區域,未按下投票前,style="display:none;"-->
                                    <div class="bg">
                                        <!--長條圖背景1-->
                                        <div class="degree">
                                            <!--長條圖背景2-->
                                            <!--要改變height的前景長條圖-->
                                            <asp:Image ID="img_face1" runat="server" ImageUrl="css/value.png"     />
                                        </div>
                                    </div>
                                </div>
                                <!--包住face圖和心情文字和RadioButton的容器-->
                                <label for="satu0">
                                    <!--face圖-->
                                    <img src="images/ico_att_0.gif" alt="有趣"/>有趣
                                    <!--投票用的RadioButton-->
                                    <asp:RadioButton runat="server" id="rbo_face1" GroupName="vote"   />
                                </label>
                            </div>
                            <!--第一個投票項目完-->
                            <div class="each">
                                <div class="chart clearfix" id="div_item2" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face2" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu1">
                                    <img src="images/ico_att_1.gif" alt="很酷"/>很酷
                                    <asp:RadioButton runat="server" id="rbo_face2" GroupName="vote"   /></label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item3" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face3" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu2">
                                    <img src="images/ico_att_2.gif" alt="神奇"/>神奇
                                    <asp:RadioButton runat="server" id="rbo_face3" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item4" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face4" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu3">
                                    <img src="images/ico_att_3.gif" alt="新鮮"/>新鮮
                                    <asp:RadioButton runat="server" id="rbo_face4" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item5" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face5" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu4">
                                    <img src="images/ico_att_4.gif" alt="誇張"/>誇張
                                    <asp:RadioButton runat="server" id="rbo_face5" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item6" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face6" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu5">
                                    <img src="images/ico_att_5.gif" alt="頓悟"/>頓悟
                                    <asp:RadioButton runat="server" id="rbo_face6" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item7" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face7" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu6">
                                    <img src="images/ico_att_6.gif" alt="實用"/>實用
                                    <asp:RadioButton runat="server" id="rbo_face7" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item8" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face8" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu7">
                                    <img src="images/ico_att_7.gif" alt="警惕"/>警惕
                                    <asp:RadioButton runat="server" id="rbo_face8" GroupName="vote"   />
                                    </label></div>
                        </div>
                         <div class="total" id="div_total" runat="server"  >
                            <div class="num">
                                <ins>
                                    <asp:Literal Text="71" ID="li_totalVotes" runat="server" /></ins><!--超過1千萬會破版-->
                                <p>
                                    投票</p>
                            </div>
                            
                        </div>
                        <div class="novote"  id="div_voteSubmit" runat="server">
                            <asp:Button ID="btn_submit" runat="server" CssClass="vote_btn" Text="送 出" 
                                onclick="btn_submit_Click" />
                        </div>
                       
                    </div> 
                </div>
                <div class="moodbottom">
                </div>
            </div>
        </div>
    </div>

    
    </form>
</body>
</html>

忽然想到要再追加一個「觀看結果」的LinkButton



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="mood">
        <div class="moodbg">
            <div class="moodtop">
                <div class="vote clearfix">
                    <div class="votehd">
                        <h3>
                            這篇文章讓你覺得?</h3>
                    </div>
                    <div class="votebd clearfix">
                        <div class="items">
                            <!--各投票選項-->
                            <div class="each">
                                <!--第一個投票項目-->
                                <div class="chart clearfix" id="div_item1" runat="server">
                                    <!--圖表區域,未按下投票前,style="display:none;"-->
                                    <div class="bg">
                                        <!--長條圖背景1-->
                                        <div class="degree">
                                            <!--長條圖背景2-->
                                            <!--要改變height的前景長條圖-->
                                            <asp:Image ID="img_face1" runat="server" ImageUrl="css/value.png"     />
                                        </div>
                                    </div>
                                </div>
                                <!--包住face圖和心情文字和RadioButton的容器-->
                                <label for="satu0">
                                    <!--face圖-->
                                    <img src="images/ico_att_0.gif" alt="有趣"/>有趣
                                    <!--投票用的RadioButton-->
                                    <asp:RadioButton runat="server" id="rbo_face1" GroupName="vote"   />
                                </label>
                            </div>
                            <!--第一個投票項目完-->
                            <div class="each">
                                <div class="chart clearfix" id="div_item2" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face2" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu1">
                                    <img src="images/ico_att_1.gif" alt="很酷"/>很酷
                                    <asp:RadioButton runat="server" id="rbo_face2" GroupName="vote"   /></label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item3" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face3" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu2">
                                    <img src="images/ico_att_2.gif" alt="神奇"/>神奇
                                    <asp:RadioButton runat="server" id="rbo_face3" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item4" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face4" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu3">
                                    <img src="images/ico_att_3.gif" alt="新鮮"/>新鮮
                                    <asp:RadioButton runat="server" id="rbo_face4" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item5" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face5" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu4">
                                    <img src="images/ico_att_4.gif" alt="誇張"/>誇張
                                    <asp:RadioButton runat="server" id="rbo_face5" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item6" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face6" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu5">
                                    <img src="images/ico_att_5.gif" alt="頓悟"/>頓悟
                                    <asp:RadioButton runat="server" id="rbo_face6" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item7" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face7" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu6">
                                    <img src="images/ico_att_6.gif" alt="實用"/>實用
                                    <asp:RadioButton runat="server" id="rbo_face7" GroupName="vote"   />
                                    </label></div>
                            <div class="each">
                                <div class="chart clearfix" id="div_item8" runat="server">
                                    <div class="bg">
                                        <div class="degree">
                                            <asp:Image ID="img_face8" runat="server" ImageUrl="css/value.png"   />
                                        </div>
                                    </div>
                                </div>
                                <label for="satu7">
                                    <img src="images/ico_att_7.gif" alt="警惕"/>警惕
                                    <asp:RadioButton runat="server" id="rbo_face8" GroupName="vote"   />
                                    </label></div>
                        </div>
                         <div class="total" id="div_total" runat="server"  >
                            <div class="num">
                                <ins>
                                    <asp:Literal Text="71" ID="li_totalVotes" runat="server" /></ins><!--超過1千萬會破版-->
                                <p>
                                    投票</p>
                            </div>
                            
                        </div>
                        <div class="novote"  id="div_voteSubmit" runat="server">
                            <asp:Button ID="btn_submit" runat="server" CssClass="vote_btn" Text="送 出" 
                                onclick="btn_submit_Click" />
                        </div>
                        <!--直接觀看結果-->
                        <div style="text-align:center;">
                        <asp:LinkButton runat="server" ID="lnk_viewResult" Text="觀看結果" 
                                onclick="lnk_viewResult_Click"  /> 
                        </div>
                    </div> 
                </div>
                <div class="moodbottom">
                </div>
            </div>
        </div>
    </div>

    
    </form>
</body>
</html>

 

接著寫「送出」按鈕的Click事件(完整Code-Behind代碼)


using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
/*要引用以下的命名空間*/
using System.Web.Configuration;
using System.Data.SqlClient;
using System.Data;


public partial class _Default : System.Web.UI.Page
{
    //DB連線字串
    string connStr = WebConfigurationManager.ConnectionStrings["connStr"].ConnectionString;
    int article_id = 1;
    protected void Page_Load(object sender, EventArgs e)
    {
        #region 檢查QueryString
        if (!string.IsNullOrEmpty(Request.QueryString["article_id"]))
        {//QueryString有值
            int.TryParse(Request.QueryString["article_id"], out this.article_id);
            //如果轉型失敗就用預設值1
        }

        #endregion


        if (!IsPostBack)//Get Method 要做的事
        {
            //隱藏圖表區塊
            for (int i = 1; i <= 8; i++)
            {
                Control div_item = (Control)this.FindControl("div_item" + i);
                div_item.Visible = false;
            }

            //隱藏總票數的區塊
            div_total.Visible = false;

            //總投票數設為0
            li_totalVotes.Text = "0";
        }
    }



    //投票的Click事件
    protected void btn_submit_Click(object sender, EventArgs e)
    {
        int vote = 0;//投票數預設0
        string column = "face1";//table預設欄位名稱
        if (rbo_face1.Checked)
        {
            column = "face1";
            vote = 1;
        }
        else if (rbo_face2.Checked)
        {
            column = "face2";
            vote = 1;
        }
        else if (rbo_face3.Checked)
        {
            column = "face3";
            vote = 1;
        }
        else if (rbo_face4.Checked)
        {
            column = "face4";
            vote = 1;
        }
        else if (rbo_face5.Checked)
        {
            column = "face5";
            vote = 1;
        }
        else if (rbo_face6.Checked)
        {
            column = "face6";
            vote = 1;
        }
        else if (rbo_face7.Checked)
        {
            column = "face7";
            vote = 1;
        }
        else if (rbo_face8.Checked)
        {
            column = "face8";
            vote = 1;
        }
        else if (rbo_face1.Checked)
        {
            column = "face1";
            vote = 1;
        }

        string sql = @"
                        If EXISTS(Select 1 from article_vote Where article_id='" + this.article_id + @"')
                        Update article_vote
                        Set " + column + " = " + column + " + " + vote + @"
                        Where article_id='" + this.article_id + @"'
                        else
                        Insert into article_vote (" + column + ") values (" + vote + ")";
        this.executeSql(sql);//執行SQL語句




        //圖表和總票數要顯示,每個RadioButton要隱藏
        show_hide_div();

        //設定各圖表的高度
        set_chart_height();
    }

    //設定各圖表的高度
    private void set_chart_height()
    {
        //先計算總投票數
        DataTable dt = this.queryDataTable(@"Select face1,face2,face3,face4,face5,face6,face7,face8 
                                             from article_vote Where article_id ='" + this.article_id + "'");

        int total_vote = Convert.ToInt32(dt.Rows[0]["face1"]) + Convert.ToInt32(dt.Rows[0]["face2"]) + Convert.ToInt32(dt.Rows[0]["face3"]) +
                         Convert.ToInt32(dt.Rows[0]["face4"]) + Convert.ToInt32(dt.Rows[0]["face5"]) + Convert.ToInt32(dt.Rows[0]["face6"])
                        + Convert.ToInt32(dt.Rows[0]["face7"]) + Convert.ToInt32(dt.Rows[0]["face8"]);

        //顯示總投票數
        li_totalVotes.Text = total_vote.ToString();

        //算出各投票率
        double face1 = (Convert.ToInt32(dt.Rows[0]["face1"]) / (double)total_vote) * 100;
        double face2 = (Convert.ToInt32(dt.Rows[0]["face2"]) / (double)total_vote) * 100;
        double face3 = (Convert.ToInt32(dt.Rows[0]["face3"]) / (double)total_vote) * 100;
        double face4 = (Convert.ToInt32(dt.Rows[0]["face4"]) / (double)total_vote) * 100;
        double face5 = (Convert.ToInt32(dt.Rows[0]["face5"]) / (double)total_vote) * 100;
        double face6 = (Convert.ToInt32(dt.Rows[0]["face6"]) / (double)total_vote) * 100;
        double face7 = (Convert.ToInt32(dt.Rows[0]["face7"]) / (double)total_vote) * 100;
        double face8 = (Convert.ToInt32(dt.Rows[0]["face8"]) / (double)total_vote) * 100;
         
        //設定各圖表的圖片高度
        img_face1.Attributes["style"] = "height:" + Math.Round(face1, 2) + "%;";//引用大陸網友說的,這是「四舍六入五凑偶」XD
                                                                                //到第2位,避免小數位數太多
        img_face2.Attributes["style"] = "height:" + Math.Round(face2,2) + "%;";
        img_face3.Attributes["style"] = "height:" + Math.Round(face3,2) + "%;";
        img_face4.Attributes["style"] = "height:" + Math.Round(face4,2) + "%;";
        img_face5.Attributes["style"] = "height:" + Math.Round(face5,2) + "%;";
        img_face6.Attributes["style"] = "height:" + Math.Round(face6,2) + "%;";
        img_face7.Attributes["style"] = "height:" + Math.Round(face7,2) + "%;";
        img_face8.Attributes["style"] = "height:" + Math.Round(face8,2) + "%;";

    }

    //直接觀看結果
    protected void lnk_viewResult_Click(object sender, EventArgs e)
    {
        //圖表和總票數要顯示,每個RadioButton要隱藏
        show_hide_div();

        //設定各圖表的高度
        set_chart_height();
    }

    //圖表和總票數要顯示,每個RadioButton要隱藏
    private void show_hide_div()
    {

        for (int i = 1; i <= 8; i++)
        {
            //每個圖表要顯示
            Control div_item = (Control)this.FindControl("div_item" + i);
            div_item.Visible = true;
            //每個RadioButton要隱藏
            RadioButton rbo_face = (RadioButton)this.FindControl("rbo_face" + i);
            rbo_face.Visible = false;
        }

        //顯示總票數的區塊
        div_total.Visible = true;
        //隱藏「送出」按鈕的區塊
        div_voteSubmit.Visible = false;

    }


    /// <summary>
    /// 給予SQL語句,回傳DataTable資料集
    /// </summary>
    /// <param name="sql"></param>
    /// <returns></returns>
    private DataTable queryDataTable(string sql)
    {
        DataSet ds = new DataSet();
        using (SqlConnection conn = new SqlConnection(this.connStr))
        {
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.Fill(ds);
        }

        return ds.Tables.Count > 0 ? ds.Tables[0] : new DataTable();
    }

    /// <summary>
    /// 執行異動的SQL語句
    /// </summary>
    /// <param name="sql"></param>
    /// <returns></returns>
    private int executeSql(string sql)
    {
        int result = 0;
        using (SqlConnection conn = new SqlConnection(this.connStr))
        {
            SqlCommand cmd = new SqlCommand(sql, conn);
            conn.Open();
            result = cmd.ExecuteNonQuery();
            conn.Close();
        }
        return result;

    }

    
}

 

 

最終執行結果:

image

 

選擇「警惕」按「送出」

image

因為目前只有一票,所以該項為100%投票率

image

接著Get Method回到頁面,換投「有趣」>送出

image

image

image

共投了2票,分別是「有趣」、「警惕」,所以各佔50%投票率

再Get Method回到頁面,再投「有趣」>送出

image

再Get Method回到頁面,換投「很酷」>送出

image

再Get Method回到頁面,這次直接按「觀看結果」

image

image

 

 

奇摩的投票圖表至此完成,防灌水機制就請自行努力,本篇文章不探討

對此功能有興趣的人可以下載完整研究包

 

 

2011.12.01 追加,算投票率時要做個防呆,不然當除數為0時,會發生例外


        double face2 = 0;
        double face3 = 0;
        double face4 = 0;
        double face5 = 0;
        double face6 = 0;
        double face7 = 0;
        double face8 = 0;
        if (total_vote!=0)//除數不為0
        {
            //算出各投票率
            face1 = (Convert.ToInt32(dt.Rows[0]["face1"]) / (double)total_vote) * 100;
            face2 = (Convert.ToInt32(dt.Rows[0]["face2"]) / (double)total_vote) * 100;
            face3 = (Convert.ToInt32(dt.Rows[0]["face3"]) / (double)total_vote) * 100;
            face4 = (Convert.ToInt32(dt.Rows[0]["face4"]) / (double)total_vote) * 100;
            face5 = (Convert.ToInt32(dt.Rows[0]["face5"]) / (double)total_vote) * 100;
            face6 = (Convert.ToInt32(dt.Rows[0]["face6"]) / (double)total_vote) * 100;
            face7 = (Convert.ToInt32(dt.Rows[0]["face7"]) / (double)total_vote) * 100;
            face8 = (Convert.ToInt32(dt.Rows[0]["face8"]) / (double)total_vote) * 100;
        }