Ajax实现评论中顶和踩功能的实例代码

时间:2021-12-22 08:06:18

效果大致如下:

Ajax实现评论中顶和踩功能的实例代码

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

Ajax实现评论中顶和踩功能的实例代码

数据库方面使用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.zzvips.com/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.zzvips.com/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.zzvips.com/htynkn/archive/2012/01/31/"#">踩(<%# DataBinder.Eval(Container.DataItem, "Opposition")%>)</a>

</div>
        </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

 

效果:

Ajax实现评论中顶和踩功能的实例代码

 

写在最后:

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