پیاده سازی Like ، DisLike با استفاده از Ajax درMVC

در این مقاله قصد داریم با استفاده از Ajax ، کاربر،یک پیام را بدون لاگین شدن و با استفاده از IP بتواند لایک و یا دیس لایک کند را در MVC آموزش دهیم .

پیاده سازی Like ، DisLike  با استفاده از Ajax درMVC

برای شروع یک  بانک اطلاعاتی به نام   CMS_DB که حاوی دو جدول  به نام Like و News  را ایجاد میکنیم

حال ویژوال استادیو را باز کرده ویک پروژه از نوع MVC  ایجاد میکنیم

حال وقت اضاضه کردن بانک اطلاعاتی از طریق ADO.Net.Entity.Net  به برنامه است

برای اضافه کردن Entity در قسمت Model  راست کلیک کرده ودر قسمت Add>NewIitem>ADO.Net.Entity.Data.Model را انتخاب میکینم.

در این مرحله اسم مدل را مینوسیم

و سپس  در صفحه ای  که باز شده است   روی گزینه NewConection کلیک کنید

 

حال در این مرحله بایستی بانک اطلاعاتی خود را به برنامه اضافه کنید اگر به امکانات این صفحه آشنایی ندارید اینجا کلیک کنید

 

همان طور که از تصویر معلوم است روی  Controller. راست کلیک کرده وAddرا میزنیم و       Controller.  از نوع    Controller with views, using Entity Framework. MVC 5     از نوع News  ایجاد میکنیم

و حال از برنامه اجرا گرفته و   به ایجاد چند  اخبار میپردازیم

 

 

حال یک کنترلر از نوع  Empty  به نام LikeAndDisLikes ایجاد میکنیم   و یک متد Index  در آن ایجاد میکنیم

  public ActionResult Index()
        {
         
   
            return View(db.News.ToList());

     
        }

 

حال یک متد برای بدست آوردن IP و یک متد برای بررسی آن که این IP  در بانک ذخیره شده است یا نه و یک متد  از نوع bool  برای بررسی صحت بررسی IP مینویسیم

  #region Check Users IP
        /// <summary>
        /// چک کردن IP کاربر
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>


        private bool User_Validate(int id)
        {

            return (Get_User_Ip_Db(id) == Get_User_Ip()) ? false : true;

        }

        private string Get_User_Ip()
        {
            if (Request.ServerVariables["HTTP_X_FORWARDED_FOR"] != null)
            {
                return Request.ServerVariables["HTTP_X_FORWARDED_FOR"];
            }
            else
            {
                return Request.ServerVariables["REMOTE_ADDR"];

            }
        }

        private string Get_User_Ip_Db(int id)
        {
            if (db.Likes.Any(m => m.NewsID == id))
            {
                var ip = db.Likes.First(m => m.NewsID == id).UserIP;
                return ip;
            }

            else
            {
                News news = db.News.Find(id);



                Models.Likes likes = new Likes()
                {
                    Date = DateTime.Now,
                    NewsID = id,
                    UserIP = Get_User_Ip(),

                };
                db.Likes.Add(likes);

                db.SaveChanges();

            }
            return "";
        }
        #endregion

 

حال یک متد برای ثبت Like  ویک متد هم برای ثبت DisLike  مینویسیم

 public ActionResult Likes(int id)
        {
            if (!User_Validate(id))
            {
                
                ViewBag.Message = "<script> humane.log('شما قبلا رای داده اید  ')</script>";
                return View("Index", db.News.ToList());
            }

            else
            {
                News news = db.News.Find(id);
                news.Likes++;
                db.SaveChanges();
                return RedirectToAction("Index", db.News.ToList());

            }



        }
        public ActionResult DisLikes(int id)
        {
            if (!User_Validate(id))
            {

                ViewBag.Message = "<script> humane.log('شما قبلا رای داده اید  ')</script>";
                return View("Index", db.News.ToList());
            }

            else
            {
                News news = db.News.Find(id);
                news.dislike++;
                db.SaveChanges();
                return RedirectToAction("Index", db.News.ToList());

            }



        }

همان طور مشاهده میکنید ابتدا بررسی میکنیم که کابری با IP مشابه وجود دارد یا نه

 

حال از متد Index یک view  ایجاد میکنیم

@model IEnumerable<WebApplication2.Models.News>

@{
    ViewBag.Title = "Index";
}

<div id="bodymodal" style="margin-top: 30px">


    @foreach (var item in Model)
    {

        <div class="panel panel-success" style="direction: rtl">
            <div class="panel-heading">
                <h3 class="panel-title">نظرات </h3>
            </div>
            <div class="panel-body">
                <div class="media">

                    <div class="media-left"> <a href="#">
                         <img alt="64x64" data-src="holder.js/64x64" class="media-object" style="width: 64px; height: 64px;" src="~/index.jpg" data-holder-rendered="true">
                        </a>
                    </div>
                    <div class="media-body">
                    @item.Title
                        <h4 class="media-heading">
                            <a  onclick="Like(@item.NewsID) "> <img src="/Untitled-1.png"  />   </a>
                           
                          
                            <label>@item.Likes</label>
                            <a onclick="DisLikes(@item.NewsID) ">
                                <img src="~/Untitled2-1.png" /></a>

                            <label>@item.dislike</label>

                        </h4>
                    </div> </div>

            </div>
        </div>
    }


</div>

<script>
    function Like(id) {
        $.ajax({
            type: "GET",
            url: "/LikeAndDisLikes/Likes/" + id,

            success: function(data) {
                $("#bodymodal").html(data);

            }
        });
    }

    function DisLikes(id) {
        $.ajax({
            type: "GET",
            url: "/LikeAndDisLikes/DisLikes/" + id,

            success: function(data) {
                $("#bodymodal").html(data);

            }
        });
    }
</script>

@section scripts
{
    <link href="~/Scripts/humane_js_themes/jackedup.css" rel="stylesheet" />
@if (ViewBag.Message != null)
{

    @Html.Raw(ViewBag.Message)
}



}

 

حال از برنامه اجرا بگیرید

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید
دانلود نسخه ی PDF این مطلب