首页 / 脚本样式 / JavaScript / jQuery实现简单的点赞效果

下面提供一个"点赞"的实例代码，用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; }} } 

@{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> 

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++;//数量+1db.SaveChanges（）;return Json（newClickCountModel）; }} }