Ajax实现评论中顶和踩功能的实例代码
效果大致如下：
javascript这块使用jquery。新建一个asp.net web项目，使用nuget获取jquery最新版。
数据库方面使用nhibernate，用install-package nhibernate引用。
数据库是用的postgresql，install-package npgsql把驱动装上。我这里偷个懒，数据库名，用户名和密码都是ajaxdemo了。
创建数据库：
create database "ajaxdemo"
with owner = "ajaxdemo"
encoding = 'utf8'
tablespace = pg_default
lc_collate = 'chinese (simplified)_people''s *.936'
lc_ctype = 'chinese (simplified)_people''s *.936'
connection limit = -1;
nhiberate配置文件：
<?xml version="1.0" encoding="utf-8"?>
<hibernate-configuration xmlns="urn:nhibernate-configuration-2.2" >
<session-factory>
<property name="connection.driver_class">nhibernate.driver.npgsqldriver</property>
<property name="connection.connection_string">
server=localhost;database=ajaxdemo;user id=ajaxdemo;password=ajaxdemo;
</property>
<property name="dialect">nhibernate.dialect.postgresqldialect</property>
<mapping assembly="ajaxdemo"></mapping>
</session-factory>
</hibernate-configuration>
顺带说一句nhiberate的配置模板是错的，改initial catalog为database。
我没有使用nhiberate的一对多映射（主要是觉得用不上），实体类有两个info和review。
using system;
using system.collections.generic;
using system.linq;
using system.web;
using iesi.collections.generic;
namespace ajaxdemo.modal
{
public class info
{
public virtual int id { get; set; }
public virtual string content { get; set; }
}
}
using system;
using system.collections.generic;
using system.linq;
using system.web;
namespace ajaxdemo.modal
{
public class review
{
public virtual int id { get; set; }
public virtual int infoid { get; set; }
public virtual string content { get; set; }
public virtual int support { get; set; }
public virtual int opposition { get; set; }
}
}
业务层是对应的代码就不贴了。主要就是添加和修改功能。
准备工作到此基本完成了，现在来实现我们所需要的功能。
ajax最大的特点是可以仅向服务器发送并取回必需的数据，它使用soap或其它一些基于xml或json的页面服务接口，并在客户端采用javascript处理来自服务器的响应。因为服务器和客户端之间的数据交换的数据大量减少，结果我们就能看到回应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以web服务器的处理时间也减少了。
也就是我们需要两个部分的东西：
1.客户端的处理，基于jquery
2.服务器端的处理，我选用的一般处理程序（ashx），因为返回的数据很简单，所以没有xml和json。
先来看服务端，我们需要获取用户顶或踩的是哪条评论，所以需要id，顶和踩的处理我写在一起，所以还需要一个参数来区分。
获取到两个参数以后先根据state判断是踩还是顶，然后更新相应条目，服务端返回一个代表当前对应数目的数字。
changestate.ashx：
using system;
using system.collections.generic;
using system.linq;
using system.web;
using ajaxdemo.bll;
using ajaxdemo.modal;
namespace ajaxdemo.ajax
{
/// <summary>
/// 返回更新以后的数目
/// </summary>
public class changestate : ihttphandler
{
public void processrequest(httpcontext context)
{
int state = int.parse(context.request.querystring["state"]);
int id=int.parse(context.request.querystring["id"]);
reviewservice rs = new reviewservice();
review r;
switch (state)
{
case 0:
r=rs.updatesupport(id);
context.response.write(r.support);
break;
case 1:
r = rs.updateopposition(id);
context.response.write(r.opposition);
break;
}
}
public bool isreusable
{
get
{
return false;
}
}
}
}
再说客服端，因为用的jquery，活就很少了。使用的$.get方法。
先请求服务端，传入两个参数：state和id，收到服务端数据后更改状态。
主要代码：
function change(id, state) {
$.get("./ajax/changestate.ashx", { id: id, state: state }, function (data, textstatus) {
if (textstatus == "success") {
switch (state) {
case 0:
$("#support" + id).text("顶（" + data + ") ");
break;
case 1:
$("#opposition" + id).text("踩（" + data + ") ");
break;
}
}
});
}
页面代码：
<%@ page language="c#" autoeventwireup="true" codebehind="viewdetail.aspx.cs" inherits="ajaxdemo.viewdetail" %>
<!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">
<script src=//www.jb51.net/htynkn/archive/2012/01/31/"scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function change(id, state) {
$.get("./ajax/changestate.ashx", { id: id, state: state }, function (data, textstatus) {
if (textstatus == "success") {
switch (state) {
case 0:
$("#support" + id).text("顶（" + data + ") ");
break;
case 1:
$("#opposition" + id).text("踩（" + data + ") ");
break;
}
}
});
}
</script>
</head>
<body>
<form id="baseform" runat="server">
<div id="infodetail">
<h4>标题</h4>
<h1>
<asp:label id="infocontent" runat="server" text=""></asp:label></h1>
</div>
<div id="reviews">
<h4>评论</h4>
<asp:repeater id="reviewlist" runat="server">
<headertemplate><ul></headertemplate>
<footertemplate></ul></footertemplate>
<itemtemplate><li><%# databinder.eval(container.dataitem, "content") %></li>
<div>
<a onclick="change(<%# databinder.eval(container.dataitem, "id")%>,0)" id="support<%# databinder.eval(container.dataitem, "id")%>" href=//www.jb51.net/htynkn/archive/2012/01/31/"#">顶（<%# databinder.eval(container.dataitem, "support") %>）</a>
<a onclick="change(<%# databinder.eval(container.dataitem, "id")%>,1)" id="opposition<%# databinder.eval(container.dataitem, "id")%>" href=//www.jb51.net/htynkn/archive/2012/01/31/"#">踩（<%# databinder.eval(container.dataitem, "opposition")%>）</a>
</div>
</itemtemplate>
</asp:repeater>
</div>
</form>
</body>
</html>
效果：
写在最后：
1.这篇文章主要是写一点大致做法，不完整也不全面。很多错误什么的都没有处理，也没有对细节进行考究。
2.服务端也可以用webthod，特别是修改现有项目的时候，直接将方法保留给客服端javascript调用就行了。我比较疑惑ashx和webmethod到底哪个好些。
3.单元测试那个纯粹是为了方便…不要喷哈
4.nhiberate的配置模板…我最开始为此纠结了很久…
5.相关库和软件的版本：iesi.collection 3.2.0.4000 jquery 1.7.1 nhiberate 3.2.0.4000 npgsql 2.0.11 nunit 2.5.10.11092
下一篇： 浅谈SpringBoot优化技巧