campaign-edianeh-98

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



visibility  
mode_comment   ۲۹

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

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

توضیحات اصلی

ما این جا یا صفحه های 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 بود فقط اونو به صورت پیغام نشون بده.

متخصص PHP
اگر دوست داری برنامه نویسی PHP رو حرفه ای یاد بگیری آیا می دانید بیش از ۸۰% وب سایت های موجود در ایران از جمله لیدرهای بازار وب (اسنپ، اسنپ فود، نت برگ، دیجیکالا، الوپیک و ... ) زبان برنامه نویسی PHP را به عنوان زبان اصلی برای پیاده سازی امکانات سمت سرور خود انتخاب کردند! متخصص PHP arrow_back
comment دیدگاه کاربران
mohamadi.manijeh

سلام با تشکر از مقاله شما من از روی این اموزش شما یک نمونه ایجاد کردم فقط موردی که وجود داره اینه که من می خواستم به این قورت باشه که وقتی صفحه باز میشود تعداد لایک های مثبت و منفی لود شده باشد و نه این که روی hover این نوشته شده باشد
یعنی showlike در رویداد hover نباشد در page loade باشد . چطور می توانم این کار را انجام دهم ؟؟

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

سلام فقط کافیه که showlike رو توی قسمت اصلی کد های جی کوئری بنویسید،توی قسمت (document)$.

mohamadi.manijeh

ممنون نوشتم ولی چون خروجی نداشت سوال کردم
$(document).ready(function(){

var id=$(‘.like-btn’).attr(‘data’);

ajax(‘showlike’,this,id);

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

حق با شماست،باید توی کد یکسری تغییرات بدیم،چون توی این حالت فقط یک id برای صفحه ای جکس ارسال میشه. و اون کلمه this هم به شی document اشاره داره،به همین خاطر هیچ نتیجه ای رو برنمیگردونه.

mohamadi.manijeh

امکانش هست این را تغیر بدهید .
فکر میکنم با یح حلقه foreach حل بشه که به ازای همه نظرات این جریان برقرار باشد.

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

حتما تا فردا یا پس فردا توی همین قسمت نظرات میذارمش.

mohamadi.manijeh

ممنون منتظر هستم میشه یک درخواستی هم داشته باشم و ان این که امکان پاسخ به نظر را هم به تیکه کد هاتون اضافه نمایید …لطفا

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

امکان پاسخ به نظر ؟؟ ما توی این اسکریپت قسمتی برای ارسال نظر نداشتیم!

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

سلام من کد رو ویرایش کردم،شما فقط توابع این فایل رو باید با توابع hover جایگزین کنید،توی فایل CSS هم برای تگ های span خاصیت display:none رو بردارید.

آقایی

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

98 آگهی

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

parsaaa

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

محمد

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

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

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

محمد

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

mohamadi.manijeh

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

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

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

mohamadi.manijeh

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

روی خط اخر

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

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

mohamadi.manijeh

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

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

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

mohamadi.manijeh

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

mohamadi.manijeh

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

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

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

کریمی

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

اکبر قره باغی

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

عمل نمیکنه

اکبر قره باغی

درست شد 🙂

ممنون

raminn

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

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

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

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.