illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

24221 ۱۲ مرداد ۹۲
1 2 3

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

کد های HTML,CSS ما همون کد های سیستم PHP هست و فرقی نمیکنه،برای قسمت جاوااسکریپت من تصمیم گرفتم برای سیستم ASP از AJAX Jquery استفاده کنم،فقط خواستم شما با نحوه کارش آشنایی پیدا کنید،انشالله توی سری آموزشی جی کوئری یا سری آموزشی جاوااسکریپت حتما مفصل بهش پرداخته میشه.

توضیحات اصلی

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

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

قسمت showlike

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

قسمت showdislike

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

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

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

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

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

تابع ajax

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

1 2 3
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 29 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    mohamadi.manijeh(۹ شهریور ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۹ شهریور ۱۳۹۲)

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

  • ‏‏
    mohamadi.manijeh(۱۰ شهریور ۱۳۹۲)

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

  • ‏‏
    mohamadi.manijeh(۱۰ شهریور ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۱۰ شهریور ۱۳۹۲)

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

  • ‏‏

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

  • ‏‏
    اکبر قره باغی(۱۲ تیر ۱۳۹۳)

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

    عمل نمیکنه

  • ‏‏
    اکبر قره باغی(۱۲ تیر ۱۳۹۳)

    درست شد :)

    ممنون

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۰ مرداد ۱۳۹۳)

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

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram