We Keep Coding

Cascading values and EventCallback in Blazor with layout component

I have three components that I want to pass values and eventcallbacks through:
First I have MainLayout that is a LayoutComponent
#inherits LayoutComponentBase
<div class="cms-container">
<div class="header">
<div class="header-logo">
CMS
</div>
<div class="header-settings">
<div class="header-settings__alert">
<i class="fa fa-bell"></i>
<div class="header-settings__alert--no">
<div class="header-settings__alert--no__text">
2
</div>
</div>
<ul class="cms-dropdown">
<li class="cms-dropdown__alert">
<span class="cms-dropdown__alert--status"><i class="fa fa-info-circle font-danger"></i></span>
<span class="cms-dropdown__alert--left">Följ upp händelse</span><span class="cms-dropdown__alert--right">1 dgr</span>
</li>
<li class="cms-dropdown__alert">
<span class="cms-dropdown__alert--status"><i class="fa fa-info-circle font-success"></i></span>
<span class="cms-dropdown__alert--left">Tidrapport behöver lämnas in</span><span class="cms-dropdown__alert--right">3 dgr</span>
</li>
</ul>
</div>
<div class="header-settings__org">
<span class="header-settings__org--text">
Kanal10.se
</span>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-tasks"></i>
</div>
<div class="cms-dropdown__normal--text">Uppgifter</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-users"></i>
</div>
<div class="cms-dropdown__normal--text">Användare</div>
</li>
</ul>
</div>
<div class="header-settings__account">
<i class="fa fa-user"></i>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-user"></i>
</div>
<div class="cms-dropdown__normal--text">Min profil</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-money-check"></i>
</div>
<div class="cms-dropdown__normal--text">Lönebesked</div>
</li>
</ul>
</div>
<div class="header-settings__system">
<div class="header-settings__system--icon">
<i class="fa fa-cog"></i>
</div>
<ul class="cms-dropdown">
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-bars"></i>
</div>
<div class="cms-dropdown__normal--text">Menyer</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-users"></i>
</div>
<div class="cms-dropdown__normal--text">Användare</div>
</li>
<li class="cms-dropdown__normal">
<div class="cms-dropdown__normal--icon">
<i class="fa fa-shield-alt"></i>
</div>
<div class="cms-dropdown__normal--text">Behörighetsgrupper</div>
</li>
</ul>
</div>
</div>
</div>
<div class="LeftNav">
<NavMenu />
</div>
<TelerikRootComponent>
<div class="cms-content">
#Body
</div>
</TelerikRootComponent>
<div class="footer">
<div class="footer-body">
<div class="footer-body__left">
</div>
<div class="footer-body__right">
<CascadingValue Value="visible">
<SaveAndCancelBtns OnBtnAction="?" />
</CascadingValue>
</div>
</div>
</div>
</div>
<BlazoredToasts Position="Blazored.Toast.Configuration.ToastPosition.TopCenter"
Timeout="3"
IconType="IconType.FontAwesome"
SuccessClass="success-toast-override"
SuccessIcon="fa fa-thumbs-up" />
#code {
private bool visible = false;
}
Then I have a child component called Buttons.razor
#if (visible == true)
{
<div class="footer-body__right--item">
<button class="btn btn-primary" #onclick="Save" type="submit">Save</button>
</div>
<div class="footer-body__right--item">
<button class="btn btn-cancel" #onclick="Cancel">Cancel</button>
</div>
}
[Parameter] public EventCallback<string> OnBtnAction { get; set; }
[Parameter] public bool visible { get; set; }
private void Save()
{
OnBtnAction.InvokeAsync("Save");
}
private void Cancel()
{
OnBtnAction.InvokeAsync("Cancel");
}
}
And then I have the component razor page called pageDetail.razor
#page "/pages/detail/{Id}"
#page "/pages/detail"
<div class="wrapper">
<div class="cms-content__title">
<div class="cms-content__title-left">
Page Detail
</div>
</div>
<div class="cms-content__page">
<div class="cms-content__page-all">
#if (cmsPage == null)
{
<ErrorMessage Message="Loading..." />
}
else
{
<div class="col-6">
<EditForm Model="cmsPage" OnValidSubmit="SavePage">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="PageTitle">Page Title</label>
<InputText #bind-Value="#cmsPage.PageTitle" class="form-control" id="PageTitle"></InputText>
</div>
<div class="form-group">
<label for="PageTitle">Page Descr</label>
<InputTextArea #bind-Value="#cmsPage.PageDescr" class="form-control" id="PageTitle"></InputTextArea>
</div>
<div class="form-group">
<label for="PageTitle">Page Url</label>
<InputText #bind-Value="#cmsPage.UrlName" class="form-control" id="PageTitle"></InputText>
</div>
<div class="form-group">
<label for="PageTitle">Page Type</label><br />
<TelerikComboBox Data="#cmsPageTypes" TextField="PageType" Width="100%" ValueField="PageTypeId" #bind-Value="selectedValue">
</TelerikComboBox>
<ValidationMessage For="#(() => cmsPage.PageTypeId)" />
</div>
<div class="form-group">
<label for="PageTitle">Parent Page</label><br />
<TelerikTreeView Data="#cmsPages" OnItemClick="#OnItemClickHandler">
<TreeViewBindings>
<TreeViewBinding IdField="PageId" TextField="PageTitle" ParentIdField="ParentId" HasChildrenField="false"></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
</div>
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" #onclick="DeletePage">Delete</button>
<button class="btn btn-info" #onclick="BackToList">Back To List</button>
</EditForm>
</div>
}
</div>
</div>
</div>
#code{
"not sure how to implement the event button action"
}
What I want is to:
On PageDetail set a parameter for visible and if it is true show the buttons in Buttons.razor or hide them
When clicking on a buttton in buttons.razor handle the event on PageDetail.razor for the EditForm there
The thing is how to handle the component that is a LayoutComponent. Not sure how it fits in the logic.
As you can see I have started implementing it but am not sure of how to connect the different parts.
Grateful for help!
Peter

I'd recommend looking at this article: https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/ but you're part of the way there by using the <CascadingParameter> in your layout.
In your case I'm not keen on using a boolean visible as a cascading parameter, it's a bit simplistic. The cascading value is also in the wrong place for this as it needs to wrap both the #Body render and the buttons.
I'd create a state class and cascade that class to any child that wants to use it, by wrapping the #Body and the <SaveAndCancelBtns ..>
<CascadingValue Value="buttonState" >
<TelerikRootComponent>
<div class="cms-content">
#Body
</div>
</TelerikRootComponent>
<div class="footer">
<div class="footer-body">
<div class="footer-body__left">
</div>
<div class="footer-body__right">
<SaveAndCancelBtns />
</div>
</div>
</div>
</CascadingValue>
You also need to add a value in the layout code:
ButtonStates buttonState = new ButtonStates();
The ButtonStates class should provide the values and events you need, e.g.
public class ButtonStates
{
public bool Visible { get; private set; }
// etc
}
Rather than put all the code here I've created a simple sample repo on github for you:
https://github.com/conficient/CascadingStateExample
Note that I've just used a simple state container and event to pass events from it. EventCallback<T> is specifically used to wire up events between Razor components.

MVC C# Carousel Image

i have been trying to create a carousel image on my MVC application. The below snippet from W3 was just used as an example. The result was the images displayed ont he webpage one below eachother. Do i need to do anything else on the MVC application to resolve this?
<div class="container">
<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 -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
</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>

I had the same requirement sometime ago and I used below code, look if it works for you.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#{
var first = true;
}
#foreach (var item in ViewBag.Images)
{
<div class="carousel-item #(first?Html.Raw("active"):Html.Raw(""))">
<img class="d-block w-100" src="#item.Image" alt="#item.Name">
</div>
first = false;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Please Try this.I hope your problem is solved
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="carousel-item #active">
<img src="#Url.Content(#item.FilePath)" alt="">
</div>
}
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

How to pass property to modal in ASP.NET MVC Razor view?

