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);
}
Related
I create form where I get data from database using sql queries in asp.net core mvc. Now I want to search data with multiple fields like price, area, areaUnit . I am new to c# Kindly help me to search data and display. Data display in other div. In that div I make cards and get data from database using foreachloop.
MY view :
#model IEnumerable<eHouse.Models.RentModel>
<form>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" style="width: 700px; color:#000000; text-align: left;" placeholder="Search Houses" onclick="filterfunction()">
<button type="submit" class="searchButton" >
<i class="fa fa-search"></i>
</button>
</div>
<div id="filter">
<select>
<option value="Kanal">Kanal</option>
<option value="Marla">Marla</option>
<option value="Square Feet">Square Feet</option>
<option value="Square Meter">Square Meter</option>
<option value="Square Yards">Square Yards</option>
</select>
<input type="text" placeholder="area" />
<input type="text" placeholder="price" />
</div>
</div>
</form>
<div class="property_information" >
#foreach (var item in Model)
{
<div class="home-info">
<span id="houseid">
</span>
<a href="#" class="home-images">
<img src="#item.pic1" />
</a>
<div class="home-data">
<div class="home-name">
<p>#item.tittle</p>
</div>
<div class="price">
<p>#item.price</p>
</div>
<div class="features">
<span>
#item.bedroom
</span>
<span>
#item.bathroom
</span>
<span>
2
</span>
</div>
<div class="desc">
#item.descrip
</div>
<div class="contact-save">
<a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="#item.id" >
<i class="fas fa-heart" style=" color: white;"></i>
</a>
<div class="popup" onclick="myFunction()">
<a href="tel:+928754756478" class="phone_number" onclick="call()">
</a>
</div>
<div class="popupmsg" onclick="myFunctionmsg()">
<a href="#" class="phone_number open_message" onclick="msg()">
</a>
</div>
<a href="#" class="phone_number" onclick="del(this)" data-id="#item.id">
<i class="fas fa-trash-alt" style=" color: white;"></i>
</a>
</div>
</div>
</div>
}
</div>
My Controller:
public IActionResult Rent(int PageNumber = 1)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
return View(data);
}
Pass the filter data through a input submit in the form. You will need new viewModel with your data, input for post and filterList
You need something like this,
#model YourViewModel;
//Your form
<label asp-for="Input.Name"></label>
<select asp-for="Input.Name" asp-items="#(new SelectList(Model.SearchList))" class="form-control">
<option></option>
</select>
<span asp-validation-for="Input.Name" class="text-danger"></span>
<input type="submit" value="Search" class="btn btn-primary"/>
//your loop
#foreach (var item in Model.Data)
//Contoller
public IActionResult Rent(int PageNumber = 1, InputModel input)
{
var data = rdb.GetDataHouse();
var datas = rdb.GetDataHouse();
ViewBag.Data = datas.ToList().Take(6);
ViewBag.Totalpages = Math.Ceiling(data.Count()/6.0);
if(!string.InNullOrEmpty(input.Name))
{
data = data.Where(x => x.Name == input.Name).ToList();
}
data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();
var viewModel = new YourViewModel
{
Data = data // data,
SearchList = your List<string>(), //for dropdown
Input = new YourInputModel(),
}
return View(viewModel);
}
//Input model
public class YourInputModel
{
public string Name { get; set; }
}
//View model
public class YourViewModel
{
public YourDataType Data{ get; set; }
public List<strings> SearchList { get; set; }
public YourInputModel Input { get; set; }
}
You also need some other things, which I hope you will handle
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 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>
}
I am using Bootstrap carousel slider script inside Repeater but its not working proper.I have projects database table i want to display this projects in slide 3 project by one slider each slide has 3 project . my code display one project per slide i don't know how to make it please help me .
Each slide : 1 2 3 then second one 4 5 6 at the same row with slider
this link has the same slide i want slider i want like it
<!-- Begin Carousel -->
<div class="row">
<div id="realto-carousel-afee" class="carousel slide">
<div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">All</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>
<div class="carousel-inner">
<asp:Repeater runat="server" ID="ProjectsRepater">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
<div class="col-lg-4 col-md-4 col-sm-4 col-sx-12">
<div class="box-container">
<div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span>
<div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div>
</a> <span class="prop-tag"></span>
<div class="prop-info">
<h3 class="prop-title">
<asp:Label ID="ProjId" runat="server" Visible="false" Text='<%# Eval("ID")%>'></asp:Label>
<asp:Label Text='<%# Eval("ProjectName")%>' ID="lblProjName" runat="server"></asp:Label>
</h3>
<ul class="more-info clearfix">
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span>
<label id="lblArea" runat="server" class="qty pull-right">2</label>
</li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblPaymentsSystem" runat="server" class="qty pull-right">2</span> </li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblReceivedDate" runat="server" class="qty pull-right">2</span> </li>
</ul>
</div>
<!-- prop-info -->
</div>
<!-- holder -->
</div>
<!-- box-container -->
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void Page_Load(object sender, EventArgs e)
{
// RepeterData();
ProjectsRepater.DataSource = GetAllProjecct();
ProjectsRepater.DataBind();
}
public class Proj
{
public int ID { get; set; }
public string ProjectName { get; set; }
}
public List<Proj> GetAllProjecct()
{
List<Proj> listproj = new List<Proj>();
SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings ["AlamarConnectionString"].ConnectionString);
SqlCommand com = new SqlCommand("Select ID,ProjectName from Projects", con);
con.Open();
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
Proj cnt = new Proj();
cnt.ID = Convert.ToInt32(reader["ID"]);
cnt.ProjectName = Convert.ToString(reader["ProjectName"]);
listproj.Add(cnt);
}
return listproj;
}
See this codepen, I think this will solve your problem
HTML
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide1">slide 1 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide2">slide 2 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide3">slide 3 content here</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide4">slide 4 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide5">slide 5 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide6">slide 6 content here</div>
</div>
</div>
</div>
</div>
</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>
CSS
.slide {
height: 200px;
color: #fff;
font-size: 20px;
}
.slide1 {
background: red;
}
.slide2 {
background: yellow;
}
.slide3 {
background: blue;
}
.slide4 {
background: orange;
}
.slide5 {
background: green;
}
.slide6 {
background: violet;
}
http://codepen.io/Arshmeet/pen/BQKrOb
Follow a complete example of carousel that calls ajax in controller to populate 3 slides. I call just 1 record each calling for better performance but you can change.
View:
<div class="carousel slide" id="main-slide" data-ride="carousel">
<ol class="carousel-indicators text-center">
<li data-target="#main-slide" data-slide-to="0" class="active"></li>
<li data-target="#main-slide" data-slide-to="1"></li>
<li data-target="#main-slide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" id="home1-link1">
<img id="home1-imagem1" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption1"><div id="home1-legenda1"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link2">
<img id="home1-imagem2" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption2"><div id="home1-legenda2"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link3">
<img id="home1-imagem3" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption3"><div id="home1-legenda3"></div></div>
</a>
</div>
</div>
<div class="slides-control">
<a title="Imagem Anterior" id="tras-home1-slide" class="carousel-control" href="#main-slide" data-slide="prev">
<i class="fa fa-angle-left"></i></a>
<a title="Imagem Posterior" id="frente-home1-slide" class="direita carousel-control" href="#main-slide" data-slide="next">
<i class="fa fa-angle-right"></i></a>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
var nrReg = 0;
var pag = "";
var i = 1;
var selecaoJquery = "";
var removeuTerceiroSlide = false;
function slide1() {
$.ajax({
url: "/Image/Slide",
type: "POST",
data: { "nrRegistro": nrReg },
ifModified: true,
cache: true,
async: true,
dataType: "json",
success: function (data) {
if (i == 2 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
removeuTerceiroSlide = true;
return;
}
else if (i == 3 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
if (removeuTerceiroSlide == true) {
$("#item-main-slide2").remove();
$("#carousel-indicator2").remove();
}
return;
}
if (i > 1) {
selecaoJquery = "#carousel-indicator" + i;
$(selecaoJquery).show();
}
selecaoJquery = '#home1-legenda' + i;
$(selecaoJquery).html(data[0].DescricaoLegenda);
selecaoJquery = '#home1-link' + i;
if (data[0].URLPagina == null) {
$(selecaoJquery).attr('href', '/lista/produtos');
}
else {
$(selecaoJquery).attr('href', '/produto/' + data[0].URLPagina);
}
selecaoJquery = '#home1-imagem' + i;
$(selecaoJquery).attr("src", data[0].EnderecoImagem).attr("title", data[0].Descricao)
.attr("alt", data[0].DescricaoAlternativa).attr("width", data[0].Largura).attr("height", data[0].Altura);
selecaoJquery = '#home1-caption' + i;
$(selecaoJquery).css('background-color', data[0].CorFundoLegenda);
i++;
}
});
};
nrReg = 1;
slide1();
nrReg = 2;
setTimeout(slide1(), 400);
nrReg = 3;
setTimeout(slide1(), 900);
$('#main-slide').carousel({ interval: 6000 });
});
</script>
}
Controller (/Image/Slide):
[HttpPost]
public async Task<JsonResult> Slide(int nrRegistro)
{
var recs = (from d in db.Imagem
where d.IdPostagemImagem == 1 &&
d.EnderecoImagem.Length > 0
orderby d.IdImagem
select new
{
d.IdImagem,
d.DescricaoLegenda,
d.EnderecoImagem,
d.CorFundoLegenda,
d.CorFundoLegendaMobile,
d.Descricao,
d.Largura,
d.Altura,
d.DescricaoAlternativa,
d.PosicaoHorizontalLegenda,
d.Produto.URLPagina
});
if (nrRegistro > 1)
{
nrRegistro--;
recs = recs.Skip(nrRegistro).Take(1);
}
else
recs= recs.Take(1);
return Json( await recs.ToListAsync());
}
I'm using ASP.Net MVC5 with Razor engine, and I want to use a foreach in another foreach
#foreach(var item in Model.Table1)
{
....
#foreach(var item in Model.Table2)
{
...Bootstrap Carousel
}
}
outside foreach shows all items in Table1 but inside foreach shows some images in Table2.
I Don't know how do it :/
this is my code , but it don't work:
HTML:
#foreach (var item in Model.SubGoods)
{
<div style="background-color: #f5f5f5; text-align: center;padding:0px; " class="col-xs-12 col-sm-6 col-md-4 col-lg-3 text-center HoverBorder">
<div style="padding:10px;background-color:white;">
<div style="background-color: #f5f5f5; border: 3px solid #f5f5f5;">
<a href="#Url.Action("GoodDetails", "Home", new { id = #item.SubGoodID })">
<img class="img-responsive" src="#Url.Content(item.SubGoodImage.ToString())" />
</a>
</div>
<div style="border: 3px solid #f5f5f5;">
<h5 class="h">modelNumber : #item.SubGoodModelNumber</h5>
<h5 class="h">Type : #item.SubGoodGender</h5>
<hr style="background-color: #f5f5f5; height: 0.5px; width: 100%" />
<h5 class="h">#item.SubGoodName</h5>
<h5 class="h">#item.SubGoodInfo</h5>
<h5 class="h div2"> #item.NishtmanCode</h5>
<span class="div1">:ProductCode</span>
</div>
</div>
</div>
//----------------------
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
#foreach (var item1 in Model.GoodDetails)
{
if (item1 == Model.GoodDetails.FirstOrDefault())
{
<div class="item active">
<div class="col-xs-3"><img style="width:40px;height:40px;" src="#item1.DetailsImage" class="img-responsive"></div>
</div>
}
else
{
<div class="item">
<div class="col-xs-3"><img style="width:40px;height:40px;" src="#item1.DetailsImage" class="img-responsive"></div>
</div>
}
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
//----------------------
}
Also I don't know where write query for some images in inside foreach
HomeController :
public ActionResult Goods(int id)
{
HomeVM vm = new HomeVM();
vm.SocialNetworks = blSocialNetwork.select();
var goods = db.SubGoods.Where(p => p.FKMainGoodID == id).ToList();
vm.SubGoods = goods;
return View(vm);
}
I want something like this :