نحوه ایجاد یک اسلایدشو به صورت داینامیک
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه

در این آموزش قصد دارم نحوه ایجاد یک Slideshow به صورت داینامیک را با ASP.NET طراحی کنم(منظور از ایجاد Slideshow به صورت داینامیک این است که عکس‌ها را به صورت داینامیک از DB بخواند).

اولین گام این است که Plugin مورد نظر را دریافت کنید که من از پلاگین Orbit استفاده کرده ام

ابتدا یک DataBase با نام DynamicSlideShow ایجاد و یک جدول با ساختار زیر با نام Picturesدرون آن ایجاد می‌کنیم

گام بعدی ایجاد یک پروژه Asp.Net با زبان C# و اضافه کردن فایلهای پلاگین به پروژه و ایجاد یک Handler برای بازیابی داده‌ها از DB است. ساختار   Solutionما باید به صورت زیر باشد

برای اینکه بتوانیم با DB ارتباط برقرار کنیم از EF استفاده می‌کنیم به همین منظور ابتدا یک Model  به نام DynamicSlideShowModel ایجاد می‌کنیم

در گام بعد بر روی GenerateFromDatabase  انتخاب کرده و بر روی دکمه Next کلیک می‌کنیم و در مراحل بعد ابتدا DB مربوط به مثال (DynamicSlideShow) و جدول آن را انتخاب می‌کنیم . حال یک Model به درون پوشه App_Code  اضافه شده است  

در ادامه برای واکشی رکوردهای موجود در جدول  Pictures  کدهای زیر را درون Handler می‌نویسیم

  var ctx = new DynamicSlideShowEntities();
  var list = ctx.Pictures.ToList();
  string str = JsonConvert.SerializeObject(list);
  context.Response.Write(str);

  

در این کدها تنها نکته‌ای که احتیاج به توضیح دارد این است که ابتدا یک لیست از رکوردها را از جدول Pictures واکشی می‌کنیم و برای پاس دادن به کلاینت ما آن‌ها را به فرمت Json تبدیل کرده ایم که برای تبدبل از کنابخانه آماده Newtonsoft.Json.dll استفاده کرده ایم 

حال باید با استفاده از jQuery کدهای درون Handler را اجرا کنیم؛ برای همین منظور یک صفحه با نام default.aspx ایجاد کرده و کدهای زیر را درون آن می‌نویسیم

<head runat="server">
    <title>Dynamic SlideShow</title>
    <link href="CSS/orbit-1.2.3.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Script/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "Handler.ashx",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $.each(data, function (i, b) {
                        var str = '<img src="' + b.PicturePath + '" alt="' + b.PictureText + '"/>';
                        $("#featured").append(str);
                    });
                    $('#featured').orbit();
                },
                dataType: "json"

            });
            });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="featured">
    </div>
    </form>
</body>