I have a razor view as below C# ASP.NET MVC. This view populate summary rows for transaction on a bank account per day. User can clicks each row to view details of each day. When user click each row a modal appears and user select to see details about payments or receptions.
My problem is the link to view these details in modal are related to date clicked by user so I need to generate link when modal appears and it is not known before rendering view in server side.
I know that I can handle this situation using jQuery and ajax but since I have no knowledge about front-end I don't know how to handle this situation.
#model IEnumerable<WebApplication1.Models.BankAccountDailySummary>
#{
ViewBag.Title = "BankAccountDailySummary";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="wrapper">
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column fadeInRight animated faster">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<div class=" sticky-top ios-content-box-header p-1">
<nav class="topbar container-fluid pr-16p">
<div class="row font-12 " style="height: 45px">
<div class="col-3 text-right m-auto color-orange pl-1 pr-1"></div>
<div class="col-6 px-1 text-center m-auto text-gray-900 f-w-600 text-overflow-dot">#ViewBag.accountName</div>
<div class="col-3 text-left m-auto color-orange pr-1 pl-1"> return<i class="fas fa-chevron-left fa-fw mr-1 color-orange"></i></div>
</div>
</nav>
</div>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid px-0 head-foot-margin min-h-content">
<!-- Page Heading -->
<form class="user" action="">
<span class="col-12 text-gray-900 font-12 d-inline-block px-4 pb-2 ">Time interval</span>
<div class="ios-content-box px-4 py-3 mb-3 sticky-top" style="top:49px">
<div class="row ">
<i class="fas fa-search fa-fw m-auto d-block text-gray-500 pt-2"></i>
<div class="form-group float-right col-4 input-style-1">
<input title="" id="dateValue_1" type="text" class="example1 form-control form-control-user d-inline" />
</div>
<a onclick="clearValue('dateValue_1')" class="col-1 p-0"><i class="fas fa-trash-alt fa-fw m-auto d-block text-gray-500 pt-2"></i></a>
<div class="form-group float-right col-4 input-style-1">
<input title="" id="dateValue_2" type="text" class="example1 form-control form-control-user d-inline" />
</div>
<a onclick="clearValue('dateValue_2')" class="col-1 p-0"><i class="fas fa-trash-alt fa-fw m-auto d-block text-gray-500 pt-2"></i></a>
</div>
</div>
#if (Model != null)
{
foreach (var item in Model)
{
<a href="#" data-toggle="modal" data-target="#exampleModal" date =" #item.Date">
<div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
<div class="row font-12 my-2 ios-divider-line">
<div class="col-10 f-w-600 color-orange text-right">#ViewBag.accountName</div>
<div class="col-2 text-left"> <i class="fas fa-chevron-left fa-fw color-orange "></i></div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Receptions</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalPayment)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Payments</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalReception)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Remaining</div>
<div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>#Html.DisplayFor(modelItem => item.Remain)</div>
</div>
</div>
</a>
}#*foreach item*#
}#*if model was not null*#
</form>
</div>
<!-- /.container -->
<div class=" sticky-top ios-content-box-footer p-1" style="bottom: 0">
<nav class="bottom-bar container-fluid pr-15p" style="height: 40px;">
<div class="row font-12 " style="height: 40px">
<div class="col-6 text-right m-auto text-gray-900">Total items found: </div>
<div class="col-6 d-inline m-auto color-orange text-left">#ViewBag.itemCount</div>
</div>
</nav>
</div>
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 50%">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-0 ">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 10">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title modal-title-ios font-13 f-w-600 text-gray-900">Select Type of Report:</h5>
</div>
<div class="modal-body">
<div class=" w-100 " style="overflow: auto">
<div class="row justify-content-center m-0">
<div class=" col-6 col-sm-4 text-center mb-2"><div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/debit-card.svg" class="max-w-55 m-auto"><div class="font-12 mt-2">Payments</div></div></div>
<div class=" col-6 col-sm-4 text-center mb-2"><div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/income.svg" class="max-w-55 m-auto"><div class="font-12 mt-2">Receptions</div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Page Wrapper -->

It's quite easy to do with jQuery(I hope that your modal comes from bootstrap framework).
You just have to subscribe to show modal event, fetch the date parameter from the pressed link, generate full links and populate modal links' href attributes.
You might find this docs helpfull.
// define base link url(without date parameter)
var testLink = '/Banks/BankAccountDailyDeatils?accountId=1&accountName=test';//just for display purposes, you should use generated link as a base url
var link = '#Url.Action("BankAccountDailyDeatils", "Banks", new { accountId = ViewBag.accountID, accountName = ViewBag.accountName })';//perhaps it must be encoded properly
//subscribe to the show modal event
$('#exampleModal').on('show.bs.modal', function(e) {
//retrieve pressed button from the event
var button = $(e.relatedTarget); // Button that triggered the modal
//retrieve the date parameter from the button
var date = button.data('date'); // Extract info from data-* attributes
//populate links' href attributes
$('#paymentsLink').attr('href', testLink + '&isPayment=true&date=' + date);
$('#receptionsLink').attr('href', testLink + '&isPayment=false&date=' + date);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<a href="#" data-toggle="modal" data-target="#exampleModal" data-date="2019-12-12">
<div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
<div class="row font-12 my-2 ios-divider-line">
<div class="col-10 f-w-600 color-orange text-right">#ViewBag.accountName</div>
<div class="col-2 text-left"> <i class="fas fa-chevron-left fa-fw color-orange "></i></div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Receptions</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalPayment)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Payments</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalReception)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Remaining</div>
<div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>#Html.DisplayFor(modelItem => item.Remain)</div>
</div>
</div>
</a>
<a href="#" data-toggle="modal" data-target="#exampleModal" data-date="2020-01-14">
<div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
<div class="row font-12 my-2 ios-divider-line">
<div class="col-10 f-w-600 color-orange text-right">#ViewBag.accountName</div>
<div class="col-2 text-left"> <i class="fas fa-chevron-left fa-fw color-orange "></i></div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Receptions</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalPayment)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Payments</div>
<div class="col-6 text-gray-600 text-left digit_divider">#Html.DisplayFor(modelItem => item.TotalReception)</div>
</div>
<div class="row font-12 my-2 ios-divider-line">
<div class="col-6 text-gray-600 text-right">Remaining</div>
<div class="col-6 text-gray-900 f-w-600 text-left digit_divider">>#Html.DisplayFor(modelItem => item.Remain)</div>
</div>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="padding-top: 50%">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-0 ">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="z-index: 10">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title modal-title-ios font-13 f-w-600 text-gray-900">Select Type of Report:</h5>
</div>
<div class="modal-body">
<div class=" w-100 " style="overflow: auto">
<div class="row justify-content-center m-0">
<div class=" col-6 col-sm-4 text-center mb-2">
<a href="#" id="paymentsLink">
<div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/debit-card.svg" class="max-w-55 m-auto">
<div class="font-12 mt-2">Payments</div>
</div>
</a>
</div>
<div class=" col-6 col-sm-4 text-center mb-2">
<a href="#" id="receptionsLink" class="ios-nav-link text-gray-900">
<div class=" bg-white border shadow-sm border-radius-10 home-items p-3"><img src="~/assets/icons/income.svg" class="max-w-55 m-auto">
<div class="font-12 mt-2">Receptions</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How we can divide row in 3 columns in foreach loop

I want to divide a row into 3 columns in a foreach loop using asp.net mvc core
This is my code
#foreach (var item in Model)
{
<div class="container">
<h3 class="h3">Products</h3>
<div class="row">
<div class="col-md-4 col-lg-3">
<div class="product-grid2">
<div class="product-image2">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
</a>
<ul class="social">
<li><i class="fa fa-eye"></i></li>
<li><i class="fa fa-shopping-bag"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
</ul>
<a class="add-to-cart" href="">Add to cart</a>
</div>
<div class="product-content">
<h3 class="title">Women's Designer Top</h3>
<span class="price">$599.99</span>
</div>
</div>
</div>
</div>
</div>
}
Here's the output
I would like to move that 2nd product into the 2nd column of the first row
Anu ideas?

It seems like your foreach loop is on the wrong line. You were creating multiple containers because the container itself was in the foreach loop, while I guess you only want the div with the products in there.
<div class="container">
<h3 class="h3">Products</h3>
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4 col-lg-3">
<div class="product-grid2">
<div class="product-image2">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
</a>
<ul class="social">
<li><i class="fa fa-eye"></i></li>
<li><i class="fa fa-shopping-bag"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
</ul>
<a class="add-to-cart" href="">Add to cart</a>
</div>
<div class="product-content">
<h3 class="title">Women's Designer Top</h3>
<span class="price">$599.99</span>
</div>
</div>
</div>
}
</div>
</div>
I do not know your browser requirements and the following is not a Razor template solution.
However, you might want to check out CSS grid and/or flexbox:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It will give you a bunch more options when creating a responsive website.

Html/Css CSHTML - Accordion not opening for SOME items

