教程推薦

·ASP.NET初學者入門實踐 ·Visual Baisc.NET入門 ·基于C#的接口基礎教程 ·Visual Studio 2005

精彩專題

·ASP.NET創建XML Web服務 ·Visual Basic 9.0新功能 ·VB2005實現RSS覽盡天下事

主題社區

·ASP.NET源碼 ·ASP.NET

一、系統功能設計和數據庫設計

1、系統功能設計和數據庫設計

1.1 系統功能設計

網絡在線投票系統實現的功能比較簡單，具體如下：

◎投票項目的管理；

◎添加投票的項目；

◎刪除投票的項目；

◎對項目進行投票；

◎查看項目的投票情況。

1.2 數據庫設計

本系統的數據庫設計比較簡單，只需要存儲投票的信息即可。在SQL Server 2000中創建一個數據庫，名稱為“WebVoteDB”，并在該數據庫中創建投票項目表Votes。其中“VoteID”字段存儲投票項目ID；“Item”字段存儲投票項目的名稱；“VoteCount”字段存儲每個項目的票數。創建投票項目表Votes的操作界面如圖1所示。

投票項目表Votes需要存儲投票項目名稱及其票數，表的字段說明如表1所示。


圖1 創建投票項目表Votes的操作界面

表1 Votes表

字 段 名	數 據 類 型	字 段 說 明	鍵 引 用	備 注
TreeID	int	投票項目ID	PK	主鍵（自動增一）
Item	varchar(200)	投票項目的名稱
VoteCount	int	票數

在線投票功能是網站應用程序最常用的功能之一，也是網站應用程序開發常用的功能模塊。當網站的管理員或用戶提出一些新的想法與建議或者出現一種新產品時，他們可能需要通過用戶或者客戶的投票方式來確定這些新的想法、建議或者新的產品是否滿足用戶或者客戶的需求，另外，網站還可以通過網站在線投票功能做一些實際性的調查工作。本章介紹的網絡在線投票系統還以直觀的圖形化界面顯示投票信息，而且還可以及時查看投票的情況。

二、投票系統實現

創建好系統所需要的數據庫之后，網絡在線投票系統的具體實現可以分為下面3個部分：

（1）存儲過程的實現部分；

（2）數據庫訪問層的實現部分；

（3）功能頁面的實現部分。

下面將詳細介紹上述3個部分的具體實現方法。首先在Microsoft Visual Studio .NET 2005中創建一個Web站點，名稱為“WebVote”。

2.1 存儲過程設計

在數據庫WebVoteDB中創建存儲過程Pr_GetVotes、Pr_GetSingleVote、Pr_AddVote、Pr_UpdateVote和Pr_DeleteVote。其中：

Pr_GetVotes 從投票項目表Votes中獲取所有投票項目的信息；

Pr_GetSingleVote 從投票項目表Votes中獲取某一條投票項目的信息；

Pr_AddVote 添加一條新記錄到投票項目表Votes中；

Pr_UpdateVote 更新參與投票項目的票數；

Pr_DeleteVote 從投票項目表Votes中獲取刪除一條投票項目信息。

以上各存儲過程的程序代碼如下：

/* 存儲過程Pr_GetVotes */ CREATE PROCEDURE Pr_GetVotes AS SELECT * FROM Votes ORDER BY VoteID /* 存儲過程Pr_GetSingleVote */ CREATE PROCEDURE Pr_GetSingleVote (@VoteID int) AS SELECT Votes.* FROM Votes WHERE VoteID = @VoteID /* 存儲過程Pr_AddVote */ CREATE PROCEDURE Pr_AddVote(@Item varchar(100)) AS INSERT INTO Votes(Item,ItemCount) VALUES(@Item,0) RETURN @@Identity /* 存儲過程Pr_UpdateVote */ CREATE PROCEDURE Pr_UpdateVote (@VoteID int) AS UPDATE Votes SET VoteCount = VoteCount + 1 WHERE VoteID = @VoteID /* 存儲過程Pr_DeleteVote */ CREATE PROCEDURE Pr_DeleteVote (@VoteID int) AS DELETE Votes WHERE VoteID = @VoteID

軟件頻道精品推薦
			更多精彩 點擊體驗>>

2.2 數據庫訪問層設計

在應用程序WebVote中添加訪問投票表Votes的類Vote，該類封裝對投票項目表Votes中記錄的選擇、添加、修改和刪除的方法。其中：

方法GetVotes() 從投票項目表Votes中獲取所有投票項目的信息；

方法AddVote(String sItem) 添加一條新記錄到投票項目表Votes中；

方法UpdateVote(int nVoteID) 更新參與投票項目的票數；

方法DeleteVote(int nVoteID) 從投票項目表Votes中獲取刪除一條投票項目信息。

類Vote的程序設計代碼如下：

public class Vote { public SqlDataReader GetVotes() { //定義類SQLHelper SQLHelper.SQLHelper sqlHelper = new SQLHelper.SQLHelper(); //定義保存從數據庫獲取的結果的DataReader SqlDataReader dr = null; try { //執行存儲過程 sqlHelper.RunProc("Pr_GetVotes", out dr); } catch (Exception ex) { //拋出執行數據庫異常 SystemError.CreateErrorLog(ex.Message); throw new Exception(ex.Message, ex); } //返回從數據庫獲取的結果 return (dr); } public int AddVote(String sItem) { //定義類SQLHelper SQLHelper.SQLHelper sqlHelper = new SQLHelper.SQLHelper(); //創建訪問數據庫的參數 SqlParameter[] paramList = { sqlHelper.CreateInParam("@Item", SqlDbType.VarChar,100,sItem) }; try { //執行存儲過程 return (sqlHelper.RunProc("Pr_AddVote", paramList)); } catch (Exception ex) { //拋出執行數據庫異常 SystemError.CreateErrorLog(ex.Message); throw new Exception(ex.Message, ex); } } public void UpdateVote(int nVoteID) { //定義類SQLHelper SQLHelper.SQLHelper sqlHelper = new SQLHelper.SQLHelper(); //創建訪問數據庫的參數 SqlParameter[] paramList = {sqlHelper.CreateInParam("@VoteID", SqlDbType.Int, 4,nVoteID)}; try { //執行存儲過程 sqlHelper.RunProc("Pr_UpdateVote", paramList); } catch (Exception ex) { //拋出執行數據庫異常 SystemError.CreateErrorLog(ex.Message); throw new Exception(ex.Message, ex); } } public void DeleteVote(int nVoteID) { //定義類SQLHelper SQLHelper.SQLHelper sqlHelper = new SQLHelper.SQLHelper(); //創建訪問數據庫的參數 SqlParameter[] paramList = { sqlHelper.CreateInParam("@VoteID", SqlDbType.Int, 4,nVoteID) }; try { //執行存儲過程 sqlHelper.RunProc("Pr_DeleteVote", paramList); } catch (Exception ex) { //拋出執行數據庫異常 SystemError.CreateErrorLog(ex.Message); throw new Exception(ex.Message, ex); } } }

系統主頁面設計

在應用程序WebVote中添加一個新的Web頁面，并命名為Default.aspx，它的代碼隱藏文件為Default.aspx.cs。

在頁面Default.aspx上添加3個超鏈接控件，名稱分別為ItemManageLink、OnlineVoteLink、ViewVoteLink。它們分別實現跳轉投票項目管理頁面VoteItemManage.aspx、投票頁面WebOnlinVote.aspx、投票結果頁面ShowVoteInfo.aspx。頁面Default.aspx的設計界面如圖2所示。


圖2 頁面Default.aspx的設計界面

頁面Default.aspx的HTML設計代碼如下：

＜asp:HyperLink ID="ItemManageLink" NavigateUrl="'/VoteItemManage.aspx" runat="server" Font-Bold="True"＞投票項目管理＜/asp:HyperLink＞ ＜asp:HyperLink ID="OnlineVoteLink" NavigateUrl="'/WebOnlinVote.aspx" runat="server" Font-Bold="True"＞網站在線投票＜/asp:HyperLink＞ ＜asp:HyperLink ID="ViewVoteLink" NavigateUrl="'/ShowVoteInfo.aspx" runat="server" Font-Bold="True"＞查看投票結果＜/asp:HyperLink＞

在線投票系統運行之后，系統默認頁面Default.aspx的初始化界面如圖3所示，此時顯示3個鏈接按鈕。


圖3 投票頁面Default.aspx的初始化界面

投票項目管理頁面設計

在應用程序WebVote中添加一個新的Web頁面，并命名為VoteItemManage.aspx，它的代碼隱藏文件為VoteItemManage.aspx.cs文件。

1．頁面設計

在頁面VoteItemManage.aspx上添加一個列表控件、一個Button控件、一個TextBox控件和一個ImageButton控件，它們的名稱分別為ItemList、AddBtn、Item和deleteBtn。控件ItemList顯示投票項目表中的所有數據；控件AddBtn實現添加一個新的投票項目；控件Item用來輸入新的投票項目名稱；控件deleteBtn刪除一個投票項目。頁面ItemManage.aspx的設計界面如圖4所示。


圖4 頁面VoteItemManage.aspx的設計界面

頁面VoteItemManage.aspx的HTML設計代碼如下：

＜title＞網絡在線投票系統＜/title＞ ＜link href="CSS/ASPNET2BaseCss.css" type="text/css" rel="stylesheet"＞ ＜asp:ListBox id="ItemList" width="150" rows="10" runat="server" CssClass="SelectSta" /＞ ＜asp:ImageButton id="deleteBtn" ImageUrl="'/images/delete.gif" AlternateText="刪除此項" runat="server" CommandName="delete" OnClick="deleteBtn_Click" /＞ ＜asp:TextBox ID="Item" Runat="server" Width="252" CssClass="InputCss"＞＜/asp:TextBox＞ ＜asp:Button ID="AddBtn" Runat="server" Text="增加新的投票項目" CssClass="ButtonCss" OnClick="AddBtn_Click"＞＜/asp:Button＞

2．頁面初始化

頁面VoteItemManage.aspx調用函數Page_Load(Object sender,EventArgs e)初始化，該函數調用函數BindVoteListData()從數據庫投票表Votes中獲取所有投票的項目，并把獲取的數據綁定到列表控件ItemList。函數Page_Load(Object sender,EventArgs e)和函數BindVoteListData()的程序代碼如下：

private void Page_Load(object sender, System.EventArgs e) { if(!Page.IsPostBack) { //綁定投票項目列表的數據 BindVoteListData(); } } private void BindVoteListData() { //獲取投票項目的所有數據 WebVote.Vote vote = new Vote(); SqlDataReader recv = vote.GetVotes(); //設置列表控件的Text屬性和Value屬性 ItemList.DataTextField = "Item"; ItemList.DataValueField = "VoteID"; //設置控件的數據源，并綁定控件的數據 ItemList.DataSource = recv; ItemList.DataBind(); recv.Close(); //關閉數據讀取器 }

網絡在線投票系統運行之后，投票項目管理頁面VoteItemManage.aspx的初始化界面如圖5所示，此時已經顯示投票的項目信息。


圖5 投票項目管理頁面VoteItemManage.aspx的初始化界面

3．添加功能

單擊頁面VoteItemManage.aspx中的【增加新的投票項目】按鈕，觸發事件AddBtn_Click(object sender, System.EventArgs e)，該事件實現添加一個新的投票項目。事件AddBtn_Click(object sender, System.EventArgs e)的程序代碼如下：

private void AddBtn_Click(object sender, System.EventArgs e) { if (Item.Text.Length ＞ 0) { //定義類 WebVote.Vote vote = new Vote(); try { //添加新數據項 vote.AddVote(Item.Text.Trim()); BindVoteListData(); //顯示操作結果信息 Response.Write("＜script＞window.alert('" + ASPNET2System.OPERATIONADDSUCCESSMESSAGE + "')＜/script＞"); } catch (Exception ex) { //顯示添加操作中的失敗、錯誤信息 Response.Redirect("'/DesktopModules/ErrorPage.aspx?ErrorUrl=" + ASPNET2System.RedirectErrorUrl(Request.RawUrl) + "&ErrorMessage=" + ex.Message.Replace("", " ")); } } }

4．刪除功能

單擊頁面VoteItemManage.aspx中的【×】按鈕，觸發事件deleteBtn_Click(object sender, System.EventArgs e)，該事件實現刪除已選擇的投票項目。事件deleteBtn_Click(object sender, System.EventArgs e)的程序代碼如下：

protected void deleteBtn_Click(object sender, ImageClickEventArgs e) { if (ItemList.SelectedIndex ＜= -1) { //顯示操作結果信息 Response.Write("＜script＞window.alert('" + ASPNET2System.OPERATIONNOSELECTMESSAGE + "')＜/script＞"); return; } //定義類 WebVote.Vote vote = new Vote(); try { //刪除數據 vote.DeleteVote(Int32.Parse(ItemList.SelectedValue)); //重新綁定數據 BindVoteListData(); } catch (Exception ex) { //顯示刪除操作中的失敗、錯誤信息 Response.Redirect("'/DesktopModules/ErrorPage.aspx?ErrorUrl=" + ASPNET2System.RedirectErrorUrl(Request.RawUrl) + "&ErrorMessage=" + ex.Message.Replace("", " ")); } }

投票頁面設計

在應用程序WebVote中添加一個新的Web頁面，并命名為WebOnlineVote.aspx，它的代碼隱藏文件為WebOnlineVote.aspx.cs文件。

1．頁面設計

在頁面WebOnlineVote.aspx上添加一個數據網格控件、兩個Button控件和一個Label控件，它們的名稱分別為VoteList、VoteBtn、ShowVote和VoteMessage。控件VoteList用來顯示參與投票的所有項目；控件VoteBtn提交用戶的投票；控件ShowVote實現用戶查看投票情況；控件VoteMessage顯示用戶投票的操作結果。頁面WebOnlinVote.aspx的設計界面如圖6所示。


圖6 頁面WebOnlinVote.aspx的設計界面

頁面WebOnlinVote.aspx的HTML設計代碼如下：

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebOnlinVote.aspx.cs" Inherits="WebOnlinVote" %＞ ＜HTML＞＜HEAD＞＜title＞網絡在線投票系統＜/title＞＜/HEAD＞ ＜asp:datagrid id="VoteList" CssClass="GbText" Runat="server" AutoGenerateColumns="False" DataKeyField="VoteID"＞ ＜Columns＞ ＜asp:TemplateColumn ItemStyle-Width="200"＞ ＜ItemTemplate＞＜%# DataBinder.Eval(Container.DataItem,"Item")%＞ ＜/ItemTemplate＞＜/asp:TemplateColumn＞ ＜asp:TemplateColumn ItemStyle-Width="100"＞ ＜ItemTemplate＞ ＜asp:CheckBox ID="VoteCheck" Runat="server"＞＜/asp:CheckBox＞ ＜/ItemTemplate＞＜/asp:TemplateColumn＞ ＜/Columns＞ ＜FooterStyle BackColor="#FFFFCC" ForeColor="#330099" /＞ ＜SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /＞ ＜PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" /＞ ＜ItemStyle BackColor="White" ForeColor="#330099" /＞ ＜HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /＞ ＜/asp:datagrid＞ ＜asp:button id="VoteBtn" Runat="server" Width="100" Text="我要投票"＞＜/asp:button＞      ＜asp:button id="ShowVote" Runat="server" Width="100" Text="查看投票"＞＜/asp:button＞ ＜asp:Label ID="VoteMessage" Runat="server" Visible="False" ForeColor="red" Font-Bold="True"＞投票成功！！！＜/asp:Label＞＜/td＞ ＜/HTML＞

1．頁面初始化

頁面WebOnlinVote.aspx調用函數Page_Load(Object sender,EventArgs e)初始化，該函數調用函數BindVoteListData()從數據庫投票表Votes中獲取所有投票項目的信息，并把獲取的數據設置為數據網格控件VoteList的數據源。函數Page_Load(Object sender,EventArgs e)和函數BindVoteListData()的程序代碼如下：

private void Page_Load(object sender, System.EventArgs e) { if(!Page.IsPostBack) { //綁定投票的項目 BindVoteListData(); VoteMessage.Visible = false; } } private void BindVoteListData() { //獲取所有數據 WebVote.Vote vote = new Vote(); SqlDataReader recv = vote.GetVotes(); //設置控件的數據源，并綁定數據 VoteList.DataSource = recv; VoteList.DataBind(); recv.Close(); //關閉數據讀取器 }

網絡在線投票系統運行之后，投票頁面WebOnlinVote.aspx的初始化界面如圖7所示，此時顯示被投票的項目信息。


圖7 投票頁面WebOnlinVote.aspx的初始化界面

2．投票功能

用戶單擊頁面WebOnlinVote.aspx中的【我要投票】按鈕和【查看投票】按鈕分別觸發事件VoteBtn_Click(object sender, System.EventArgs e)和事件ShowVote_Click(object sender, System.EventArgs e)，它們分別實現用戶投票功能和查看投票功能。在投票事件中，事件首先檢查用戶對哪些項目進行了投票，然后更改項目的票數。在查看投票事件中，事件重定向到頁面ShowVoteInfo.aspx。事件VoteBtn_Click(object sender, System.EventArgs e)和事件ShowVote_Click(object sender, System.EventArgs e)的程序代碼如下：

private void VoteBtn_Click(object sender, System.EventArgs e) { //定義類 WebVote.Vote vote = new Vote(); try { //添加用戶的投票的項目 foreach(DataGridItem item in VoteList.Items) { //查找每個投票項目的選擇控件 CheckBox check = (CheckBox)item.FindControl("VoteCheck"); if(check != null) { //說明用戶已經投票，則需要添加這一票 if(check.Checked == true) { //修改數據庫中的票數 vote.UpdateVote(Int32.Parse( VoteList.DataKeys[item.ItemIndex].ToString())); VoteMessage.Visible = true; //顯示用戶投票操作的結果 } } } //顯示操作結果信息 Response.Write("＜script＞window.alert(' 投票成功，感謝您的參與！！！')＜/script＞"); } catch (Exception ex) { //顯示修改操作中的失敗、錯誤信息 Response.Redirect("'/DesktopModules/ErrorPage.aspx?ErrorUrl=" + ASPNET2System.RedirectErrorUrl(Request.RawUrl) + "&ErrorMessage=" + ex.Message.Replace("", " ")); } } private void ShowVote_Click(object sender, System.EventArgs e) { //導向查看投票結果頁面 Response.Redirect("'/ShowVoteInfo.aspx"); }

顯示投票結果頁面設計

在應用程序WebVote中添加一個新的Web頁面，并命名為ShowVoteInfo.aspx，它的代碼隱藏文件為ShowVoteInfo.aspx.cs文件。

1．頁面設計

在頁面ShowVoteInfo.aspx上添加一個數據網格控件、一個Label控件和一個Button控件，它們的名稱分別為VoteList、VoteMessage、WebOnlineVoteBtn。控件VoteList用來顯示參與投票的項目的投票情況，并計算各個投票項目所占的百分比；控件VoteMessage顯示用戶投票的總票數；控件WebOnlineVoteBtn實現投票頁面WebOnlinVote.aspx。頁面ShowVoteInfo.aspx的設計界面如圖8所示。



圖8 頁面ShowVoteInfo.aspx的設計界面

頁面ShowVoteInfo.aspx的HTML設計代碼如下：

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowVoteInfo.aspx.cs" Inherits="ShowVoteInfo" %＞ ＜HTML＞＜HEAD＞＜title＞網絡在線投票系統＜/title＞＜/HEAD＞ ＜asp:DataGrid ID="VoteList" Runat="server" CssClass="Normal" AutoGenerateColumns="False" DataKeyField="VoteID"＞ ＜HeaderStyle BackColor="Orange"＞＜/HeaderStyle＞ ＜Columns＞ ＜asp:TemplateColumn HeaderText="投票項目"＞ ＜ItemStyle Width="200px"＞＜/ItemStyle＞ ＜ItemTemplate＞＜%# DataBinder.Eval(Container.DataItem,"Item")%＞ ＜/ItemTemplate＞＜/asp:TemplateColumn＞ ＜asp:TemplateColumn HeaderText="所占總票的百分比"＞ ＜ItemStyle Width="300px"＞＜/ItemStyle＞ ＜ItemTemplate＞ ＜asp:Image ID="voteImage" Runat="server" Height="20" Width='＜%# FormatVoteImage(FormatVoteCount(DataBinder.Eval( Container.DataItem,"VoteCount").ToString()))%＞' mageUrl="Images/vote.gif"＞ ＜/asp:Image＞ ＜%# FormatVoteCount(DataBinder.Eval(Container.DataItem, "VoteCount").ToString())%＞% ＜/ItemTemplate＞＜/asp:TemplateColumn＞ ＜asp:TemplateColumn HeaderText="票數"＞ ＜ItemStyle Width="100px"＞＜/ItemStyle＞ ＜ItemTemplate＞ ＜asp:Label ID="VoteCount" Runat="server"＞ ＜%# DataBinder.Eval(Container.DataItem,"VoteCount")%＞ ＜/asp:Label＞ ＜/ItemTemplate＞＜/asp:TemplateColumn＞ ＜/Columns＞ ＜/asp:DataGrid＞ ＜asp:Label ID="VoteMessage" Runat="server" ForeColor="Red" Width="100%"＞＜/asp:Label＞ ＜asp:button id="WebOnlineVoteBtn" Runat="server" Width="100" Text="返回投票頁面" CssClass="ButtonCss" OnClick="WebOnlineVoteBtn_Click"＞＜/asp:button＞ ＜/HTML＞

2．頁面初始化

頁面ShowVoteInfo.aspx調用函數Page_Load(Object sender,EventArgs e)初始化。該函數調用函數BindVoteListData()從數據庫投票表Votes中獲取所有投票的項目，并把獲取的數據綁定到數據網格控件VoteList。函數Page_Load(Object sender,EventArgs e)還調用函數SetVoteTotal()從數據庫中獲取投票的總票數。函數Page_Load(Object sender,EventArgs e)、函數SetVoteTotal()和函數BindVoteListData()的程序代碼如下：

int voteTotal = 0; private void Page_Load(object sender, System.EventArgs e) { //設置總票數voteTotal SetVoteTotal(); if(!Page.IsPostBack) { //顯示用戶投票的具體情況 BindVoteListData(); VoteMessage.Text = "總票數為：" + voteTotal.ToString(); } } private void SetVoteTotal() { //獲取所有數據 WebVote.Vote vote = new Vote(); SqlDataReader recv = vote.GetVotes(); voteTotal = 0; //讀取每一個參與投票的項目，并計算票數總和 while(recv.Read()) { //計算它們的總和 voteTotal += Int32.Parse(recv["VoteCount"].ToString()); } recv.Close(); } private void BindVoteListData() { //獲取數據 WebVote.Vote vote = new Vote(); SqlDataReader recv = vote.GetVotes(); //設置控件的數據源，并綁定控件的數據 VoteList.DataSource = recv; VoteList.DataBind(); recv.Close(); }

頁面ShowVoteInfo.aspx初始化時（即數據網格控件VoteList綁定數據時），分別調用函數FormatVoteCount(String voteCount)和函數FormatVoteImage(int voteCount)來計算每個投票項目所占的百分比和圖像的長度（繪制比例圖片）。函數FormatVoteCount(String voteCount)和函數FormatVoteImage(int voteCount)的程序代碼如下：

public int FormatVoteCount(String voteCount) { //如果投票沒有被投票 if(voteCount.Length ＜= 0) { //返回0個百分比 return(0); } if(voteTotal ＞ 0) { //返回實際的百分比 return((Int32.Parse(voteCount)* 100/voteTotal)); } return(0); } public int FormatVoteImage(int voteCount) { //返回百分比的圖像的長度 return(voteCount * 3); }

網絡在線投票系統運行之后，顯示投票結果頁面ShowVoteInfo.aspx的初始化界面如圖9所示，此時顯示各個項目的投票結果。



圖9 某個時候的投票結果頁面ShowVoteInfo.aspx