در اینجا ابتدا با استفاده از متد ajax کتابخانه jQuery کدهای درون Handler را اجرا کرده و به ازای هر المان موجود در جدول یک تگ img به صفحه اضافه می‌کنیم.

  • #
    ‫۱۲ سال و ۳ ماه قبل، شنبه ۱۷ تیر ۱۳۹۱، ساعت ۱۵:۱۶
    خیلی عالی بود ممنون
  • #
    ‫۱۲ سال و ۳ ماه قبل، دوشنبه ۱۹ تیر ۱۳۹۱، ساعت ۱۸:۰۱
    مرسی خیلی عالی بود ، این عکس‌ها یکی یکی از سمت سرور اضافه می‌شوند یا همه با هم ؟
    • #
      ‫۱۲ سال و ۳ ماه قبل، دوشنبه ۱۹ تیر ۱۳۹۱، ساعت ۱۸:۱۶
      کاری که در اینجا انجام شده ساخت div زیر به صورت پویا است (بر اساس لیست تصاویر دریافت شده از سرور):
      <div id="featured"> 
           <img src="img1.jpg" alt="img1" />
           <img src="img2.jpg" alt="img2" />
           <img src="img3.jpg" alt="img3" />
      </div>
      و سپس فراخوانی متد زیر روی آن:
      $('#featured').orbit();

  • #
    ‫۱۲ سال و ۱ ماه قبل، جمعه ۱۰ شهریور ۱۳۹۱، ساعت ۱۷:۳۱
    با سلام  
    من کدهای بالا رو همه رو درست انجام دادم ولی در فایل handler متاسفانه  Tolist();  نمیشه. به فایل ضمیمه دقت کنید.  با تشکر

    • #
      ‫۱۲ سال و ۱ ماه قبل، جمعه ۱۰ شهریور ۱۳۹۱، ساعت ۱۷:۳۶
      ذکر using System.Linq را فراموش کردید.
      • #
        ‫۱۲ سال و ۱ ماه قبل، جمعه ۱۰ شهریور ۱۳۹۱، ساعت ۱۷:۵۷
        ممنونم  از شما   استاد عزیز
  • #
    ‫۱۲ سال و ۱ ماه قبل، شنبه ۲۵ شهریور ۱۳۹۱، ساعت ۱۴:۴۴
    یه سوال واسه من پیش اومد مهندس
    ممکنه ما 100 تصویر داشته باشیم که بالطبع لود همه آنها یکباره درست نیست
    آیا میشه کاری کرد که در هر درخواست که اسلایدشو تعویض میشه تصویر دینامیک لود کرد یا مثلا هر دفعه سه تصویر لود کرد و به پلاگین اضافه کرد تا نمایش بده؟
    چون اینجوری همه تصاویر به یکباره لود شده و سرعت خیلی پایین مییاد
    • #
      ‫۱۲ سال و ۱ ماه قبل، شنبه ۲۵ شهریور ۱۳۹۱، ساعت ۱۶:۵۱
      می‌تونید از ایده‌های افزونه‌هایی تحت عنوان «jQuery loading images on demand » استفاده کنید. مثلا: (^)
  • #
    ‫۱۱ سال و ۶ ماه قبل، یکشنبه ۴ فروردین ۱۳۹۲، ساعت ۰۳:۲۷
    سلام،مهندس جان من وقتی از این کد استفاده میکنم فقط رکورد اول رو واسم میاره و بقیه رو undefined میده، میدونید دلیلش چیه؟
    • #
      ‫۱۱ سال و ۶ ماه قبل، یکشنبه ۱۸ فروردین ۱۳۹۲، ساعت ۲۱:۰۴
      دوست عزیز باید کدتون رو ببینم و نظر بدم.
  • #
    ‫۱۱ سال و ۶ ماه قبل، یکشنبه ۱۸ فروردین ۱۳۹۲، ساعت ۱۴:۳۳

    عالی بود.

    پاینده باشین.

  • #
    ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۳ اردیبهشت ۱۳۹۲، ساعت ۱۶:۵۸
    با سلام ..
    من همه چیز را همان طوری که شما گفتید انجام دادم ولی نمی‌دونم چرا اجرا نی کنه ..بعد از لود صفحه یک لحظه نشون میده بعد فقط فلش که برای حرکت تصویر است نشون میده و اون هم در گوشه بالای صفحه :
    این هم کد :::
    using System;
    using System.Collections.Generic;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    
    
    public class GallerySite
    {
        int iD;
    
        public int ID
        {
            get { return iD; }
            set { iD = value; }
        }
        string imagePath;
    
        public string ImagePath
        {
            get { return imagePath; }
            set { imagePath = value; }
        }
        string imageText;
    
        public string ImageText
        {
            get { return imageText; }
            set { imageText = value; }
        }
        public List<GallerySite> GetImage()
        {
            List<GallerySite> _Gallery = new List<GallerySite>() { };
            SqlConnection cnn = new SqlConnection("Data Source=.;Initial Catalog=RoshanZamirDataBase;Integrated Security=True");
            cnn.Open();
            SqlCommand cmd = new SqlCommand("Select * From Gallery", cnn);
            SqlDataReader datareadfewr = cmd.ExecuteReader();
            if (datareadfewr.HasRows)
            {
                while (datareadfewr.Read())
                {
                    _Gallery.Add(new GallerySite()
                    {
                        ID = Convert.ToInt32(datareadfewr["ID"]),
                        ImagePath = (string)datareadfewr["ImagePath"],
                        ImageText=(string)datareadfewr["ImageText"]
                    });
                }
            }
            return _Gallery;
        }
    }
    
    .................................................................................................................................
    
    
    
    
        <link href="orbit-1.2.3.css" rel="stylesheet" />
        <script src="jquery-1.8.3.min.js"></script>
        <script src="jquery.orbit-1.2.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    url: "Handler.ashx",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        $.each(data, function (i, b) {
                            var str = '<img src="' + b.ImagePath + '" alt="' + b.ImageText + '"/>';
                            $("#featured").append(str);
                        });
                        $('#featured').orbit();
                    },
                    dataType: "json"
                });
            });
        </script>
    
    
    
    
    ...........................................................................................................................
    
    Handler :
    
    
    
    public class Handler : IHttpHandler {
        
        public void ProcessRequest (HttpContext context) {
            var _Gallery = new GallerySite();
            var List = _Gallery.GetImage();
            string str = JsonConvert.SerializeObject(List);
            context.Response.Write(str);          
        } 
        public bool IsReusable {
            get {
                return false;
            }
        }
    }


    • #
      ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۳ اردیبهشت ۱۳۹۲، ساعت ۱۷:۴۴
      با نحوه دیباگ اسکریپت‌های jQuery آشنا هستید؟ افزونه فایرباگ رو نصب کنید. بعد مراجعه کنید به قسمت مثلا network آن. بعد مشاهده کنید، آیا چیزی رد و بدل شده؟ آیا در کنسول اسکریپت‌های مرورگر خطایی لاگ شده. آیا مثلا CSSهای سایت روی این افزونه تاثیر داشته. مرورگر کروم هم در قسمت developer tools آن شبیه به فایرباگ رو داره. دکمه F12 آن.
      • #
        ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۳ اردیبهشت ۱۳۹۲، ساعت ۱۹:۲۳
        من نتونستم درستش کنم ..یه راه دیگه وجود نداره :؟
        • #
          ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۳ اردیبهشت ۱۳۹۲، ساعت ۲۲:۰۷
          کد رو دیباگ کن:
          var str = '<img src="' + b.ImagePath + '" alt="' + b.ImageText + '"/>';
          ببین اینجا نهایتا چه رشته‌ای تشکیل میشه.
           آیا src درستی به مرورگر ارائه شده؟ مثلا آیا c:\path\data\image\01.jpg است؟ یا اینکه به نحو صحیحی به صورت یک مسیر نسبی از ریشه سایت مانند siteimage/01.jpg مقدار دهی شده؟

  • #
    ‫۹ سال و ۱۲ ماه قبل، پنجشنبه ۳ مهر ۱۳۹۳، ساعت ۲۲:۰۹
    سلام؛ من از روش بالا در mvc استفاده کردم می‌خواستم ببینم آیا کار صحیحی انجام دادم یا خیر ؟ 
    در مورد Http Hndler و Http Module هم اطلاعات کمی دارم و آیا استفاده از این‌ها در mvc کار صحیحی است یا خیر ؟ 
    • #
      ‫۹ سال و ۱۲ ماه قبل، پنجشنبه ۳ مهر ۱۳۹۳، ساعت ۲۲:۳۲
      نیازی نیست. مطلب فوق در مورد وب فرم‌ها نوشته شده. برای انتقال آن به MVC بجای فایل ashx یک اکشن متد با خروجی Json خواهید داشت.