آموزش کامل ایجاد سیستم like مطالب با ASP.NET و AJAX

دسته بندی: جاوا اسکریپت
زمان مطالعه: 7 دقیقه
۱۲ مرداد ۱۳۹۲

دوستان سلام، ما توی قسمت های قبلی،سیستم لایک خودمون رو به دلیل اینکه سایت ما بر پایه  آموزش های مبتنی بر PHP کار میکنه و پیش میره برای این پلتفرم نوشتیم ،اما خوب یه عده از کاربران سایت رو دوستان ASP کار ما تشکیل میدن و ما هم به رسم ادب و احترام به این دوستان، تصمیم گرفتیم هم این اسکریپت لایک رو و هم انشاالله اسکریپت های بعدی رو با ASP.NET هم آموزش بدیم،قول این رو به چند نفر از دوستان داده بودیم پس وفای به عهد میکنیم و این کارو انجام میدیم.

کد های HTML,CSS ما همون کد های سیستم PHP هست و فرقی نمیکنه،برای قسمت جاوااسکریپت من تصمیم گرفتم برای سیستم ASP از AJAX Jquery استفاده کنم،فقط خواستم شما با نحوه کارش آشنایی پیدا کنید،انشالله توی جی کوئری" href="https://7learn.com/video-tutorial-series/jquery-video-training-serie" target="_blank" rel="noopener">سری آموزشی جی کوئری یا جاوا اسکریپت" href="https://7learn.com/video-tutorial-series/js-video-series" target="_blank" rel="noopener">سری آموزشی جاوااسکریپت حتما مفصل بهش پرداخته میشه.

توضیحات اصلی

ما این جا یا صفحه های aspx سرو کار داریم،توی این قسمت ما دو تا صفحه در نظر گرفتیم صفحه Default.aspx که کد HTML اصلی رو در بر داره و صفحه ajx.aspx که وظیفه رسیدگی به درخواست های ای جکس مارو،توی PHP ما یه کلاس برای کار با بانک نوشته بودیم این جا هم ما دقیقا یه کلاس برای کار با بانک نوشتیم (شامل اتصال،قطع اتصال و متد های برای اجرای کوئری ها و متد هایی برای دریافت مقادیر از بانک).توی پوشه App_Code یه فایل هست به اسم DAL.cs که همین کلاس بانک مارو در بر داره،اسمش هم برای این DAL گذاشتیم چون توی برنامه نویسی 3 لایه ای (منظورم MVC الان نیست ها!) برای کار با بانک اطلاعات داریم،DAL یعنی Data Access Layer خوب یعنی لایه دسترسی به داده.

برای شروع میریم سراغ قسمت JS.

قسمت showlike

$('.like-btn').hover(function(){

var id=$(this).attr('data');

ajax('showlike',this,id);

$(this).next().fadeIn(300);

},function(){

$(this).next().fadeOut(300);

});

خوب میبینید که همون تابع قبلیه فقط یه تابع جدبد به اسم ajax توش فراخوانی شده،بعدا میرسیم به تعریف تابع ajax فقط خوب ببینید ما به عنوان پارامتر چیا فرستادیم برای همین تابع ajax.

قسمت showdislike

$('.dislike-btn').hover(function(){

var id=$(this).attr('data');

ajax('showdislike',this,id);

$(this).next().fadeIn(300);

},function(){

$(this).next().fadeOut(300);

});

خوب اینم دقیقا مثل همون بالاییه.

قسمت ثبت لایک برای دکمه سبز

$('.like-btn').click(function(){

$(this).next().html('<img src="img/loader.gif" style="width:16px;height:16px;">').css({'display':'block'});

var id=$(this).attr('data');

ajax('updatelike',null,id);

});

این جا همفرقش اینه که  فقط همون تابع ajax رو فراخوانی کردیم.

قسمت ثبت لایک برا دکمه قرمز

$('.dislike-btn').click(function(){

$(this).next().html('<img src="img/loader.gif" style="width:16px;height:16px;">').css({'display':'block'});

var id=$(this).attr('data');

ajax('updatedislike',null,id);

});

اینم توضیح خاصی نداره دیگه.

تابع ajax

function ajax(func,el,id)
{
$.ajax({

type:"GET",
url:"ajx.aspx",
data:"func="+func+"&id="+id,
success:function(data){
if(func=='showlike' || func=='showdislike')
{
$(el).next().html(data);
}
else if(func=='updatelike' || func=='updatedislike')
{

alert(data);
}
}
});
}

