您的位置：首页 > 编程技术 > ASP.NET  >  Ajax实现评论中顶和踩功能的实例代码

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

 更新时间：2021年9月22日 10:15  点击：2061

效果大致如下：

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 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=https://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=https://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=https://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

[!--infotagslink--]

相关文章

  • PHP用strstr()函数阻止垃圾评论(通过判断a标记)

    strstr() 函数搜索一个字符串在另一个字符串中的第一次出现。该函数返回字符串的其余部分（从匹配点）。如果未找到所搜索的字符串，则返回 false。语法：strstr(string,search)参数string，必需。规定被搜索的字符串。 参数sea...2013-10-04

  • c# winform窗口一直置顶显示在桌面最上方或最底层的方法

    winform窗口一直置顶显示在桌面最上方,这样的功能真的很实用的，很多的软件窗口都有这样的功能，本文也来实现一个，感兴趣的你千万不要错过了，希望本文对你有所帮助...2020-06-25

  • python 爬取京东指定商品评论并进行情感分析

    本文主要讲述了利用Python网络爬虫对指定京东商城中指定商品下的用户评论进行爬取，对数据预处理操作后进行文本情感分析，感兴趣的朋友可以了解下...2021-05-28

  • springboot +redis 实现点赞、浏览、收藏、评论等数量的增减操作

    这篇文章主要介绍了springboot +redis 实现点赞、浏览、收藏、评论等数量的增减操作，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-15

  • Python爬虫实战之爬取携程评论

    今天带大家爬取携程评论练练手,文中有非常详细的代码示例,对正在学习python的小伙伴们很有帮助,需要的朋友可以参考下...2021-06-02

  • 帝国CMS调用最新最多评论文章

    /*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) 用灵动标签调用最新最多评论文章： [...2016-08-27

  • Android自定义RecyclerView Item头部悬浮吸顶

    这篇文章主要为大家详细介绍了Android自定义RecyclerView Item头部悬浮吸顶，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-25

  • python 爬取马蜂窝景点翻页文字评论的实现

    这篇文章主要介绍了python 爬取马蜂窝景点翻页文字评论的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-22

  • 用PHP来制作评论系统

    我们在实际做的过程中很是简单的，希望大家好好研究一下，给补充多点功能。本程序须在PHP and mySQL的环境下运行。有三个文件：comments.php, 是用来显示[评论的, commentad...2016-11-25

  • php无限级评论嵌套实例介绍

    无限级分类，让人兴奋但却又让人有些不知所措的数据结构。让人兴奋，是因为这种结构实在是太实用太方便了；让人不知所措，是因为这种结构的前台数据结构展现往往会在递归的时...2016-11-25

  • ajax php仿网易文章评论顶一下效果

    ajax php教程仿网易文章评论顶一下效果 <div class='plding fr'> <a href='action.php?id="1&action=top_num'>顶一下</a>[5] </div> js ajax <script language="网...2016-11-25

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

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

  • 在PHP站点的页面上添加Facebook评论插件的实例教程

    这篇文章主要介绍了在PHP站点的页面上添加Facebook评论插件的实例教程,这样用户便可以以Facebook的用户身份在Facebook样式的评论表单上发表评论,需要的朋友可以参考下...2016-01-12

  • apache下屏蔽福建莆田的垃圾评论并阻止访问

    2014年开年，我的小网站就被来自福建莆田的大量垃圾IP地址疯狂的刷站，每分钟几十次的流量，写入大量垃圾评论。查了一下网上的消息，很多小博客和论坛都被狂刷，而且都是来自福建莆田...2016-01-28

  • JavaScript直播评论发弹幕切图功能点集合效果代码

    这篇文章主要介绍了JavaScript直播评论发弹幕切图功能点集合效果代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-01

  • php　顶层类（自家用）

    <?php /** * Object * base class * @version 1.0.0 (Mon Aug 01 18:43:24 CST 2005) * @author sanshi */ class Object { /* 是否输出调试信息 */ var $d...2016-11-25

  • Yii实现文章列表置顶功能示例

    这篇文章主要介绍了Yii实现文章列表置顶功能,分析了文章置顶功能的实现步骤及相关代码操作技巧,需要的朋友可以参考下...2016-10-20

  • WordPress中限制非管理员用户在文章后只能评论一次

    这篇文章主要介绍了WordPress中限制非管理员用户在文章后只能评论一次的方法,同时介绍了判断用户是否为管理员的方法,需要的朋友可以参考下...2016-01-04

  • Yii实现单用户博客系统文章详情页插入评论表单的方法

    这篇文章主要介绍了Yii实现单用户博客系统文章详情页插入评论表单的方法,结合实例分析了Yii实现文章详情页评论表单功能的具体技巧,需要的朋友可以参考下...2015-12-31

  • 帝国CMS会员中心调用显示我的评论/我评论过的信息列表

    帝国CMS系统是有评论功能的，但是却没有查看我的评论功能，通过本教程就可以实现在会员中心调用显示我评论过的信息列表。一、会员中心首页使用以下代码调用也就是 /e/template/...2016-03-08