JQuery implements simple thumb ups.

JQuery implements simple thumb ups.

This document describes the code for jQuery to implement simple thumb ups. The specific content is as follows:

:

The following provides an example code for "Thumb ups", which is implemented using ASP. NET MVC4 + jQuery Ajax.
Model:

namespace MvcAjaxAdd.Models {  public class ClickCountModel  {   [Key]   [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)]   public int ID { get; set; }    public string URL { get; set; }    public int? Num { get; set; }  } } 

View:

@ {ViewBag. Title = "Index" ;}@ model MvcAjaxAdd. Models. ClickCountModel <script src = "~ /Scripts/jquery-1.7.1.js "type =" text/javascript "> </script> <script type =" text/javascript "> $ (function () {var obj = {"num": $ ("# lblnum "). text (), "url": window. location. pathname // get/Home/Index}; $ ("# addnum "). click (function () {$. ajax ({type: 'post', url: '/Home/ClickGood', data: obj, success: function (data) {$ ("# lblnum "). text (data. num); // other operations, for example, each login user can only click once, and the button is disabled }});});}); </script> <div id = "addnum" style = "width: 70px; height: 70px; background-color: # FF9900 "> <div align =" center "style =" margin-top: 10px; "> <label style =" color: White; font-size: 20pt; "> top </label> </div> <div align =" center "> <label id =" lblnum "style =" color: White; font-size: 10pt; "> @ Model. num </label> </div>

Controller:

Namespace MvcAjaxAdd. controllers {public class HomeController: Controller {private ClickCountContext db = new ClickCountContext (); public ActionResult Index () {ClickCountModel = db. clickCountModels. firstOrDefault (x => x. URL = "/"); return View (ClickCountModel);} [HttpPost] public JsonResult ClickGood (ClickCountModel) {ClickCountModel newClickCountModel = db. clickCountModels. firstOrDefault (x => x. URL = ClickCountModel. URL); newClickCountModel. num ++; // number + 1 db. saveChanges (); return Json (newClickCountModel );}}}

The above is all the content of this article, and I hope it will help you learn jquery programming.

Articles you may be interested in:

• JQuery's simple implementation of QQ space thumb ups has been canceled
• JQuery-implemented likes to display animation effects with random numbers (with online demonstration and demo source code download)
• Image thumb up + 1 animation effect implemented by jQuery (with Online demo and demo source code download)
• Analysis of super simple thumb ups implemented by jQuery
• JQuery + ajax
• Php + jQuery + Ajax method for implementing the thumb up effect (with source code download)