رسیدم جاهای خوب داستان،سه تابع پارامتری که گرفتیم اول اسم تابعی که قراره بره توی فایل ajx.aspx برای پردازش،بعدش عنصری که این تابع رو فراخوانی کرده،بعدیش هم ID مطلب مورد نظر،بعدش ما بوسیله jquery درخواست ایجکس خودمون رو پیاده کردیم،با ajax.$ تعریفش میکینم و پرارمتر های لازم رو بهش میدیم،با type متد ارسال داده ها رو مشخص میکنیم (توی فایل ajx.aspx بوسیله کوئری استرینگ مقادیر این نوع ارسال رو دریافت میکنیم)،بعدش url که آردس فایلی که اطلاعات باید برون اونجا رو مشخص میکنه،بعدش data که اطلاعاتی رو که باید بره مشخص میکنه (اگه توجه کنید مقدار جلوی data رو به صورت کوئری استرینگ نوشتیم)،مقدار success با تابع جلوش مشخص میکنه اگه اطلاعات با موفقیت رفت و برگشت چیکار بکنیم (می تونیم error رو هم تعریف کنیم که من تعریف نکردم)،توی تابع جلوی success نوشتیم اگه مقدار func که تابع ajax دریافت کرده بود showlike یا showdislike بود،اطلاعات برگشتی رو بذار توی همون تگ span (برای همین بود که ما اون عنصری که تابع رو فراخوانی کردهبود بهش پاس دادیم)،اگر هم مقدار func ما updatelike یا updatedislike بود فقط اونو به صورت پیغام نشون بده.

خوب بریم سروقت قسمت کدهای ASP.NET .

اول از همه توی تابع (زیرروال) Page_Load مقداری کوئری استرینگ هامون رو دریافت کردیم.

protected void Page_Load(object sender, EventArgs e)
{

string func = Request.QueryString["func"].ToString();
int id = Convert.ToInt16(Request.QueryString["id"].ToString());

switch (func)
{
case "updatelike": updatelike(id);
break;
case "updatedislike": updatedislike(id);
break;
case "showlike": showlike(id);
break;
case "showdislike": showdislike(id);
break;
default:
break;
}

}

هم func و هم id رو گذاشتیم توی دو تا متغییر،بعدش دقیقا مثل قسمت PHPیه دستور switch تعریف کردیم برای حالت های مختلف و گفتیم برای هر مقدار تابع مورد نظر رو فراخوانی کن،برای هر تابع هم id مطلب رو براش فرستادیم.

تابع showlike در ASP.NET

private void showlike(int id)
{
DAL data = new DAL();
data.connect();
string sql = "SELECT up FROM posts WHERE id={0}";
sql = string.Format(sql, id);
int up = data.GetOneInt(sql);
data.disconnect();
Response.Write(up);

}

خوب دوستان ما این جا از همون کلاس DAL یه نمونه ساختیم و با متد connect به دیتابیس وصل شدیم،بعدش یه کوئری ساختیم و با متد format از کلاس string اون رو قالب بندی کردیم (یعنی به جای اون {0} مقدار id رو گذاشتیم،این روش خوبیه برای نوشتم کوئری های SQL)،بعدش ما با متد GetOneInt همون مقدار up رو از جدول post دریافت کردیم و ارتباط دیتابیس رو قطع کردیم بعدش  با دستور Response.Write (مثل همون echo توی PHP عمل میکنه) مقدار up برگردوندیم(توی خروجی نوشتیم).

تابع showdislike در ASP.NET

private void showdislike(int id)
{
DAL data = new DAL();
data.connect();
string sql = "SELECT down FROM posts WHERE id={0}";
sql = string.Format(sql, id);
int down = data.GetOneInt(sql);
data.disconnect();
Response.Write(down);

}

دقیقا شبیه همون بالاست فقط ما به جای up باید down رو دریافت کنیم.

تابع ثبت لایک مثبت در ASP.NET

private void updatelike(int id)
{
if(!User_Validate(id))
{
Response.Write("رای شما قبلا برای این مطلب ثبت شده است");
return;
}
DAL data = new DAL();
data.connect();
string sql = "SELECT up FROM posts WHERE id={0}";
sql = string.Format(sql, id);
int up = data.GetOneInt(sql);
sql = "UPDATE posts SET up={0} WHERE id={1}";
sql = string.Format(sql,++up,id);
data.docommand(sql);
sql = "INSERT INTO likes (p_id,ip,date) VALUES('{0}','{1}','{2}')";
sql = string.Format(sql,id,Get_User_Ip(),DateTime.Now.ToLongDateString());
data.docommand(sql);
data.disconnect();
Response.Write("امتیاز شما با موفقیت ثبت گردید");

}