My issue is that I am creating a comments section for a page. Each comment can have a number of replies. I am using bootstrap accordion to achieve this and by dynamically creating the accordions via C# MVC code. I cant work out why some of the accordions open correctly and some do not. each comment is comprised of a comment, an edit button a delete button and a reply button.
Sometimes the Accordion will not open, but when I go to the inspection hatch in Chrome, I can put the "show" keyword into the div I want to expand, and it does so.
Here is the rendered code. I dont think the issue is the C# code as the accordions sometimes open. is there a hierarchy thing going on that I dont know about? BTW the first div is an outermost accorion to show or hide all the comments.
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion" href="#div-10" data-toggle="collapse" aria-expanded="true">
<span class="btn-accordion-arrow comments-top"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="div-10" style="">
<br>
<br>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:0px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:41</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#0d41c31f-8629-4f02-bf4c-64af8f830975" data-toggle="collapse" data-target="#0d41c31f-8629-4f02-bf4c-64af8f830975" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="0d41c31f-8629-4f02-bf4c-64af8f830975">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-0d41c31f-8629-4f02-bf4c-64af8f830975"> First Comment for Dispute 001 - PARENT</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="0d41c31f-8629-4f02-bf4c-64af8f830975" href="#" onclick="deleteComment('0d41c31f-8629-4f02-bf4c-64af8f830975');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="0d41c31f-8629-4f02-bf4c-64af8f830975" id="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" name="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:45</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#612de2eb-f33c-4b30-b69c-825d0c8171bd" data-toggle="collapse" data-target="#612de2eb-f33c-4b30-b69c-825d0c8171bd" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="612de2eb-f33c-4b30-b69c-825d0c8171bd">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-612de2eb-f33c-4b30-b69c-825d0c8171bd"> Second Comment for Dispute 001 - First Child</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="612de2eb-f33c-4b30-b69c-825d0c8171bd" href="#" onclick="deleteComment('612de2eb-f33c-4b30-b69c-825d0c8171bd');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="612de2eb-f33c-4b30-b69c-825d0c8171bd" id="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" name="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:51</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#a869e748-f0c3-461a-89bb-07bf29620d66" data-toggle="collapse" data-target="#a869e748-f0c3-461a-89bb-07bf29620d66" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="a869e748-f0c3-461a-89bb-07bf29620d66" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-a869e748-f0c3-461a-89bb-07bf29620d66"> First REPLY for Dispute 001 - to comment 1</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="a869e748-f0c3-461a-89bb-07bf29620d66" href="#" onclick="deleteComment('a869e748-f0c3-461a-89bb-07bf29620d66');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="a869e748-f0c3-461a-89bb-07bf29620d66" id="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" name="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 15:12</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#c768c95c-d926-41f7-a237-8b6803c9521d" data-toggle="collapse" data-target="#c768c95c-d926-41f7-a237-8b6803c9521d" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="c768c95c-d926-41f7-a237-8b6803c9521d" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-c768c95c-d926-41f7-a237-8b6803c9521d"> Second REPLY for Dispute 001 - to comment that was working</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="c768c95c-d926-41f7-a237-8b6803c9521d" href="#" onclick="deleteComment('c768c95c-d926-41f7-a237-8b6803c9521d');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="c768c95c-d926-41f7-a237-8b6803c9521d" id="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" name="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
</div>
*** As you can see the rendered code looks ok,here is the C# View .cshtml:--
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion collapsed" href="#div-10" data-toggle="collapse" aria-expanded="false">
<span class="btn-accordion-arrow comments-top"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="div-10">
<br /><br />
#if (Model.DisputeComments != null)
{#*list of comment lists*#
foreach (var list in Model.DisputeComments)
{ #*comment list*#
foreach (var comment in list)
{
var indent = comment.ParentID != Guid.Empty ? "40px" : "0px";
var containerName = comment.ParentID == Guid.Empty ? comment.Id : comment.ParentID; #*use for removing on delete*#
<div class="container-fluid-#containerName" style="padding-left:#indent">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">#comment.IbasUser.FirstName #comment.IbasUser.LastName • </span><span class="blue-slate-text">#comment.EntryDate.ToString("dd-MMM-yyyy HH:mm")</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="##comment.Id" data-toggle="collapse" data-target="##comment.Id" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="#comment.Id">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-#comment.Id"> #comment.Description</span>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="#comment.Id" href="#" onclick="deleteComment('#comment.Id');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
#{
var isChecked = "checked";
if (comment.ShareWithCustomer == false) { isChecked = "unchecked"; }
}
<input type="checkbox" value="#comment.Id" id="shareWCustomer-#comment.Id" name="shareWCustomer-#comment.Id" #isChecked> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="~/Content/Images/icon-replies.png" class="img-responsive icon-replies" />
</div>
</div>
<hr class="hr-white" />
<br />
</div>
</div>
} #* end of inner for each *#
} #*end of outer for each*#
}
</div>#*end of Comments accordian*#
#* end of container *#
** I tried to add the CSS but as usual Stack overflow said it was unformatted, I will try and add it after I post this lot. Thanks for any help!

I finally got to the bottom of my issue. The Collapsing divs were using the current comments GUId as an identifier. I did this because the comments are rendered on the fly and the Comment id is used for editing and deleting the comment within the div. I stripped out all but the collapse div and button, but it still didnt work. This is when I substituted the GUID for a counter as an identifier for the collapse div. This did the trick and the accordion works as normal. I dont know why a GUID as an ID should flummox the Accordion, especially as I use GUIDs as ids when rendering lists to html on the fly quite often. In any case I take it as a win. Thanks to Pete for having a look.