I'm trying to display a grid of cards with information retrieved by the backend, but it seems that the bootstrap classes are not working as intended. The layout.cshtml view appears to display bootstrap properly, and other views I have do too. Don't know if its just something with the .card and row/col classes or is a larger issue.
<div class="row">
#foreach (var product in Model)
{
<div class="col-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" style="width: 18rem;" src="#product.Url" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">#product.Title</h5>
<p class="card-text">#product.Price</p>
</div>
</div>
</div>
}
</div>
What the page looks like:
https://imgur.com/a/8yEDxee
Related
I'm setting up a simple ASP.NET Core MVC project that includes some partial views that I want to be rendered asynchronously. But it seems that, regardless whether they are rendered asynchronously or not I keep getting the same ExecuteAsync() NullReferenceException error.
I have checked all the models and the HTML code but it doesn't seem to work either way, always returning:
An unhandled exception occurred while processing the request.
NullReferenceException: Object reference not set to an instance of an
object. AspNetCore.Views_Home_Index.ExecuteAsync() in Index.cshtml,
line 4.
Index.cshtml:
#using BestDeal.ViewModels
#model HomeViewModel
#await Html.PartialAsync("ArtikalCarouselPocetna")
<h2>Istaknuti artikli</h2>
<div class="row">
#foreach (var artikal in Model.odabraniArtikli)
{
#Html.Partial("ArtikalPregled", artikal)
}
</div>
ArtikalCarouselPocetna partial view:
<div class="row carousel-holder marginTop1">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="https://images-na.ssl-images-amazon.com/images/I/71t-J3VJtEL._SX425_.jpg" alt="">
</div>
<div class="item">
<img class="slide-image" src="https://zdnet1.cbsistatic.com/hub/i/r/2019/04/17/1f68c3a6-495e-4325-bc16-cc531812f0ec/thumbnail/770x433/84ff4194826e8303efb771cd377a854f/chuwi-herobook-header.jpg" alt="">
</div>
<div class="item">
<img class="slide-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKRl7BqXfZupIBH4N8i-tD45gVPctFV5jKTeTmOIADFhZ8J_DAYQ" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
Your error in, I think you model is null. So you can check it like this
if(model != null) then
#foreach (var artikal in Model.odabraniArtikli)
{
#Html.Partial("ArtikalPregled", artikal)
}
So, I see you view located in different folder, it's mean you need point full path
#await Html.PartialAsync("~/Views/Shered/ArtikalCarouselPocetna.cshtml")
but I suggest you better use
#{
await Html.RenderPartialAsync("~/Views/Shered/ArtikalCarouselPocetna.cshtml");
}
Alternatively, you can render a partial view with RenderPartialAsync. This method doesn't return an IHtmlContent. It streams the rendered output directly to the response. Because the method doesn't return a result, it must be called within a Razor code block:
#{
await Html.RenderPartialAsync("_AuthorPartial");
}
Since RenderPartialAsync streams rendered content, it provides better performance in some scenarios. In performance-critical situations, benchmark the page using both approaches and use the approach that generates a faster response.
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-2.2
Also
I advise you use partial view with _ https://stackoverflow.com/a/10321458/8006943
I've been trying to get menu item from menu-id="2" to put some JavaScript in each item in it, but unfortunately it doesn't work.
I would appreciate some help.
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-mdf left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Information</h5>
<vc:menu menu-id="2"></vc:menu>
</div>
</div>
</div>
</section>
My View(cshtml) has around 10 div tags at root level.
Each div has nested multiple div inside it.
The HTML code is below. As there is foreach loop, i have multiple such DIV
foreach(var result in results)
{
<div class="itemRow" id= value data-List=#invoiceDetail>
<div class="itemStatus paid"><span>Paid</span></div>
<div class="itemDetails" style="display: none;">
<div class="itemContainer">
<div class="left"> <table class="stripes"> </div>
</div>
<div class="itemContainer" id="_orderId"> <h4>Order details</h4> </div>
<div class="itemContainer">
<div class="left"> <strong>Download PDF</strong></a> </div>
<div class="right"> You can download paper invoice </div>
</div>
<div class="border hundra"><div></div></div>
</div>
</div>
}
Each div at root has an attribute data-List from server side. This attribute has a c# Collection as value. I need to read the value from data-List attribute of that particular div and traverse through it.
I tried to use the .attr method but what i received the data type of the collection.
Please suggest a way forward.
Thanks in advance.
I develop an ecommerce application. I using C#, MVC and Entity Framework and Bootstrap.
I've saved cart item in my database. My question is :
I want to show cart's summary in my layout's top. But what's your suggestion for this operation.
Should i use a partial view for the cart's summary or another way?
And in other hand how can i read my cart's data from database every request. i cannot it in from controllers of course. because i want to show cart's summary top of the screen at every page. should i read it from application start or ? Any suggest me pls for this operations.
//_Layout.cshtml
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">E-Commerce</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Arama">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</form>
<p class="navbar-text pull-right">
/* I want to see shopping cart summary in this section*/
<i class="fa fa-shopping-cart"></i>
<span id="cartTotal">
</span>
(<span id="cartItemCount"></span>)
</p>
<p class="navbar-text pull-right">Log In</p>
<p class="navbar-text pull-right">Register</p>
</nav>
</div>
<div class="container">
#RenderBody()
</div>
</body>
</html>
you can use of this solution
in Controller
[ChildActionOnly]
public ActionResult CartSummary()
{
ViewData["CartCount"] = 3; // count Qty in your cart
return PartialView("CartSummary");
}
right click and Add view and select PartialView then in PartialView
#ViewData["CartCount"]
in layout, where you want to show cart's qty
#{Html.RenderAction("CartSummary", "controllerName");}
I am trying to format a page where I have an image, then NEXT to it, a heading... and then under the heading, I want some descriptive text.
I am trying this:
<div class="panel">
<div class="panel-heading">
<div class="row">
<div class="col-xl-2">
<img src="~/images/user_error.png" />
</div>
<div class="col-xl-10">
<h1>#Model.Heading</h1>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
Hello
</div>
</div>
</div>
But the image stays on it's own row. How can I get the heading NEXT to the image?
<div class="col-xs-2">
Here is a jsfiddle for people to see the difference: http://jsfiddle.net/692UC/