خوب این بار اومدیم یه تابع نوشتیم که کاربر رو اعتبار سنجی کنیم ببینیم قبلا رای داده یا نه،اگه رای داده برای این مطلب که هیچی پیغام میدیم قبلا رای دادی (هر چقد دلت خواست کلیک کن! :)) اگرم که نه خوب بقیه ماجرا،وصل شدیم بانک مقدار up رو از جدول گرفتیم بعدش مقدار up رو یک واحد افزایش دادیم و توی بانک نوشتیم (با متد docommand) یه کوئری هم نستیم برای ثبت ip کاربر،اگه نگاه کنید توی قسمت فرمت دهی کوئری SQL از یه تایع به اسم Get_USer_Ip استفاده کردیم،حالا میگیم ماجراش چیه،خوب با متد docommand کلاس دیتابیس این کوئری رو اجرا کردیم،قطع ارتباط با بانک و نمایش پیغام ثبت موفقیت آمیز امتیاز.

همون طور که الان حتما دارید میگید بعدی هم حتما شبیه همین بالایی هست و منم میگم درسته،میریم سراغ بعدی.

تابع updatedislike در ASP.NET

private void updatedislike(int id)
{
if (!User_Validate(id))
{
Response.Write("رای شما قبلا برای این مطلب ثبت شده است");
return;
}
DAL data = new DAL();
data.connect();
string sql = "SELECT down FROM posts WHERE id={0}";
sql = string.Format(sql, id);
int down = data.GetOneInt(sql);
sql = "UPDATE posts SET down={0} WHERE id={1}";
sql = string.Format(sql, ++down, id);
data.docommand(sql);
sql = "INSERT INTO likes (p_id,ip,date) VALUES('{0}','{1}','{2}')";
sql = string.Format(sql, id, Get_User_Ip(), DateTime.Now.ToLongDateString());
data.docommand(sql);
data.disconnect();
Response.Write("امتیاز شما با موفقیت ثبت گردید");

}

دقیقا کد های بالا رو برای down انجام دادیم.

خوب حالا تابع های مفیدی  که نوشتیم.

تابع Get_User_Ip_Db

با این تابع توی جدول likes میگرده اگه برای این مطلب با این ip لایکی ثبت شده باشه،مقدار ip رو برمیگردونه.

private string Get_User_Ip_Db(int id)
{
DAL data = new DAL();
data.connect();
string sql = "SELECT ip FROM likes WHERE p_id={0}";
sql = string.Format(sql,id);
string ip=data.GetOneString(sql);
data.disconnect();
return ip;
}

تابع Get_User_Ip

این تابع هم ip فعلی کاربر رو برای ما برمیگردونه.

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"];
}
}

نکته جالبش اینه که اگه کاربر از پروکسی (ف ی ل ت ر ش ک ن ) استفاده کنه باز هم ip واقعی رو تشخیص میده.

تابع User_validate

این تابع هم با استفاده از اون دو تا تابع بالایی و با یه دستور شرطی جمع و جور کاربر رو تایید اعتبار میکنه.

private bool User_Validate(int id)
{

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

}

خوب دوستان اینم از این اسکرپیت لایک به راحتی به ASP.NET تبدیل شد.

نکات نهایی:

  • برای دیتابیس به صورت لوکال از SQLEXPRESS استفاده شده.
  • از نسخه 3.5 دات نت فریمورک استفاده شده.
  • برای کد نویسی از Visual Web Developer که یه نسخه جمع و جور برای ASP.NET هست استفاده شده.
  • کد SQL کامل بانک رو براتون توی فایل پروژه گذاشتم.

امیدوارم واستون مفید بوده باشه.

دانلود فایل پروژه در ASP.NET

نویسنده
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

raminn

با تشکر از مطلب خوبتون ..فقط یه سوال من میخاوم نمایش تعداد لایک ها و دیس لایک ها کنار دکمه هاباشه و تو hover نباشه ! … ممنون میشم دقیقا بگید کدوم قسمت رو تغییر بدم ! ..مرسی

کیوان علی محمدی

سلام کمی باید کدها رو دستکاری کرد،من برای نشون دادن لایک های اینو مینویسیم خودتون دیگه از این الگو بگیرید.

$('.like').each(function() {
var el=$(this);
var id = el.data("id");
showlike(el,id);
});

اکبر قره باغی

درست شد 🙂

ممنون

اکبر قره باغی

برای من هیچ اروری نمیده ولی اصلا هیچ کاری هم نمیکنه

عمل نمیکنه

کریمی

اگر حس روئیدن در تو باشد، حتی در کویر هم رشد خواهی کرد…
(دکتر شریعتی)
ممنون از انتشار اطلاعات مفیدتون. موفق باشید و سلامت.

mohamadi.manijeh

کد جاوااسکریپت این بوده

