AjaxPro2.0+jQuery+C#实现文章系统中的顶一下、踩一下的代码开发

AjaxPro2.0+jQuery+C#实现文章系统中的顶一下、踩一下的代码开发

一、前提：AjaxPro2.0（我一直采用，很好用）

jQuery1.3（我用的是jquery-1.3.2.min.js，jquery.cookie.js）

Asp.net 2.0（C#后台）

二、效果：页面无刷新，采用Cookie防重发提交。效果图：



三、实现方法：（直接代码，需要解释的地方参照注释说明）

1、web页面代码：

-------------------------------------------

<div class="newdigg">
<div id="divtrample" class="diggbox digg_good" onmousemove="this.style.backgroundPosition='left bottom';" onmouseout="this.style.backgroundPosition='left top';">
<div class="digg_act">顶一下</div>
<div class="digg_num"><span id="spantramplenum">(<%=trampleNum %>)</span></div>
<div class="digg_percent">
<div class="digg_percent_bar"><span id="spantramplebar" style="width:<%=m_TramplePer %>"></span></div>
<div class="digg_percent_num"><span id="spantrampleper"><%=m_TramplePer %></span></div>
</div>
</div>
<div id="divpeak" class="diggbox digg_bad" onmousemove="this.style.backgroundPosition='right bottom';" onmouseout="this.style.backgroundPosition='right top';">
<div class="digg_act">踩一下</div>
<div class="digg_num"><span id="spanpeaknum">(<%=peakNum %>)</span></div>
<div class="digg_percent">
<div class="digg_percent_bar"><span id="spanpeakbar" style="width:<%=m_PeakPer %>"></span></div>
<div class="digg_percent_num"><span id="spanpeakper"><%=m_PeakPer %></span></div>
</div>
</div>
</div>

----------------------------------------------

2、相关css及图片资源：

----------------------------------------------

