Bootstrap-Carousel-04/19 | C# Online Compiler

Bootstrap-Carousel-04/19 by AQUIB IQBAL

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		public int Id { get; set; }

        public string Title { get; set; }

        public string ImagePath { get; set; }
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public int Id { get; set; }
​
        public string Title { get; set; }
​
        public string ImagePath { get; set; }
    }
}

@model IEnumerable<HelloWorldMvcApp.SampleViewModel>
@{
	Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Carousel</title>

	<!-- CSS Includes -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="col-md-12">
			
			<div id="myCarousel" class="carousel slide" data-ride="carousel">

				<ol class="carousel-indicators">
					@{
						int i = 0;
					}
					@foreach (var item in Model)
					{
						<li data-target="#myCarousel" data-slide-to="@i" class="@(i == 0 ? "active" : "")"></li>
						i++;
					}
				</ol>

				<div class="carousel-inner">
					@{
						i = 0;
					}
					@foreach (var item in Model)
					{
						<div class="item @(i == 0 ? "active" : "")">
							<img src="@item.ImagePath" class="image img-responsive">
							<div class="carousel-caption">
								<h3>@item.Title</h3>
							</div>
						</div>
						i++;
					}
				</div>
				<a class="left carousel-control" href="#myCarousel" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#myCarousel" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
						
		</div>
	</div>

		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

		
	</body>
</html>

View

 
@model IEnumerable<HelloWorldMvcApp.SampleViewModel>
@{
    Layout = null;
}
​
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Carousel</title>
​
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-12">
            
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
​
                <ol class="carousel-indicators">
                    @{
                        int i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <li data-target="#myCarousel" data-slide-to="@i" class="@(i == 0 ? "active" : "")"></li>
                        i++;
                    }
                </ol>
​
                <div class="carousel-inner">
                    @{
                        i = 0;
                    }
                    @foreach (var item in Model)
                    {
                        <div class="item @(i == 0 ? "active" : "")">
                            <img src="@item.ImagePath" class="image img-responsive">
                            <div class="carousel-caption">
                                <h3>@item.Title</h3>
                            </div>
                        </div>
                        i++;
                    }
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
                        
        </div>
    </div>
​
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
​
        
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			List<SampleViewModel> CarouselList = new List<SampleViewModel>();
			
			CarouselList.Add(new SampleViewModel() { Id = 1, Title = "Carousel-1", ImagePath = "https://dummyimage.com/1200x400/000/fff" });
            CarouselList.Add(new SampleViewModel() { Id = 2, Title = "Carousel-2", ImagePath = "https://dummyimage.com/1200x400/eeeeee/000000.jpg" });
            CarouselList.Add(new SampleViewModel() { Id = 3, Title = "Carousel-3", ImagePath = "https://dummyimage.com/1200x400/8e8e8e/000" });
            CarouselList.Add(new SampleViewModel() { Id = 4, Title = "Carousel-4", ImagePath = "https://dummyimage.com/1200x400/000/fff" });
            CarouselList.Add(new SampleViewModel() { Id = 5, Title = "Carousel-5", ImagePath = "https://dummyimage.com/1200x400/eeeeee/000000.jpg" });
			
			return View(CarouselList);
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            List<SampleViewModel> CarouselList = new List<SampleViewModel>();
            
            CarouselList.Add(new SampleViewModel() { Id = 1, Title = "Carousel-1", ImagePath = "https://dummyimage.com/1200x400/000/fff" });
            CarouselList.Add(new SampleViewModel() { Id = 2, Title = "Carousel-2", ImagePath = "https://dummyimage.com/1200x400/eeeeee/000000.jpg" });
            CarouselList.Add(new SampleViewModel() { Id = 3, Title = "Carousel-3", ImagePath = "https://dummyimage.com/1200x400/8e8e8e/000" });
            CarouselList.Add(new SampleViewModel() { Id = 4, Title = "Carousel-4", ImagePath = "https://dummyimage.com/1200x400/000/fff" });
            CarouselList.Add(new SampleViewModel() { Id = 5, Title = "Carousel-5", ImagePath = "https://dummyimage.com/1200x400/eeeeee/000000.jpg" });
            
            return View(CarouselList);
        }
    }
}

View in Full Screen

View IL Code