Ajax实现评论的顶和踩功能

长平狐 发布于 2013/11/25 11:38
阅读 263
收藏 0

这算是社团布置的一个假期小作业吧,我只是提出我自己的解决方案,不一定是最合适的。

效果大致如下:

2

javascript这块使用jquery。新建一个Asp.net web项目,使用NuGet获取Jquery最新版。

ajaxDemo1

数据库方面使用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 Republic of China.936'
LC_CTYPE = 'Chinese (Simplified)_People''s Republic of China.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= " 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= " # ">顶(<%# DataBinder.Eval(Container.DataItem, " Support ") %>)</a> <a onclick= " change(<%# DataBinder.Eval(Container.DataItem, "Id " )%>,1) " id= " Opposition<%# DataBinder.Eval(Container.DataItem, "Id " )%> " href= " # ">踩(<%# DataBinder.Eval(Container.DataItem, " Opposition ")%>)</a> </div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>



效果:

ajaxDemo2

 

附上Demo下载地址:

http://www.ctdisk.com/file/4414932

 

写在最后:

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


原文链接:http://www.cnblogs.com/htynkn/archive/2012/01/31/ajax_for_comment.html
加载中
返回顶部
顶部