im new to umbraco and c#, I made a blog list in umbraco razor but how can i make a load more button funcionality?
i want when the user click the button load more 5 items to the list.
One way is the the users click the button update the query, but i would need to refresh the page.
Any Help would be great since im stuck on this one, and have no clue how to do this in umbraco.
#{
var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START -->
#while(selection.Any()){
var oneItem = selection.First();
selection.Remove(oneItem);
<div class="row">
<div class="col-md-4 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<div class="card">
<img src="#Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao">#oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>
<span class="qs-blog-date-1page" id="qs-datetime">#(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>
<br>
<span class="qs-blog-publicado-por">#oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
<span class="qs-blog-titulo-1page">#oneItem.GetPropertyValue("tituloBlog")</span>
</div>
<div class="col-md-12 col-sm-12 onclick="location.href='#oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#oneItem.GetPropertyValue("resumoBlog")</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
</div>
var twoItems = selection.Take(2).ToList();
if(twoItems.Any()){
<div class="row">
#foreach (var item in twoItems){
selection.Remove(item);
<div class="col-md-6 col-sm-12" onclick="location.href='#item.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao-double">#item.GetPropertyValue("tipoDeDirecao")</span><br>
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double" id="qs-datetime">#(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
<span class="qs-blog-publicado-por-double"> #item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#item.GetPropertyValue("tituloBlog")</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#item.GetPropertyValue("resumoBlog")</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
</div>
<br>
}
}
<!-- BLOG END -->
</div>
It could be something like this:
#{
int page = int.TryParse(Request["page"], out page) ? page : 0;
int pageSize = 5;
var selection = Model.Content
.Children()
.Where(x => x.IsVisible())
.Skip(page * pageSize)
.Take(pageSize)
.ToList();
}
<div class="container-fluid">
...
</div>
<a href="#Request.RawUrl.Split('?')[0]?page=#(page + 1)">
Load next #pageSize results
</a>
Related
I have two razor component with names of "new" and "second". How can i navigate them automatically, i mean when there is something to show navigate to new automatically and when there is nothing to show, navigate back to second automatically again.
Here is new: #page "/new"
<div class="Vistit">
<div class="container-fluid">
<div class="row h-100">
<div class="col-sm-8 ">
#foreach (var appointment in _visibleAppointments)
{
<div class="row mb-5">
<div class="col-sm-4"> <h1> #appointment.HeaderText: </h1> </div>
<div class="col-sm-8">
#foreach (var contactPerson in appointment.Contacts)
{
<h1> #contactPerson.Gender #contactPerson.Name </h1>
}
</div>
</div>
<div class="row mt-5"></div>
<div class="row mt-5"></div>
<div class="row mt-5">
<div class="col-sm-4"> <h1>Company:</h1> </div> <div class="col-sm-8"> <h1> #appointment.Company </h1> </div>
</div>
}
</div>
<div class="col-sm-4 ">
<TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
<ItemTemplate>
<div class="Slideimg">
<img class="d-block center" src="#GetImageSource(#context)" alt="#context.FileName">
</div>
<div class="Slogan">
<p>Here is slogan!</p>
</div>
</ItemTemplate>
</TemplatedCarousel>
</div>
</div>
</div>
</div>
And here is second: #page"/second"
<div class="SecondP">
<div class="container-fluid">
<div class="row h-100">
<div class="col-sm-6 ">
<video controls="controls" class="ml-auto" autoplay muted loop>
<source src="/Video/TestMovie_small.mp4" type="video/mp4" />
</video>
</div>
<div class="col-sm-6 ">
<TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
<ItemTemplate>
<img class="d-block center" src="#GetImageSource(#context)" alt="#context.FileName">
</ItemTemplate>
</TemplatedCarousel>
</div>
</div>
</div>
</div>
You can override OnInitializedAsync() or OnInitialized() in your #code {}section in new or second and inject the NavigationManager to help you.
#inject NavigationManager navigationManager // at the top
///HTML
#code
{
protected override Task OnInitializedAsync()
{
//if something is empty
navigationManager.NavigateTo("/second");
}
}
I'm trying to display data from the Umbraco in this order 1-2 in foreach loop (bootstarp columns), but my code is displaying in this order of columns 1-1, instead of 1-2 on loop. It does not add the second column to the second row just one column.
E.g. 1 item, then 2 items, then 1 item again with different columns displays.
whats the better approach to make 1-2 on loop of content?
I'm kinda lost on this one. Any help would be good.
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START-->
#foreach(var data in Model.Content.Children().Where(x => !x.GetPropertyValue<bool>("umbracoNaviHide"))){
if(data.HasValue("blogNested")){
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested");
int i = 0 ;
foreach(var item in items){
<div class="row">
#if(i % 2 == 0) {
<div class="col-md-4 col-sm-12">
<div class="card">
<img src=" /media/1180/dude.jpg" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br><br>
<span class="qs-blog-date-1page">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span><br><br><br>
<span class="qs-blog-titulo-1page">#(item.GetPropertyValue<string>("tituloBlog"))</span>
</div>
<div class="col-md-12 col-sm-12" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
else {
<div class="col-md-6 col-sm-12">
<span class="card-text qs-blog-direcao-double">#(item.GetPropertyValue<string>("tipoDeDirecao"))</span><br>
<img src=" /media/1182/tempo.jpg" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double">#(item.GetPropertyValue<string>("dataDePublicacaoBlog"))</span><br>
<span class="qs-blog-publicado-por-double"> #(item.GetPropertyValue<string>("publicadoPorBlog")) - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#(item.GetPropertyValue<string>("tituloBlog"))</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#(item.GetPropertyValue<string>("resumoBlog"))</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
#{i++;}
</div>
}
}
}
<!-- BLOG START-->
</div>
It could be something like this
var items = data.GetPropertyValue<IEnumerable<IPublishedContent>>("blogNested")
.ToList();
while (items.Any())
{
var oneItem = items.First();
items.Remove(oneItem);
<div class="row">
<div class="col-md-12">
#oneItem.Id
</div>
</div>
var twoItems = items.Take(2).ToList();
if (twoItems.Any())
{
<div class="row">
#foreach (var item in twoItems)
{
items.Remove(item);
<div class="md-6">
#item.Id
</div>
}
</div>
}
}
This will render
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="md-6">
<text>{{Id}}</text>
</div>
<div class="md-6">
<text>{{Id}}</text>
</div>
</div>
<div class="row">
<div class="col-md-12">
<text>{{Id}}</text>
</div>
</div>
...
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.
I hope this is straight forward! I have a partial which loads just fine, it uses ajax to apply filters / sorting which works fine. However the pagination links send the correct url, and the response is the desired page, only it doesn't actually update/replace whats there.
Parent View:
#model Sakura.AspNetCore.IPagedList<YaCu_2017.Models.Review>
#{
ViewBag.Title = "Review Dashboard";
#using YaCu_2017.Controllers;
}
<p class="green-text">#ViewBag.StatusMessage</p>
<p class="red-text">#ViewBag.ErrorMessage</p>
<h2>Our Product Reviews</h2>
<div class="row">
<div class="col s2">
<h5>Filter by Product:</h5>
<form method="get">
#{
var product = ReviewController.GetProductListIncId();
var productCount = ReviewController.GetProductCountList();
ViewBag.ProductList = product;
ViewBag.ProductCount = productCount;
}
<select asp-items="#ViewBag.ProductList" id="searchProduct"
class="dropdown-button btn"></select>
<h5>Reviews per page</h5>
<select asp-items="#ViewBag.ProductCount" id="perPage"
class="dropdown-button btn"></select>
</form>
</div>
</div>
<p></p>
<div class="reviewView" id="filter">
#await Html.PartialAsync("ShowReviewDetails", Model)
</div>
Child View:
#model IPagedList<YaCu_2017.Models.Review>
#using System.Globalization
#using Sakura.AspNetCore
#using YaCu_2017.Controllers
#using YaCu_2017.Models
#{
ViewData["Title"] = "Digital Jeeves - Reviews";
}
<form method="post" data-ajax="true">
<div class="row">
<div id="pagerow" class="col s12 center center-align center-block">
<p>Page #(Model.TotalPage < Model.PageIndex ? 1 :
Model.PageIndex) of #Model.TotalPage<pager id="pager" class="pagination"
setting-link-attr-data-ajax-update="filter" setting-link-attr-data-ajax-
mode="replace" setting-link-attr-data-ajax="true" /></></p>
<cs-pager cs-paging-pagesize="#Model.PageSize"
cs-paging-pagenumber="#Model.PageIndex"
cs-paging-totalitems="#Model.TotalPage"
cs-pagenumber-param="page"
asp-route-perPage="#ViewData["Page"]"
asp-route-searchProduct="#ViewData["Product"]"
asp-controller="Review"
asp-action="GetProducts"
cs-ajax-target="filter"></cs-pager>
</div>
</div>
</form>
<hr />
<div id="stuff">
#foreach (var item in Model)
{
var stars = item.Stars.ToString();
var starurl = string.Format("images/stars/{0}_star.jpg", stars);
<div class="container opaque-parent z-depth-5">
<div class="row">
<div class="col s6"><h6 style="border-bottom:thin">Title :
#Html.DisplayFor(model => item.Title)</h6></div>
<div class="col s3"><h6 style="border-bottom:thin">Product :
#Html.DisplayFor(model => item.Product)</h6></div>
<div class="col s3"><h6 style="border-bottom:thin">Rated:
<img src="~/#starurl" class="responsive-img" id="#item.Id" /></h6></div>
</div>
<div class="row" style="">
<div class="col s12" style="border-bottom:inset">
<h6>Comment:</h6>
</div>
</div>
<div class="row" style="border-bottom:inset">
<div class="col s6 offset-s3">
<p class="flow-text">"#Html.DisplayFor(model =>
item.ReviewText)"</p>
</div>
</div>
<div class="row">
<div class="col s3">
<p>Date Created : #Html.DisplayFor(modelItem =>
item.CreatedDate)</p>
</div>
<div class="col s3">
<p>Chosen Display Name: #Html.DisplayFor(modelItem =>
item.DisplayName)</p>
</div>
</div>
</div>
<hr />
}
</div>
I thought that it may be because its a child trying to update a parent, but I cant find any info. I tried to put pagination outside of the target div, all that happend was the pagination never got updated when there were pages >1.
I'm new to this, only having made websites without ajax, until now! I figured the filter/sorting out, but I keep going around in circles here, I even tried a diferent nuget package for pagination Link to git, still no joy! Like I say, the next page is in the response, but it doesn't replace whats there.
Thanks :)
Figured it out... in the data-ajax-update="filter" I needed to add a hashtag infront of the element id e.g. data-ajax-update="#filter"... facepalm
I have bootstrap nested grid.In one of my row I have 3 column. When I fill data in the first column of the row , then 3rd column of the row stacks down.However it stays good when there is no data.
Before filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
tags go here
</div>
</div>
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-4">
<img src="#Url.Content(Model.DefaultImagePath)" alt="Image" height="150" width="150"/>
<span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9; vertical-align:bottom"></span>
<span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9; vertical-align: bottom"></span>
</div>
</div>
</div>
Redered:
After Filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
#for (var tagCount = 0; tagCount < #Model.TagList.Count(); tagCount++)
{
<div class="row">
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
</div>
</div>
}
</div>
</div>
</div>
</div>
After data filled: