I am trying to parse some data and images from controller to show on view. I implemented a foreach loop to show some images in slideshow. But whenever I run the code only the first image appears inside the body, and other images and information goes below the footer. I am not getting what mistake I made in this code.
My code is-
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
} }
</div>
</body>
</html>
My view is looking like this.
Hope it will solve your issue.
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
}
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
}
</div>
</body>
</html>
Related
I want to add an animation for the navbar. I tried many ways but it didn't work. I deleted some CSS code because it wasn't important for the code.
<div class="navbar" style="position: sticky; top: 0;">
<div class="logo">
<a href="../index.php">
<img src="../assets/icon/logo.png" />
<div class="title">Nexton</div>
</a>
</div>
<div class="right">
<div class="directory-open">
<a href="../user/index.php?user">
<i class="bi bi-person-gear"></i>
<?php echo $_SESSION['username']; ?>
</a>
<a href="../pages/logout.php">
<i class="bi bi-box-arrow-left"> Kijelentkezés</i>
</a>
</div>
<div class="directory-collapsed">
<div class="btn">
<i class="bi bi-person-gear" style="color: white;"></i>
</div>
<div class="dropdown" style="z-index: 2;">
<div class="directory-drop-down">
<a href="../user/index.php?user">
<?php echo $_SESSION['username']; ?>
</a>
Kijelentkezés
</div>
</div>
</div>
</div>
</div>
My full code can be found here
I tried to add an animation but it didn't work. Can somebody help me?
Any help will be appreciated.
I have a page with a fullheight hero element and I want to "stick" the content that is in <div class="hero-body"> on the top of its container beacuse as now it centers automatically and I don't want that (it's a dashboard...).
How I can do?
Thanks in advance.
This is like what I want:
This is currently my code:
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet"/>
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>
Add the following classes like below:
<div class="hero-body is-align-items-stretch"> <!-- the important class is here -->
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
....
</div>
<!-- the below one (is-align-self-center) is not mandatory if you don't want to center the banner -->
<div class="column is-7 is-align-self-center">
....
</div>
Full code
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet" />
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body is-align-items-stretch">
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7 is-align-self-center">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>
Basically what you are trying to achieve , pushing contents from bottom to top is by not displaying the top content
rather than setting the visibility of top portion to invisible
Try this out ,( in your class="hero-head")
<div class="hero-head display is-hidden-mobile">
Please refer this documentation for more clarification
I am making a basketball website for my sports club. I am attempting to make a photo carousel that slides with an information section next to it. This is the following code I have made, but I don't know how to style it (with CSS) so that it looks like what it is supposed.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="slider-area">
<div class="main cf">
<div class="owl-carousel eql-height owl-theme" id="sync1" style="opacity: 1; display: block; height: 369px;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 7480px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-1496px, 0px, 0px);">
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Werribee referees add to the trophy case</h3>
<p><span>Werribee Basketball’s referees have taken out three major awards at the Technical Officials Commission’s (formerly VBRA) annual awards in May.</span></p><a class="Read-more" href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/"
title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/1.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Franky’s A1 Car Sales our new sponsor</h3>
<p>Werribee Basketball is pleased to announced our latest sponsor to sign on in support of the club, Franky’s A1 Car Sales.</p><a class="Read-more" href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/frankys-digital-2.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Werribee Basketball’s Gala Dinner in July</h3>
<p>You’re invited to Werribee Basketball’s night of nights!</p><a class="Read-more" href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Gala-Dinner_WEB.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Potter has the magic touch</h3>
<p><span>You may notice Werribee Basketball’s Player and Coach Development Manager Reece Potter walking around Eagle Stadium with a big smile on his face this week – and it’s with good reason!</span></p><a class="Read-more" href="http://werribeebasketball.com/potter-has-the-magic-touch/"
title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Web.jpg')">
</div>
</div>
</div>
<div class="owl-item" style="width: 748px;">
<div class="item">
<div class="slider-caption">
<h3>Court announcer wanted!</h3>
<p>Werribee Basketball is looking for a court announcer for our Big V home games at Eagle Stadium.</p><a class="Read-more" href="http://werribeebasketball.com/court-announcer-wanted/" title="Read More">Read More</a>
</div>
<div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/04/Court-announcer.jpg')">
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-buttons">
<div class="owl-prev">
<i class="fa fa-chevron-left"></i>
</div>
<div class="owl-next">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
<div class="owl-carousel eql-height owl-theme" id="sync2" style="opacity: 1; display: block; height: 369px;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 2490px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-498px, 0px, 0px);">
<div class="owl-item" style="width: 249px;">
<div class="item">
Werribee referees add to th...
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Franky’s A1 Car Sales...
</div>
</div>
<div class="owl-item synced" style="width: 249px;">
<div class="item">
Werribee Basketball’s...
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Potter has the magic touch
</div>
</div>
<div class="owl-item" style="width: 249px;">
<div class="item">
Court announcer wanted!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is what it is supposed to look like, or an approximation of what it should look like.
Use bootstrap Carousel for your basket ball website
Click Here
Here is the code for it :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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://blog.keycdn.com/blog/wp-content/uploads/2015/10/jpg-to-webp-1.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</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>
</body>
</html>
I'm developing an online-store website using Asp.net MVC 5 and Razor Engine. I have a View for show products using Carousel . I show a small image of products in right of page (GoodDetails.cshtml) and then show more details in _GoodDetailsAjax.cshtml .
GoodDetails.cshtml
<div >
<div class="row">
<div class="col-lg-9 col-md-9" id="DivAjax">
#{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
</div>
<div class="col-lg-2 col-md-2 pull-right center-block" >
#foreach (var item1 in Model.GoodDetails)
{
<div>
<input type="image" class="img-responsive" src="~/Images/GoodDetails/#item1.DetailsSmallImage1">
</div>
#Ajax.ActionLink(#item1.DetailsName, "GoodDetailsAjax", new { id = #item1.DetailsGoodID }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "DivAjax",
InsertionMode = InsertionMode.Replace
})
}
</div>
</div>
I want to full screen that div with InfoDiv id . How can I do it ? I tried Css and very bootstrap classes but I couldn't do it .
Thanks in advance .
_GoodDetailsAjax.cshtml
<div class="row container">
#foreach (var item in Model.GoodDetails)
{
<div style="height:auto;" class="carousel slide article-slide col-md-12 col-lg-12" id="article-photo-carousel">
<!-- Wrapper for slides -->
<div style="border:1px solid;" class="carousel-inner cont-slider">
<div class="item active">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage1">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage2">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage3">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage4">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators text-center col-lg-12 col-md-12" >
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage1">
</li>
<li data-slide-to="1" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage2">
</li>
<li data-slide-to="2" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage3">
</li>
<li data-slide-to="3" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage4">
</li>
</ol>
<a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="InfoDiv" class="col-lg-12 col-md-12 " >
<p>#item.DetailsExtraInfo</p>
<p>#item.DetailsProducer</p>
<p>#item.DetailsSize</p>
}
</div>
You are updating the below code with ajax
<div class="col-lg-9 col-md-9" id="DivAjax">
#{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
</div>
This <div> has class="col-lg-9 col-md-9" so your partial view will also renders in the div with same class of class="col-lg-9 col-md-9". So this is the reason why your div in partial view is not full width.
You have to update the row code with ajax like below
<div class="col-md-12" id="DivAjax">
<div class="row">
<div class="col-lg-9 col-md-9" >
</div>
<div class="col-lg-2 col-md-2 pull-right center-block" >
#foreach (var item1 in Model.GoodDetails)
{
<div>
<input type="image" class="img-responsive" src="~/Images/GoodDetails/#item1.DetailsSmallImage1">
</div>
#Ajax.ActionLink(#item1.DetailsName, "GoodDetailsAjax", new { id = #item1.DetailsGoodID }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "DivAjax",
InsertionMode = InsertionMode.Replace
})
}
</div>
</div>
</div>
and in the partial view
<div class="row container">
#foreach (var item in Model.GoodDetails)
{
<div class="row">
<div class="col-md-9">
<div style="height:auto;" class="carousel slide article-slide col-md-12 col-lg-12" id="article-photo-carousel">
<!-- Wrapper for slides -->
<div style="border:1px solid;" class="carousel-inner cont-slider">
<div class="item active">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage1">
</div>
.
<li data-slide-to="3" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage4">
</li>
</ol>
<a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-2">
#foreach (var item1 in item)
{
<div>
<input type="image" class="img-responsive" src="~/Images/GoodDetails/#item1.DetailsSmallImage1">
</div>
#Ajax.ActionLink(#item1.DetailsName, "GoodDetailsAjax", new { id = #item1.DetailsGoodID }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "DivAjax",
InsertionMode = InsertionMode.Replace
})
}
</div>
</div>
<div class="row">
<div id="InfoDiv" class="col-lg-12 col-md-12 " >
<p>#item.DetailsExtraInfo</p>
<p>#item.DetailsProducer</p>
<p>#item.DetailsSize</p>
</div>
</div>
}
</div>
You have to place the ajax form inside the partial view and for that you have to do little customize to your code
hope this will help you
There is small organisational error in your _GoodDetailsAjax.cshtml file as per Bootstrap. You have added col-md-12 after col-lg-12 which should be other way around.
GoodDetails.cshtml
<div class="container">
<div class="row">
<div class="col-md-9 col-lg-9" id="DivAjax">
<!-- product details starts -->
#{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
<!-- Product details ends -->
</div>
<div class="col-md-3 col-lg-3 pull-right center-block" >
#foreach (var item1 in Model.GoodDetails)
{
<div>
<input type="image" class="img-responsive" src="~/Images/GoodDetails/#item1.DetailsSmallImage1">
</div>
#Ajax.ActionLink(#item1.DetailsName, "GoodDetailsAjax", new { id = #item1.DetailsGoodID }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "DivAjax",
InsertionMode = InsertionMode.Replace
})
}
</div>
</div>
</div>
_GoodDetailsAjax.cshtml
<div class="row">
#foreach (var item in Model.GoodDetails)
{
<div class="carousel slide article-slide" id="article-photo-carousel">
<!-- Wrapper for slides -->
<div style="border:1px solid;" class="carousel-inner cont-slider">
<div class="item active">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage1">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage2">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage3">
</div>
<div class="item">
<img alt="" title="" src="~/Images/GoodDetails/#item.DetailsImage4">
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators text-center" >
<li class="active" data-slide-to="0" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage1">
</li>
<li data-slide-to="1" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage2">
</li>
<li data-slide-to="2" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage3">
</li>
<li data-slide-to="3" data-target="#article-photo-carousel">
<img alt="" src="~/Images/GoodDetails/#item.DetailsSmallImage4">
</li>
</ol>
<a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="InfoDiv" class="" >
<p>#item.DetailsExtra0nfo</p>
<p>#item.DetailsProducer</p>
<p>#item.DetailsSize</p>
}
</div>
</div>
Fiddle: https://jsfiddle.net/dg0n28z5/3/
Hope that make sense.
I use this to load a page and replace the current page:
$.get('genres.html').done(function (data) {
$('#pagecontent').html(data);
})
When i do this everything in de body gets replaced with the new content.
I need to replace the full body except this footer.
I did see something about div:not but i think thats not working with ajax.
How can i replace everything except the footer:
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide"><a class="jp-video-play-icon">play</a></div>
<div class="jp-interface">
<div class="jp-controls">
<div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
</div>
<div><a class="jp-play"><i class="icon-control-play i-2x"></i></a>
<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
</div>
<div><a class="jp-next"><i
class="icon-control-forward i-lg"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a>
</div>
<div><a class="" data-toggle="dropdown" data-target="#playlist"><i
class="icon-list"></i></a></div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info"></div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"><a class="jp-mute" title="mute"><i
class="icon-volume-2"></i></a> <a class="jp-unmute hid"
title="unmute"><i
class="icon-volume-off"></i></a></div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div><a class="jp-shuffle" title="shuffle"><i
class="icon-shuffle text-muted"></i></a> <a
class="jp-shuffle-off hid" title="shuffle off"><i
class="icon-shuffle text-lt"></i></a></div>
<div><a class="jp-repeat" title="repeat"><i
class="icon-loop text-muted"></i></a> <a
class="jp-repeat-off hid" title="repeat off"><i
class="icon-loop text-lt"></i></a></div>
<div class="hide"><a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a> <a class="jp-restore-screen"
title="restore screen"><i
class="fa fa-compress text-lt"></i></a></div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide"><span>Update Required</span> To play the media
you will need to either update your browser to a recent version or update
your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash
plugin</a>.
</div>
</div>
</div>
</footer>
Just put everything outside the footer in a container, then replace the contents of that. Something like:
<div id="content">
...your content here
</div>
<footer>
</footer>
Then do:
$.get('genres.html').done(function (data) {
$('#content').html(data);
})