$(document).ready(function(){
 $('.like-btn').each(function () {
  var id = $(this).attr('data');
  ajax('showlike', this, id);
 });
 $('.dislike-btn').each(function () {
  var id = $(this).attr('data');
  ajax('showdislike', this, id);
 });
/******************************************************/
  $('.like-btn').click(function(){
    $(this).next().html('&lt;img src=&quot;img/loader.gif&quot; style=&quot;width:16px;height:16px;&quot;&gt;').css({'display':'block'});
   var id=$(this).attr('data');
   ajax('updatelike',null,id);
    });
/******************************************************/
 $('.dislike-btn').click(function(){
    $(this).next().html('&lt;img src=&quot;img/loader.gif&quot; style=&quot;width:16px;height:16px;&quot;&gt;').css({'display':'block'});
   var id=$(this).attr('data');
   ajax('updatedislike',null,id);
    });
/******************************************************/
function ajax(func,el,id)
 {
   $.ajax({
   type:&quot;GET&quot;,
   url:&quot;ajx.aspx&quot;,
   data:&quot;func=&quot;+func+&quot;&amp;id=&quot;+id,
   success:function(data){
    if(func=='showlike' || func=='showdislike')
    {
      $(el).next().html(data);
    }
    else if(func=='updatelike' || func=='updatedislike')
    {
      alert(data);
    }
   }
     });
 }    
});
کیوان علی محمدی

خوب این کد دقیقا همون کدی هست که تست شده و جواب داده،قبلا یکی از کاربران از ما خواسته بودن کد رو کمی بهینه کنیم و به همین خاطر ما هم این کارو انجام دادیم.من این کد های بهینه تر رو برای شما هم قرار میدیم امیدوارم استفاده کنید.خواهشا برای قرار دادن کد ها حتما توی یه فایل بذارید و اپ کنید،اینجوری کلی فضای نظرات به هم میریزه.ممنون
http://up.persianscript.ir/uploads/137804493289211.zip

mohamadi.manijeh

همان که شما چندیدن تایپک بالاتر گداشتین
(۱۵ مرداد ۱۳۹۲ ساعت ۱:۳۳ ب.ظ )
که البته دستکاری در کد hover بود ..فرق انچنانی با کد اصلی نداست….

mohamadi.manijeh

جناب مهندس من کدها را دستکاری نکردم دیتابیسم هم اسکیوال کردم ولی باز این مشکل را داشت وقتی رفتم توی دیتابیس یک مقداری را دستی وارد کردم تونستم خروجی را ببینم یعنی این با مقدار اولیه مشکل داره … بع د هم که مقدار اولیه بهش دادم وقتی روی + – کلیک میکنم پیغام ثبت شد را میدهد ولی این علامت لودینگ همچنان میچرخد تا اینکه یک بار صفحه را رفرش کنم تا از این حالت خارج شود .. یک مورد دیگه هم اینه که اصلا چک نمیکنه من قبلا رای دادم و اجازه میدهد من هر تعداد که میخواهم لایک کنم .. این حالت ویرایش شده فایل هست که من تست میکنم

کیوان علی محمدی

شما کدی رو که دارین برای من قرار بدین تا من بررسی کنم.

mohamadi.manijeh

روی اینن خط کد البته من قبلا اجرا گرفته بودم اما الان مجدد دانلود کردم و اجرا کردمم این خطا را داد
DAL
public void docommand(string sql)
{
cmd.CommandText = sql;
cmd.ExecuteNonQuery();
}

روی خط اخر

کیوان علی محمدی

خوب این کد مربوط به متد docommand کلاس DAL هست که کوئری های مثل UPDATE , DELETE ,INSERT رو پردازش میکنه،این کلاس و این کد مشکلی نداره شما حتما یه نگاهی به کد کوئری بندازید،شاید تغییری توی کوئری ایجاد کردید،دیتابیس رو حتما چک کنید،نوع سرور خودتون رو هم چک کنید،اینجا با SQLSERVER نوشته شده و با نسخه EXPRESS نیست و این توی connnection string تاثیر میذاره.

mohamadi.manijeh

سلام من کدتون رو تست کردم ولی وقتی دکمه + یا – را می زنیم چنین خطایی را میبینم – Conversion failed when converting date and/or time from character string

کیوان علی محمدی

سلام شماره خطا رو بررسی کنید ببینید توی کدوم فایل همچین خطایی داره،من کد ها رو قبل از آپلود کاملا تست میکنم.

محمد

سلام میخواستم ببینم که چرا الکسا ی سایتم هی میاد پایین با این که کداش و مطالبش رو از هیچ کی کپی نکردم میشه لطفا راهنماییم کنید.

کیوان علی محمدی

سلام برای الکسا تعداد بازدید مهمه باید سعی کنید این پارامتر رو افزایش بدید.

محمد

خیلی ممنون دمتون گرم 😀

parsaaa

مرسی خیلی دنبالش بودم

98 آگهی

با تشکر و آرزوی موفقیت

آقایی

با تشکر از مطلب مفیدتان
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل