Following code is executed fine
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name
</a>
</h2>
</div>
</div>
}
this works also
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<text>#item.SeName</text>
#*<a href="#Url.RouteUrl("Category", new { SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name
</a>*#
</h2>
</div>
</div>
}
But when I want to write same code with simple a href attribute as below, VS ignores the line. I cant even set a break point over the line a href. Am I doing something wrong?
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<a href="#item.SeName" title="#item.PictureModel.Title" />
</h2>
</div>
</div>
}
Add link text:
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
#item.PictureModel.Title
</h2>
</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 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'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 :
I am using visual studio MVC and I did a C# foreach loop menu of food and using bootstrap framework. I can't figure away out to remove the before and after elements that are being created and they are blank. Here is my code:
<div class="container">
#foreach (var mName in Model)
{
<div class="col-md-6">
<p class="menu-list">#mName.menuName</p>
</div>
<div class="col-md-6">
<p class="menu-list-des">#mName.menuDescription</p>
</div>
<div class="col-md-6">
<p class="menu-list">#mName.menuTwo</p>
</div>
<div class="col-md-6">
<p class="menu-list-des">#mName.menuTwoDescription</p>
</div>
}
</div>
Is there away to remove the extra elements?