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)