/* trample and peak */
.left .articlemain .newdigg{width:406px;height:51px;margin:8px auto;clear:both;overflow:hidden;padding-left:8px;}
.newdigg .digg_good{background:url(Images/newdigg_bg.png) left top no-repeat;}
.newdigg .digg_bad{background:url(Images/newdigg_bg.png) right top no-repeat;}
.newdigg .digg_good .digg_act{color:#c30;}
.newdigg .digg_good .digg_num{color:#c63;}
.newdigg .digg_bad .digg_act{color:#36c;}
.newdigg .digg_bad .digg_num{color:#39c;}
.newdigg .digg_good .digg_percent .digg_percent_bar span{border:1px solid #e37f24;background:#ffc535;}
.newdigg .digg_bad .digg_percent .digg_percent_bar span{border:1px solid #689acc;background:#94c0e4;}

.left .articlemain .diggbox{width:195px;height:51px;float:left;margin-right:8px;overflow:hidden;cursor:pointer;}
.diggbox .digg_act{font-size:14px;float:left;line-height:31px;text-indent:32px;height:29px;overflow:hidden;font-weight:bold;}
.diggbox .digg_num{float:left;line-height:29px;text-indent:5px;}
.diggbox .digg_percent{width:180px;clear:both;padding-left:10px;overflow:hidden;}
.diggbox .digg_percent .digg_percent_bar{width:100px;height:7px;background:#E8E8E8;border-right:1px solid #CCC;float:left;overflow:hidden;margin-top:3px;}
.diggbox .digg_percent .digg_percent_num{font-size:10px;float:left;padding-left:10px;}
.diggbox .digg_percent .digg_percent_bar span{display:block;height:5px;overflow:hidden;background:#000;}

-------------------------------------------------------


（newdigg_bg.png）

3、JavaScript代码：

--------------------------------------------------------

(1)、引用的js文件：jquery-1.3.2.min.js，jquery.cookie.js

(2)、JavaScript片段：

//解决jQuery库与其他JS库冲突
var easysale = jQuery.noConflict();

easysale(function() {
var aid = <%=m_ArticleID %>;
easysale("#divtrample").click(function() {
if (easysale.cookie("ip" + aid) == null || easysale.cookie("ip" + aid) != "<%=Onenet.Common.WebRequests.GetIP()%>|" + aid){

//注意此处：AjaxPro调用的方法，需结合下面的后台cs源码；
var result = Onenet.AppWeb.UserControls.ArticleShow.ArticleTrample(parseInt(aid));
//分割result的值；
var retitem = result.value.split("|");
//输出<span>的内容；

document.getElementById("spantramplenum").innerHTML = "("+retitem[0]+")";
document.getElementById("spantramplebar").style.width = retitem[1];
document.getElementById("spantrampleper").innerHTML = retitem[1];
document.getElementById("spanpeaknum").innerHTML = "("+retitem[2]+")";
document.getElementById("spanpeakbar").style.width = retitem[3];
document.getElementById("spanpeakper").innerHTML = retitem[3];
} else {
alert("您已经顶过该文章，请不要重复操作！");
}
});

......//踩一下的思路同上，此处省略

});
</script>

---------------------------------------------------------

4、页面的cs代码(注意加粗的红色内容)：

----------------------------------------------------------

(1)、注册AjaxPro框架 ：

//注册AjaxPro框架；
AjaxPro.Utility.RegisterTypeForAjax(typeof(ArticleShow));

(2)、AjaxPro实现部分：

#region 资讯文章顶一下、踩一下操作
/// <summary>
/// 资讯文章顶一下操作
/// </summary>
/// <param name="articleID"></param>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string ArticleTrample(int articleID)
{
int tramplenum = 0;
int peaknum = 0;
string retVal = "0|0%|0|0%";

(new ArticleFacade()).SetArticleInfo("TRAMPLE", articleID, "");
CookieHelper.WriteCookie("ip" + articleID, WebRequests.GetIP() + "|" + articleID, 1);

ArticleData data = (new ArticleFacade()).GetArticleByListType(1, 0, 0, 0, articleID);
if (data.Tables[ArticleData.Article_Table].Rows.Count > 0)
{
DataRow row = data.Tables[ArticleData.Article_Table].Rows[0];
tramplenum = int.Parse(row[ArticleData.TrampleNum_Field].ToString());
peaknum = int.Parse(row[ArticleData.PeakNum_Field].ToString());
}

retVal = string.Format("{0}|{1}%|{2}|{3}%",
tramplenum.ToString(),
(Math.Round((double)((tramplenum * 100) / (tramplenum + peaknum)), 0)).ToString(),
peaknum.ToString(),
(Math.Round((double)((peaknum * 100) / (tramplenum + peaknum)), 0)).ToString());

return retVal;
}

#endregion

关于Cookie的读写操作就很简单了，此处就省略了，如需要请联系我。

至此，页面实现部分的代码均已完成。

四、数据字段及存储过程：

由于我采用的是：数据实体层、数据访问层、业务逻辑层、业务实现层和web表现层的多层架构方式，因此中间用到的调用这些层的方法也一并省略了。其实采用三层结构或者直接使用SQL语句调用都可以，将数据从库中取出并完成CRUD的操作原理都是一样的，只是在表现上的手段不同而已。

用到的表：Article，该表有两个与之相关的字段：TrampleNum和PeakNum。

存储过程sp_SetArticleInfo中与之相关的部分脚本：

if (@OptionType = 'ADDNUM')
UPDATE Article SET ReadNum = ReadNum + 1 WHERE (ArticleID = @ArticleID)

if (@OptionType = 'TRAMPLE')
UPDATE Article SET TrampleNum = TrampleNum + 1 WHERE (ArticleID = @ArticleID)

五、说明：

关于不同浏览器顶和踩操作的Cookie问题：ie（6、7、8）以及以ie为内核的浏览器如360浏览器、搜狗浏览器、遨游浏览器等和FireFox浏览器中分别记录着各自的Cookie，这样会导致利用不同的浏览器分别进行顶和踩的操作，前台都无法实现有效的判断。

欢迎访问：http://www.521189.com (521联合供货网)

QQ：863858965

email：qifl23702570@163.com