گالری عکس jQuery Carousel با استفاده از Image Slider در MVC
سه شنبه 26 اردیبهشت 1396ما در این مقاله با یک مثال، نحوه پیاده سازی گالری عکس jQuery Carousel را با استفاده از Image Slider و با کمک پلاگین jQuery jCarousel در ASP.Net MVC پیاده سازی و توضیح خواهیم داد.
کنترلر
کنترلر شامل اکشن متد زیر می باشد:
یک اکشن متد باید برای رسیدگی به عملیات از نوع Get وجود داشته باشد که در آن یک جنریک لیست از نوع string ساخته شود.
که این جنریک لیست شامل فهرستی از آدرس استاتیک عکس ها می باشد که این فهرست در نهایت هنگام فراخوانی View به آن ارسال داده خواهد شد.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<string> images = new List<string>();
images.Add("https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
images.Add("https://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
images.Add("https://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
images.Add("https://static.flickr.com/77/199481108_4359e6b971_s.jpg");
images.Add("https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
images.Add("https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
images.Add("https://static.flickr.com/58/199481218_264ce20da0_s.jpg");
images.Add("https://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
images.Add("https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
images.Add("https://static.flickr.com/70/229228324_08223b70fa_s.jpg");
return View(images);
}
}
در داخل View یک مدل از نوع string به صورت IEnumerable تعریف میکنیم.
یک حلقه بر روی مدل اجرا میشود تا یک لیست از نوع Unordered در Html ایجاد کند که هر ایتم شامل یک عنصر Image در Html باشد و نیز در داخل Value این عناصر آدرس عکس ها را قرار می دهیم.
در نهایت ، در داخل اداره کننده رویداد document ready جی کوئری پلاگین jQuery jCarousel را در داخل عناصر لیست پیاده سازی می کنیم.
@model IEnumerable<string>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
@foreach (string image in Model)
{
<li>
<img alt=""style='height: 75px; width: 75px' src='@image'/>
</li>
}
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
<link href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet"/>
<script type="text/javascript">
$(function () {
$('#mycarousel').jcarousel();
});
</script>
</body>
</html>
آموزش asp.net mvc
- ASP.net MVC
- 2k بازدید
- 4 تشکر