سورس کد اسلایدر با Asp.net MVC و بوت استرپ

سورس کد اسلایدر با Asp.net MVC و بوت استرپ ، در این پست آموزشی سورس کد اسلایدر را به طور کامل با توضیحات قرار داده ایم که شامل دستورات Asp.net برای مدیریت اسلایدر سمت سرور و دستورات بوت استرپ برای ایجاد اسلایدر و قرار دادن اطلاعات بانک درون آن میباشد.

سورس کد اسلایدر با Asp.net MVC و بوت استرپ

اسلایدر در سایت میتواند هم باعث جذاب تر شدن سایت شود و هم به معرفی بیشتر محتویات سایت کمک کند. مدیریت تصاویر و عناوین مربوط به هر اسلاید به عنوان کدهای سمت سرور تعریف میشوند که ما با کدهای asp این کار را انجام میدهیم.

اما قبل از هرکار باید یک جدول در دیتابیس مختص اسلایدر ایجاد کنیم بدین منظور یک جدول با فیلد های زیر ایجاد میکنیم

فیلدهای جدول به ترتیب عبارت است از :

شمارنده رکورد ها

نام تصویر ورودی کاربر

عنوان تصویر

توضیحات تصویر

مشخص کردن نمایش دادن یا ندادن تصویر در اسلایدر

حال طبق آموزشات گذشته بانک را به پروژه asp.net mvc خود اضافه میکنیم سپس یک کنترلر از نوع MVC5 Controller with views ,using Entity Framework ایجاد میکنیم و تنظیماتش را طبق تصویر زیر تنظیم میکنیم

این کنترلر خود به طور خودکار اکشن ریزالت های اولیه کنترلر از جمله

Index : صفحه اصلی

Details : جزییات

Create : ایجاد

Delete : حذف

Edit : ویرایش

Dispose : از بین بردن آبجکت از حافظه

را ایجاد میکند و برنامه نویس طبق نیاز میتواند تغییراتی برروی آنها اعمال کند.

همچنین با فعال کردن گزینه Generate Views چهار view اصلی ایجاد و حذف و ویرایش و جزییات به طور خودکار و با استفاده از scaffolding ایجاد میشود.

توجه کنید که view ها و همچنین توابع همگی بر پایه جدول slider ایجاد شدند(مطابق تنظیمات اعمال شده هنگام ایجاد کنترلر) و تمامی تغییرات را در این جدول اعمال میکنند.

در کنترلر ایجاد شده خواهید دید برای هرکدام از توابع اعمالی دو متد با یک نام ایجاد شده که با ویژگی [HttpPost] به هم متصل اند بدین صورت که متد اول قالب را نمایش میدهد تا کاربر اطلاعات مورد نظر خود راوارد کند سپس با کلیک کردن کلید موجود اطلاعات به متد بعدی پاس داده میشوند و عملیات مروبطه بررویشان اعمال میشود.

حال ما متد Create دوم را بدین صورت تغییر میدهیم

public ActionResult Create(HttpPostedFileBase Image, Slider slider) 
{ 
if (ModelState.IsValid) 
 {
 if (Image != null) 
 { 
 slider.image = Guid.NewGuid().ToString() + Path.GetExtension(Image.FileName); 
 Image.SaveAs(Server.MapPath("~/Images/Slider/" + slider.image)); 
 } 
 else { 
 ModelState.AddModelError("Image", "تصویر را وارد کنید"); 
 return View(slider); 
 } 
 db.Slider.Add(slider); 
 db.SaveChanges(); 
 return RedirectToAction("Index"); 
 } 
 return View(slider); 
 }

چون میخواهیم از کاربر یک فایل تصویری بگیریم و آنرا به سمت سرور بفرستیم پس از کلاس HttpPostedFileBase برای دریافت فایل استفاده میکنیم در ادامه ما برای ذخیره سازی تصویر هم در بانک و هم در پروژه از

دستور

.image = Guid.NewGuid().ToString() + Path.GetExtension(Image.FileName);

برای ذخیره سازی در بانک که از متد NewGuid() برای اختصاص یک رشته بصورت تصادفی به عنوان نام تصویر به علاوه فرمت فایل که با دستور GetExtension() به دست می آید.

دستور

Image.SaveAs(Server.MapPath("~/Images/Slider/" + slider.image));

برای ذخیره در سرور پروژه در مسیری که با متد ()MapPath برای ذخیره سازی تعیین میشود.

حال نوبت به متد Edit میرسد پس این متد  را بدین صورت تغییر میدهیم

public ActionResult Edit(HttpPostedFileBase image, Slider slider)

        {

            Slider s = db.Slider.Find(slider.SliderID);

            if (ModelState.IsValid)

            {

                if (image != null)

                {

                    System.IO.File.Delete(Server.MapPath("/images/slider/" + s.image));

                    s.image = Guid.NewGuid().ToString() + Path.GetExtension(image.FileName);

                    image.SaveAs(Server.MapPath("/images/slider/" + s.image));

                }

                db.Entry(s).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Index");

            }

            return View(slider);

        }

در این متد نیز ابتدا تصویر قبلی مربوط به آیتم انتخابی را با آدرس دهی و دستور ()File.Delete حذف میکنیم سپس طبق دستور ایجاد تصویر ورودی را هم در فایل و هم در بانک ذخیره میکنیم.

برای حذف نیز در متد مربوط تنها یک خط حذف تصویر از سرور قرار میدهیم

public ActionResult DeleteConfirmed(int id)

        {

            Slider slider = db.Slider.Find(id);

            System.IO.File.Delete(Server.MapPath("/images/slider/" + slider.image));

            db.Slider.Remove(slider);

            db.SaveChanges();

            return RedirectToAction("Index");

        }

در View ها نیز میتوانید به دلخواه عناوین صفحات و دکمه هاو … را تغییر دهید اما مهم ترین تغییراتی که باید در Viewهای Creat و Edit ایجاد شود انتقال فایل ها با متد POST به سمت سرور است

@using (Html.BeginForm("Create", "Sliders", FormMethod.Post, 
new { enctype = "multipart/form-data", area = "Admin" }))

و تغییر نوع کامپوننت ورودی  مربوط به Image به صورت زیر

<div class="form-group">

            @Html.LabelFor(model => model.image, 

htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <input type="file"  name="Image" value=" " />

                @Html.ValidationMessageFor(model => model.image, "", new { @class = "text-danger" })

            </div>

        </div>

حال میتوان پروژه را اجرا کرد و و تعدادی تصویر با عنوان و توضیح مربوط را وارد کرد

حال زمان آن است که از اطلاعات ذخیره شده در یک اسلایدر استفاده کنیم پس یک پارشیال ویو ایجاد میکنیم

public ActionResult Slider()

        {

            return PartialView(db.Slider.Where(s => s.IsShow == true).ToList());

        }

در این متد تنها اسلاید هایی به پارشیال ارسال میشود که فیلد IsShow آنها با true مقداردهی شده باشد. سپس درون این پارشیال ویو اسلایدر را چنین تعریف میکنیم

@model IEnumerable<RegisterWeb.Models.Slider>



@{

    Boolean count = true;

    Boolean slidecount = true;

}



@if (Model.Count() > 0)

{

    <div id="carousel-example-generic" class="carousel slide slider" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            @for (int i = 0; i < Model.Count(); i++)

            {

 <li data-target="#carousel-example-generic" 

data-slide-to="@i" class="@(count == true ? "active" : "")"></li>

                count = false;

            }

        </ol>



        <!-- Wrapper for slides -->

        <div class="carousel-inner" role="listbox">

            @foreach (var item in Model)

            {

                <div class="item  @(slidecount == true ? "active" : "")">

                    <img src="~/Images/Slider/@item.image" alt="@item.Title" 
style="max-height:600px; min-height:500px;width:100%">

                    <div class="carousel-caption">

                        <h3>@item.Title</h3>

                        <p>@item.Discription</p>

                    </div>

                </div>

                slidecount = false;

            }



        </div>



        <!-- Controls -->

        <a class="left carousel-control" href="#carousel-example-generic" 

role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" 

role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

}

ما از دستورات اسلایدر بوت استرپ به علاوه تغییراتی که باعث حرکت اتوماتیک تصاویراسلایدر میشود استفاده کردیم.

سپس درهر View که میخواهیم اسلایدر نمایش داده شود از متد Action استفاده میکنیم

و در نتیجه به صورت زیر اسلایدر خود را مشاهده خواهید کرد