基於Jquery與WebMethod投票功能實現代碼

1：功能描述
1）最好是若干個星星組成，使用者投票時候只要滑鼠點擊星星就可以實現投票，可以自訂星星個數
2）未投票、投票中、完成投票，星星的樣式不同
3）每個星星的都可以自訂提示 比如 “差” “一般” “還好” “不錯”
4）完成投票後，動畫展示投票結果並且不可再投票

2：思路描述
1、3）使用迴圈，最大值是星星的個數，每次迴圈添加一條<a></a>的語句，這條超連結通過Class指定星星樣式，通過title指定滑鼠移到時顯示的文字，迴圈結束後通過Jquery的append函數添加到目標內容區
2）通過Jquery的addClass、removeClass 方法可以動態地調整星星的樣式，值得注意的是在打分的時候，滑鼠移動到某個位置的星星，之前的星星都要添加上樣式，可以使用Jquery的prevAll()獲得當前位置之前的星星的引用 然後add($(this))來獲得當前位置星星的引用.
打分之前：

打分之中：

打分之後:

4）根據目標區子節點裡面被選擇星星的位置+1來產生分數 children().index($(this)) 然後該分數通過ajax與伺服器互動，返回評價分，接著清空目標區內容，添加<span></span>背景圖片設定成星星圖片，在水平位置重複，就可以根據星星的寬度*平均分決定該<span></span>的最終寬度，並使用animate實現動畫效果.

3：實現代碼
1)javaScript代碼
為了方便，我把它做成了半外掛程式形式， AJAX互動還是寫了自己的邏輯進去,代碼如下 複製代碼 代碼如下:(function ($) {
$.fn.Rate = function (options) {
options = options || {};
var StarTip = options.StarTip || ['不值一看', '平平無奇', '資訊靠譜', '對我很有協助', '極品資訊'];
var ItemAmount = options.ItemAmount || 5;
var UnRateClassName = options.UnRateClassName || 'star';
var RateClassName = options.RateClassName || 'star_on';
var originalStateClassName = options.originalStateClassName || 'OriginalState';
var PostURL = options.PostURL || '';
var DoAfterPost = options.DoAfterPost || function () { };
var userID = options.userID || '';
var messageID = options.messageID || '';
var content = $(this);
var starList = '';
for (var i = 0; i < ItemAmount; i++) {
starList += ['<a href="#" class="', UnRateClassName, '" title="', StarTip[i], '"></a>'].join('');
}
content.empty().append(starList).find('a').hover(function () {
$(this).prevAll().add($(this)).addClass(RateClassName);
}, function () {
$(this).prevAll().add($(this)).removeClass(RateClassName);
}).one('click', function () {
var score = parseInt(content.children().index($(this))) + 1;
$.ajax({
type: "POST",
url: PostURL,
data: "{messageID:" + messageID + ",userID:" + userID + ",Score:" + score + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var result = (jQuery.parseJSON(msg.d)).SuccessFlag;
DoAfterPost(result);
content.empty().removeClass();
$('<span></span>').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result + 'px', 'opacity': 1 }, 'slow');
}
});
});

};

})(jQuery);

參數說明:

參數名稱	描述	預設值	參數類型
StarTip	滑鼠移到星星上的文本提示	['不值一看', '平平無奇', '資訊靠譜', '對我很有協助', '極品資訊']	javascript數組 [tip]:數組元素個數必須要和星星個數一致
ItemAmount	星星的個數	5	數字
UnRateClassName	還沒投票時星星的樣式名稱	'star'	字串
RateClassName	投票中，滑鼠移過時星星的樣式	'star_on'	字串
originalStateClassName	投票完成後，結果展示時星星的樣式	'OriginalState'	字串
PostURL	ajax互動時，url參數	''	字串
DoAfterPost	投票完成後，在投票頁面使用自訂方法	''	字串
userID	ajax互動時使用者ID，防止重複投票	''	數字
messageID	ajax互動時文章ID	''	數字

2）前端引用代碼 複製代碼 代碼如下:$('#left table tr:eq(1) td:eq(0) #StarRate').Rate({
PostURL: 'http://www.cnblogs.com/ServiceProvider/MessageInfoService.asmx/VoteMessage',
userID: UserID,
messageID: messageID,
DoAfterPost: function (data) {
if (data > 0) {
$(voteResultContext).html(data);
}
else {
ProcessNoticeShow('您已經投過票了');
}
}
});
}

4）樣式表 複製代碼 代碼如下:.star{ height:16px; width:16px;float:left; background:url(../images/star.gif) no-repeat 0 0;}
.star_on{ background: url(../images/star.gif) no-repeat 0 -32px !important;}
.OriginalState{ width:0px;background: url(../images/star.gif) repeat-x 0 -16px !important;opacity:0;height:16px; display:block;}

3）伺服器端代碼 複製代碼 代碼如下:/// <summary>
/// 對資訊進行投票，傳回值大於0代表成功
/// </summary>
/// <param name="messageID">資訊ID</param>
/// <param name="userID">使用者ID</param>
/// <param name="Score">得分</param>
/// <returns></returns>
[WebMethod]
public string VoteMessage(int messageID, int userID ,int Score)
{
SQLCMD = new SqlCommand("MessageInfo_Add_VoteUsefull_MessageIDUserID", SQLConnect);
SQLCMD.CommandType = CommandType.StoredProcedure;
SQLCMD.Parameters.Add(new SqlParameter("@messageID",SqlDbType.Int));
SQLCMD.Parameters["@messageID"].Value = messageID;
SQLCMD.Parameters.Add(new SqlParameter("@userID",SqlDbType.Int));
SQLCMD.Parameters["@userID"].Value = userID;
SQLCMD.Parameters.Add(new SqlParameter("@Score", SqlDbType.Int));
SQLCMD.Parameters["@Score"].Value = Score;
float SuccessFlag = basicSQLAccess.ExeScalarReturnValueFloat(SQLCMD);
Hashtable HTFlag = new Hashtable();
HTFlag.Add("SuccessFlag", SuccessFlag);
return JsonConvert.SerializeObject(HTFlag);
}

有關JsonConvert.SerializeObject的內容介紹以及與前端Jquery互動 請看我之前的文章 <通過Jquery遍曆Json的兩種資料結構>
4:下載
壓縮包包括 css、JS、還有星星圖片
猛擊我下載