Ajax implementation of comments and top and step functions based on jquery

This is a community arrangement of a holiday small homework, I just put forward my own solution, not necessarily the most appropriate.

The effect is roughly as follows:

Photo sharing:

This piece of JavaScript uses jquery. Create a new ASP.net Web project and use NuGet to get the latest version of jquery.

Photo sharing:

Database uses NHibernate, Install-package nhibernate references.

The database is used by the Postgresql,install-package Npgsql to put the drive on. I steal a lazy here, the database name, username and password are all Ajaxdemo.

To create a database:

The code is as follows	Copy Code
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 configuration file:

The code is as follows

Copy Code

<?xml version= "1.0" encoding= "Utf-8"?> <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>

Incidentally say a nhiberate configuration template is wrong, change initial catalog for database.

I don't use a one-to-many map of nhiberate (mostly I don't think it is), and the entity class has two info and review.

The code is as follows

Copy Code

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;} } }

The business layer is the corresponding code will not be posted. The main thing is to add and modify features.

The preparation work is basically done, now to achieve the functionality we need.

The biggest feature of Ajax is that it can send and retrieve only the necessary data to the server, using SOAP or some other xml-based or JSON page service interface, and using JavaScript on the client to handle the response from the server. Because the data exchanged between the server and the client is much reduced, the result is that we can see the application that responds faster. At the same time, a lot of processing work can be done on the requesting client machine, so the Web server has less processing time.

Which is what we need in two parts:

1. Client-side processing, based on jquery

2. Server-side processing, I chose the general handler (ASHX), because the returned data is very simple, so there is no XML and JSON.

First look at the service side, we need to get the user top or step on which comment, so need ID, top and step on the processing I write together, so also need a parameter to distinguish.

After obtaining two parameters, the state is judged by the state to be a step or a top, then the corresponding entry is updated, and the server returns a number representing the current corresponding number.

The code is as follows

Copy Code

CHANGESTATE.ASHX: Using System; Using System.Collections.Generic; Using System.Linq; Using System.Web; Using AJAXDEMO.BLL; Using Ajaxdemo.modal; Namespace Ajaxdemo.ajax { <summary> Returns the number after the update </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; } } } }

And the customer service side, because of the use of jquery, live very little. The $.get method used.

Request the server first, pass in two parameters: state and ID, and change the status after receiving the server data.

Main code:

The code is as follows	Copy Code
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 ("Top (" + Data +) "); Break Case 1: $ ("#Opposition" + ID). Text ("Step (+ Data +)"); Break } } }); }

Page code:

The code is as follows

Copy Code

<%@ 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 "> <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 ("Top (" + Data +) "); Break Case 1: $ ("#Opposition" + ID). Text ("Step (+ Data +)"); Break } } }); } </script> <body> <form id= "BaseForm" runat= "Server" > <div id= "Infodetail" > <asp:label id= "infocontent" runat= "Server" text= "" ></asp:Label></div> <div id= "Reviews" > <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=" # "> Top (<%# databinder.eval (Container.DataItem," Support ")%>) </a > <a onclick= "Change" (<%# DataBinder.Eval (Container.DataItem, "Id")%>,1) "Id=" opposition<%# DataBinder.Eval (Container.DataItem, "Id")%> "href=" # "> Step (<%#, DataBinder.Eval Container.DataItem," Opposition ")%> </a> </div> </ItemTemplate> </asp:Repeater> </div> </form> </body>

Effect:

Photo sharing: