Home > Web Front-end > JS Tutorial > jQuery implements simple like effect_jquery

jQuery implements simple like effect_jquery

WBOY
Release: 2016-05-16 15:21:51
Original
1204 people have browsed it

The example in this article explains the detailed code of jQuery to achieve a simple like effect. The specific content is as follows

Rendering:

The following provides an example code for "like", implemented with 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; } 
 } 
} 
Copy after login

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//获取/Home/Index 
  }; 
  $("#addnum").click(function () { 
   $.ajax({ 
    type: 'POST', 
    url: '/Home/ClickGood', 
    data: obj, 
    success: function (data) { 
     $("#lblnum").text(data.Num); 
     //其它操作,比如每个登录用户只能点一次,按钮禁用等 
    } 
   }); 
  }); 
 }); 
</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;"> 
   顶</label></div> 
 <div align="center"> 
  <label id="lblnum" style="color: White; font-size: 10pt;"> 
   @Model.Num</label></div> 
</div> 
Copy after login

Controller:

namespace MvcAjaxAdd.Controllers 
{ 
 public class HomeController : Controller 
 { 
  private ClickCountContext db = new ClickCountContext(); 
 
  public ActionResult Index() 
  { 
   ClickCountModel ClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == "/"); 
   return View(ClickCountModel); 
  } 
 
  [HttpPost] 
  public JsonResult ClickGood(ClickCountModel ClickCountModel) 
  { 
   ClickCountModel newClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == ClickCountModel.URL); 
   newClickCountModel.Num++;//数量+1 
   db.SaveChanges(); 
   return Json(newClickCountModel); 
  } 
 } 
} 
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning jquery programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template