I'm using the Boostrap 2.x slider to display a series of testimonials on a webpage which I retrieve from a database.
My code is as follows:
<div id="testimonials" class="carousel slide">
<div class="carousel-inner">
#foreach (var item in Model.Testimonials)
{
<div class="item" style="max-height:70px; overflow:hidden">
<h4>#item.Title</h4>
#item.Quote
</div>
}
</div>
</div>
For the slider to work, the first item needs to be set to 'active', otherwise the first item shown is blank. How do I add the 'active' class to the first item in MVC?
So the first item should display as
<div class="item active" style="max-height:70px; overflow:hidden">
instead of
<div class="item" style="max-height:70px; overflow:hidden">
In my script file I have:
$(document).ready(function () {
$('#testimonials').carousel({
interval: 6000
});
$('#testimonials').carousel('cycle');
}
(there are 2 sliders on this page)
Thanks.
You can check for the first item in the loop:
<div id="testimonials" class="carousel slide">
<div class="carousel-inner">
#{
var i = 0;
foreach (var item in Model.Testimonials)
{
var itemClass = i++ == 0 ? "item active" : "item";
<div class="#itemClass" style="max-height:70px; overflow:hidden">
<h4>#item.Title</h4>
#item.Quote
</div>
}
}
</div>
</div>
or replace foreach with for loop if your Model.Testimonials property is a type of IList<T> or any collection, which items can be individually accessed by index:
<div id="testimonials" class="carousel slide">
<div class="carousel-inner">
#for (int i = 0; i < Model.Testimonials.Count; i++)
{
var item = Model.Testimonials[i];
var itemClass = i == 0 ? "item active" : "item";
<div class="#itemClass" style="max-height:70px; overflow:hidden">
<h4>#item.Title</h4>
#item.Quote
</div>
}
</div>
</div>
If you want to do this with JavaScript, so:
$(document).ready(function () {
$('.carousel-inner .item:first').addClass('active');
$('#testimonials').carousel({
interval: 6000
});
$('#testimonials').carousel('cycle');
}
Also I would suggest you to move the style="max-height:70px; overflow:hidden" line to css class:
.carousel-inner .item {
max-height: 70px;
overflow: "hidden";
}
Related
I am building a mini online shopping CMS project for collage.
I finished the project and now I want to add a feature where I have limited quantity of products.
When the quantity is equal to 0 then product is shown as 'out of stock' and my 'Add to cart' button becomes disabled.
I have added a 'quantity' property to my product class and now I need to change something in the Index view of the product.
I tried few options and it does not seem to work.
Here is the code for the Index.cshtml page.
#model IEnumerable
<Product>
#{ ViewData["Title"] = "Products"; }
<h1 class="display-4 pb-5">All Products</h1>
<div class="row">
#foreach (var item in Model)
{
<div class="col-4">
<div class="ajaxbg d-none">
<img src="~/Images/ajax_loader.gif" />
<p class="lead alert alert-success text-center d-none">
The product has been added!
</p>
</div>
<img src="~/Media/Products/#item.Image" class="img-fluid" alt="" />
<h4>#item.Name</h4>
<div>
#Html.Raw(item.Description)
</div>
<p>
#item.Price.ToString("C2")
</p>
<p>
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
</p>
#if (item.Quantity == 0) { }
</div>
}
#if (ViewBag.TotalPages > 1) {
<div class="d-flex w-100 justify-content-center">
<pagination page-count="#ViewBag.TotalPages" page-target="/products" page-number="#ViewBag.PageNumber" page-range="ViewBag.PageRange"></pagination>
</div>
}
</div>
#section Scripts {
<script>
function DisableBtn() {
document.getElementById("addToCartBUtton").disabled = true;
}
$(function() {
$("a.addToCart").click(function(e) {
e.preventDefault();
let ajaxDiv = $(this).parent().parent().find("div.ajaxbg");
ajaxDiv.removeClass("d-none");
let id = $(this).data("id");
$.get('/cart/add/' + id, {}, function(data) {
$("div.smallcart").html(data);
ajaxDiv.find("img").addClass("d-none");
ajaxDiv.find("p").removeClass("d-none");
setTimeout(() => {
ajaxDiv.animate({
opacity: 0
}, function() {
$(this).addClass("d-none").fadeTo(.1, 1);
$(this).find("img").removeClass("d-none");
$(this).find("p").addClass("d-none");
});
});
});
});
});
</script>
}
Try this
#If(Model!=null)
{
#foreach (var item in Model)
{
..........
<p>
#if (item.Quantity == 0) {
<a disabled class="btn btn-primary addToCart">Add to cart</a>
}
else
{
<a asp-controller="Cart" asp-action="Add" asp-route-id="#item.Id" data-id="#item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
}
</p>
}
}
I am using Umbraco (mvc) with bootstrap.My template use partial view to load name and job title of staff in template. How I can add div (new row) after 4 iteration.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var selection = Model.Content.Site().FirstChild("aboutUs").Children("staff")
.Where(x => x.IsVisible());
}
#foreach(var item in selection){
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
</div>
}
Difficulty:
I want to add
<div class="row team">
</div>
after every 4th
<div class="col-sm-3">
</div>
A more easier solution would be the use of the Umbraco helper method InGroupsOf(columns).
#foreach(var group in selection.InGroupsOf(4))
{
<div class="row team">
#foreach(var item in group)
{
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#item.GetPropertyValue("fullName")</a> <small>#item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
}
</div>
}
Try:
#foreach(var obj in selection.Select((item, index) => new {item, index}))
{
if(obj.index==0||obj.index%4==0){
#Html.Raw("<div class='row team'>")
}
<div class="col-sm-3">
<div class="thumbnail-style">
<h3><a>#obj.item.GetPropertyValue("fullName")</a> <small>
#obj.item.GetPropertyValue("jobTitle")</small></h3>
</div>
</div>
#if((obj.index+1)%4==0||obj.index+1==selection.Count()){
#Html.Raw("</div>")
}
}
- It will works, Use for loop instead of foreach loop and then just add logic
#for (int i = 1; i < selection.Count; i++)
{
var item = selection[i];
<div class="row team">
<div class="col-sm-3">
<div class="thumbnail-style">
#if (i % 5 == 0)
{
<div class="col-sm-3">
<h4 >D #item</h4> <!--your actual html code-->
</div>
}
else
{
<h4 style="color:red">D #item</h4> <!--your actual html code-->
}
</div>
</div>
</div>
}
I'm using mvc5 with razor view engine and I have a table of images in my DB , I want show 3 images in first line, then show some text in the next line, and then show 2 images in the next line with some text which will repeat by for loop like this image
my current code is :
<div style="padding: 0;">
#foreach (var item in Model.MainGoods)
{
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="#">
<img src="#Url.Content(item.GoodImage.ToString())" />
</a>
</div>
}
</div>
Can anyone help me do it?
This should do the trick:
<div style="padding: 0;">
#{
var count =1;
<div class="row">
#foreach (var item in Model.MainGoods)
{
if (count <= 3)
{
<div class="col-md-4 well">
<a href="#">
<img src="#Url.Content(item.GoodImage.ToString())"/>
</a>
</div>
if (count == 3)
{
//new row
#Html.Raw("</div><div class=\"row\">")
}
}
else
{
<div class="col-md-6 well">
<a href="#">
<img src="#"/>
</a>
</div>
if (count == 5)
{
//new row
#Html.Raw("</div><div class=\"row\">")
}
}
if (count < 5)
{
//increment the count
count++;
}
else
{
//reset the count
count = 1;
}
}
</div>
}
</div>
I have a typical scenario where there is a list view and then there's a details view. You get to the details view by selecting a list item. There's data in the record that of course will inform the layout view of the details. What I see is that the subtemplate's helper function is being called too soon (during the list view rendering) to have the data for the list details . Furthermore, it's not being called when I click an item in the list. What am I doing wrong? I'm using Meteor 0.8.2 with jQM 1.4.3.
The HTML looks as follows:
<!-- details page -->
<div data-role="page" data-theme="q" id="listdetail">
<div data-role="header" data-position="fixed">
<a data-rel="back" href="#" data-transition="slideleft" class="baack fa fa-arrow-left"></a>
<div id="detailTitle" class="headertitle"></div>
</div>
<!-- /header -->
<div data-role="content" class="ma-req-detail" id="details">
{{> qDetails}}
</div>
</div>
<!-- /details page -->
<template name="qList">
{{#each items}}
{{>qListItems}}
{{/each}}
</template>
<template name="qListItems">
<li>
<div id="msg-container-{{requestId}}" class="processing-msg">
<i class="fa fa-2x fa-times-circle"></i>
<p class="msg-text-{{requestId}}">Action pending...</p>
</div>
<a id="requestId" href="#listdetail" data-name="{{additionalProperties}}" data-transition="slide" class="{{#if isProcessing}}ui-disabled{{/if}}">
<p class="requestor">{{additionalProperties.requestedForUid}}</p>
<p class="description">week of {{additionalProperties.workWeekOf}}</p>
<p class="reqdate">total hours: </p>
</a>
</li>
</template>
<template name="qDetails" >
<div role="main" class="q-details">
<div data-role="navbar" class="week-nav">
<ul>
{{#each days}}
{{>navElements}}
{{/each}}
</ul>
</div>
</div>
<div class="ma-buttons ui-fieldcontain ui-footer-fixed">
<div data-role="controlgroup" data-type="horizontal" class="" data-position-fixed="true" data-position="bottom">
<a data-mini="true" href="#" id="approve-request"
class="ui-btn ui-btn-c ui-corner-r ui-icon-check ui-btn-icon-left ma-btn approve">Approve</a>
</div>
</div>
</template>
<template name="navElements">
<li><a id="{{day}}Nav" href="#{{day}}">{{day}}<br><span class="digital-date">{{date}}</span></a></li>
</template>
The JS bits are:
Template.qDetails.rendered = function() {
$('#details').trigger('create');
};
Template.qDetails.helpers({
days: function() {
//TODO need a way to delay this function to call when details template is shown
var dt = Session.get("record").additionalProperties.workWeekOf;
var days = [];
var weekday = new Array(7);
weekday[0] = "SAT";
weekday[1] = "SUN";
weekday[2] = "MON";
weekday[3] = "TUE";
weekday[4] = "WED";
weekday[5] = "THU";
weekday[6] = "FRI";
var dtVal = dt.getDate();
for (var i = 0; i < 7; i++) {
var dayObj = {};
dayObj.date = dtVal + i;
dayObj.day = weekday[i];
days.push(dayObj);
}
return days;
}
});
Template.qDetails.record = function () {
return Session.get("record");
};
In the code above the "days" helper function is being called when the list page is shown which results in an error because it is trying to pull the "workWeekOf" date from a record that hasn't been selected yet. How can I get to this only call once a record has been selected?
This is slightly confusing, since there's nothing in the above that shows how yourqDetails template gets rendered in the first place. However, assuming it does, you can just use:
var dt = Session.get("record") ? Session.get("record").additionalProperties.workWeekOf : [default date]
[default date] could be anything sensible (like new Date()), but you need to return something to avoid the error being thrown. This is a pretty common but very easily solved problem in Meteor - you just need a suitable default for when your Session variable or Collection isn't yet ready.
I'm using MVC3 to create a beta mobile web app. It was working fine until I started to try and get inline pages inside of a view similar to this
This is what I currently have in my view called Index. How come when I click the links in the navbar it doesn't go to the page?
#model List<ShawGoVersion1.Models.NewsItem>
#{
ViewBag.Title = "News";
}
#section Header {
#Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l"})
<h1>#ViewBag.Title</h1>
<div data-role="navbar">
<ul>
<li>My News</li>
<li>Press Releases</li>
<li>All News</li>
</ul>
</div>
}
<div data-role="page" id="MyNews">
<div data-role="content">
<h1>This feature coming soon</h1>
</div>
</div>
<div data-role="page" id="AllNews">
<div data-role="content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Article")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>
<div id="PressReleases" data-role="page">
<div data-role"content">
<ul data-role="listview">
#for (int i = 0; i < Model.Count; i++ )
{
if (Model[i].type == "Press Release")
{
<li>
<a href="#Url.Action("NewsItemDetails", "News", new { id = i })">
#if (Model[i].pictureURL != null)
{
<div class="ui-grid-c">
<div class="ui-block-a" style="width:31%;vertical-align:middle">
<img src="#Model[i].pictureURL" style="width:100%;height:auto"/>
</div>
<div class="ui-block-b" style="width:4%; vertical-align:middle"></div>
<div class="ui-block-c" style="width:65%;vertical-align:middle">
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
</div>
</div>
}
else
{
<h3 style="font-size:small; white-space:normal">#Model[i].title</h3>
<p><strong>#Model[i].date.ToShortDateString()</strong></p>
}
</a>
</li>
}
}
</ul>
</div>
</div>
Your navbar should appear within data-role="page". Within the data-role="page" you should have a data-role="header" and your navbar should go in there if you want it to be in the header of the jqm page.
Alternatively if you don't want to do it that way(which you should do, as its the correct way). You could try catch the onclick event of those links in your navbar yourself and then fire
$.mobile.changePage();
This may work.