I tried to make Bootstrap carousel slider for news from SQL Server database
I want the slider to look like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
But the role said
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
but I did not know how to use .active class to one of my news because it is foreach loop.
All of my news has been under each other also, the left and right controls not working
Here is a screenshot of news slider result now
The code now:
HomeController.cs
public ActionResult Index()
{
return View(db.News.ToList());
}
Index.cshtml
#model IEnumerable<Project.Models.News>
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/bootstrap")
<!--Start slide code-->
<div class="container imgs">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item active"> //My mistake is here, how to make first news of class active?
<div class="item ">
#{ string imageBase64 = Convert.ToBase64String(item.newImg);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
<img src="#imageSrc" />
}
<div class="carousel-caption">
<h3>#item.newName</h3>
Read More
#*<button type="button" class="btn btn-default">Read More</button>*#
</div>
</div>
</div>
</div>
}
<!-- Left and right controls -->
<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>
Any help?
To add class="active" to the first element in the list you can either:
#{int v = 0;}
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item#(v == 0 ? " active" : "")">
#item.newName
</div>
</div>
v++;
}
Or:
#foreach (var item in Model.Select((value, i) => new { i, value }))
{
<div class="carousel-inner">
<div class="item#(item.i == 0 ? " active" : "")">
#item.value.newName
</div>
</div>
}
Related
I am able to retrieve data from database and displaying it in Carousel, one item at a time, but my requirement is to show multiple item (2 items) at a time in one slide. I have tried but could not achieve it. Below is my code for reference:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"
data-pause="hover" data-wrap="true">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#{int i = 0; }
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="item #active">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
<div class="carousel-caption d-none d-md-block">
<h5>#item.A_Title</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
}
</div>
<!-- Left and right controls -->
<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>
Controller:
public ActionResult
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}
It's ugly solution and has redundant code, but works I think.
The idea is to have how many slider containers equal to models and each of them has one 'current' element and the next one.
Active class is set on the parent of two items.
The view
#model List<WebApplication1.Controllers.ModelModel>;
#{
ViewData["Title"] = "Home Page";
}
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#for (var index=0; index< Model.Count; index++)
{
var item1 = Model[index];
var item2 = Model[index+1<Model.Count?index+1: 0 ];
var active = index == 0 ? "active" : string.Empty;
<div class="carousel-item #active">
<div class="wrapper">
<div class=" half-item">
<div>#item1.Title</div>
<div>#item1.Desc </div>
</div>
<div class=" half-item">
<div>#item2.Title</div>
<div>#item2.Desc </div>
</div>
</div>
</div>
}
</div>
</div>
<style>
.wrapper {
display:flex;
justify-content:space-between;
}
.half-item {
width:49%;
border:1px solid black;
}
</style>
and controller method (easy part)
public IActionResult Index()
{
var model = Enumerable.Range(1, 4).Select(x => new ModelModel() {
Title = $"Title{x}",
Desc =$"Description{x}{x}"
}).ToList();
return View(model);
}
Well, I have used the logic suggested by # benuto and added little bit of modification and it worked. I am posting the answer for if anyone needs it.
<div class="carousel-inner" role="listbox" style="border:2px solid red;">
#foreach (var item in Model)
{
for (var index = 0; index < Model.Count; index++)
{
var item1 = Model[index];
//var item2 = Model[index + 1 < Model.Count ? index + 1 : 0];
var active = index == 0 ? "active" : string.Empty;
<div class="item #active">
<div class="row">
<div class="col-xs-3">
<img src="#Url.Content(item.AchievementCategory.Cat_Img)" alt="#item.A_Title" class="img-responsive" />
</div>
<div class="col-xs-3">
<img src="#Url.Content(item1.AchievementCategory.Cat_Img)" alt="#item1.A_Title" class="img-responsive" />
</div>
</div>
</div>
}
}
</div>
public ActionResult CAchievements()
{
var list = db.Achievements.OrderByDescending(x => x.A_Id).ToList();
return View(list);
}
I am trying to use the bootstrap 4 gallery however I am a bit lost I have my carsoul showing just with dummy data at present.
As you will notice the bootstrap carousel identifies each image with a number I need to know how to handle this.
This is the orginal code pen I found
https://codeply.com/go/tBbcVXe1xZ
I tried to setup a dotnetfiddle but was unsure how the models works on the online compiler
https://dotnetfiddle.net/Cc5ahV
I have to account for this on the mini pictures
id="carousel-selector-1" data-slide-to="1"
And this for the large pictures
Where the numbers in both should increase per photo
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
#foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
The model would be
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
Edit 2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
I have tried the following razor but it doesnt produce what i need from the code pen
The above html is produced by the below razor but its not working the next and previous.
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item #active" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-#j" class="selected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>
For anyone else this is what works I just had to do a counter in relation to the loop.
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="#active carousel-item" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item #active">
<a id="carousel-selector-#j" class="#isSelected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>
i was searching a bit and i really need to know how to use the bootstrap 4 class Carousel As a list of some model data ?
i tried to manage in my own and i made something like this in the view :
#model IEnumerable<ElMatrodySite.Models.NewsData>
<link href="~/Content/Home.css" rel="stylesheet" />
#{
ViewBag.Title = "Home Page";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<div class="container">
<div style="width:100%;height:150px;padding-top:0px; direction:rtl;">
<div class="row">
<div class="col-xl-4">
<img src="~/photos/Logo.png" class="mx-auto d-block" style="height:250px;"/>
</div>
<div class="col-xl-8" style="text-shadow:0px 4px 10px #808080; color:#352c5e;">
<br />
#if (Request.IsAuthenticated)
{
ElMatrodySite.Models.ApplicationUser Apps = new ElMatrodySite.Models.ApplicationUser();
<h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بك #Apps.Firstname في موقع أسرة المطرودي !</h2>
}
else
{
<h2 class="mx-auto d-block text-center" id="ccword">مرحبًا بكم في الموقع الرسمي الجديد لأسرة المطرودي !</h2>
}
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="container">
<div class="col-xl-6" style="padding-top:150px;" id="xcard">
<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="~/NewsPhotos/#item.file" class="image img-responsive">
<div class="carousel-caption">
<h3>#item.ArticleTitle</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>
</div>
that's wrong because every item in the list needs an id in the data-slide-to
and also one of them have to be active but it's possible while working with foreach to get the list of data.
this is the code in the controller :
[HttpGet]
public ActionResult Index()
{
List<NewsData> slideList = new List<NewsData>();
using (MatrodyEntities db = new MatrodyEntities())
{
var type = new NewsData();
slideList = db.NewsData.Where(xx => xx.ArticleID == type.ArticleID).Take(5).ToList();
return View(from NewsData in db.NewsData.ToList() select NewsData);
}
}
As i'm taking the latest 5 items added to the database.
so i need a small tutorial to make a Carousel list with asp.net mvc without destroying the whole design.
As I understand, you want to get list of data from the database and want to use bootstrap Carousel. As i noticed in your action method, you are getting latest 5 records and not passing same to view, instead of this you are using
return View(from NewsData in db.NewsData.ToList() select NewsData);
You can use directly
return View(slideList);
And in your view you can use model list as below
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
#{
int i = 1;
}
#foreach (var item in Model)
{
<li data-target="#myCarousel" data-slide-to="#i" class="#(i == 1 ? "active" : "")"></li>
i++;
}
</ol>
<div class="carousel-inner">
#{
i = 1;
}
#foreach (var item in Model)
{
<div class="item #(i == 1 ? "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>
I am new to the world of MVC programming with C #, I already read the topic, made some examples and of course with the guide of StackOverflow I think I'm doing well.
However I find myself with an exercise that I want to perform and from which I have seen several answers but none has worked for me, and I come to you asking for the support.
Index
#{
ViewBag.Title = "Bienvenido";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="menu">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Inicio</li>
<li role="presentation">Datos Generales</li>
<li role="presentation">Datos Curriculares</li>
<li role="presentation">Experiencia Laboral</li>
<li role="presentation">Datos Laborales</li>
<li role="presentation">Cónyuge y Dependientes</li>
<li role="presentation">Inmuebles</li>
<li role="presentation">Vehículos</li>
<li role="presentation">Muebles</li>
<li role="presentation">Inversiones</li>
<li role="presentation">Adeudos</li>
<li role="presentation">Posible Conflicto de Intereses</li>
<li role="presentation">Observaciones</li>
</ul>
</div>
<div class="col-md-9">
<div class="row" id="opciones">
</div>
<div class="row" id="crear">
</div>
<div class="row" id="registros">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Create","Dependientes")', function (data) {
$('#crear').replaceWith(data);
});
});
});
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Mostrar","Dependientes")', function (data) {
$('#registros').replaceWith(data);
});
});
});
</script>
Partial View _Mostrar
#model List<projectD.Models.dependiente>
#{
ViewBag.Title = "_Mostrar";
}
<br />
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="card" style="width: 20rem; display:inline-block; margin-top:10px">
<img class="card-img-top" src="~/Content/images/familia.png" alt="Card image cap" width="50" height="50">
<div class="card-block">
<h4 class="card-title">Dependiente</h4>
<p class="card-text">
#item.nombre
<br />
#item.apellidoPaterno
<br />
#item.apellidoMaterno
<br />
#item.CURP
</p>
#Html.ActionLink("Detalle", "Details", new { id = item.idDependiente }, new {#class= "btn btn-primary"})
</div>
</div>
}
</div>
</div>
I have a project with a main view, which has a menu to the left when selecting each option to the right render two partial views each with its controller the first to add records and the second to display them.
main screen
What I want to do is that when I click on add record, only the partial views are updated and the URL is not reloaded since I would lose the menu option in which I am.
I hope you can support me
Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>
Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>