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
Related
I'm trying to add a button to load more comments in my View.
Main View:
#Html.Action("Index", "Comment")
Partial View that gets returned by the action above:
<div class="comments">
<div class="container">
#foreach (var item in Model)
{
<div class="comment">
<div class="profile">
<div class="profile-image">
<img src="~/Content/img/image-styles/avatar.jpg" alt="">
</div>
<div class="profile-content">
<p>#item.PersonName</p>
<p>#item.CreatedOn</p>
</div>
</div>
<div class="comment-content">
<p>#item.Content</p>
</div>
</div>
}
</div>
</div>
Action:
return PartialView("_PostComments", dbcontext.Post.toList())
I'm just starting out, and couldn't understand the other threads I saw here. Any tip/help would be appreciated
I wish to create a UI like this using .NET core MVC framework.
what should my view be like?
i tired looping through each data model and embedding razor code into the same bootstrap tempate but i'm not getting anywhere near the desired functionality.
<div class="container h-100 w-100">
<div class="row w-100 ml-0 mr-0 mt-0 mb-0">
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#{
foreach(var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#{
foreach(var user in Model)
{
<div class="tab-pane fade show " id="list-#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
}
</div>
</div>
</div>
</div>
The first part of the list group is getting displayed but when i try clicking on it, i dont get to see the description
First, you are appending "list-" to id of your .tab-pane, while the href for list item does not have that prefix.
Second, you can make the first active selection via JavaScript. Avoid putting fade show in your razor code, or put the condition in loop such that it should add it to only first element.
HTML :
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#foreach (var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#foreach (var user in Model)
{
<div class="tab-pane" id="#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
</div>
</div>
</div>
</div>
JS :
<script>
$(".tab-pane").first().addClass("fade show active");
$(".list-group-item").first().addClass("active");
</script>
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>
I have an Index page like below and on button click I have some code to save data into database and then it goes on details page.
But I the code should go to the details page only after completing the database save operation; I want to show a loader image until then; how can I do this?
Currently I'm using begin post to post method and bind all model not using any ajax call. How can I show loader image and render before process complete to details page?
Index.cshtml
#model Dev.Models.DeviceReg
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post))
{
<div class="panel panel-primary">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Name, (SelectList)ViewBag.Name, "---Select Name---")
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Model</h4>
<label>Select</label>
<table>
<tr>
<td>
#Html.DropDownListFor(m => m.Type, (SelectList)ViewBag.TypeName, "---Select Type---")
</td>
</tr>
</table>
</div>
</div>
<div class="panel-footer" align="left">
<button type="submit" id="save" class="btn btn-success">
<span class="glyphicon glyphicon-arrow-right"></span> save
</button>
</div>
</div>
}
HomeController.cs
public async Task<ActionResult> AddAsync(DeviceReg deviceRegistration)
{
foreach (var deviceId in collection)
{
// save device information into database
Models.Device newDevice = new Models.Device()
{
Id = Guid.NewGuid(),
DeviceTypeId = deviceRegistration.DeviceType,
PlatformId = deviceRegistration.PlatformType,
DeviceId = deviceId,
};
_repository.InsertDevice(newDevice);
_repository.Save();
}
return View("Details", deviceRegistration);
}
Details.cshml
#model Dev.Models.DeviceReg
<body style="background-color:black">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
<h2 class="panel-title">Details</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<h3><label>Current Data</label></h3>
<br />
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Name</h4>
<label>#Model.Name</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4 id="aa">Type</h4>
<label>#Model.TypeName</label>
</div>
</div>
<hr />
<br />
<label>Your process is running.</label>
<br />
<div class="row">
<div class="col-md-6">
<h3><label>Status</label></h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div style="clear: both">
<h2 style="float: left">10</h2>
<h6 style="float: right">Active Number</h6>
</div>
</div>
</div>
</div>
</div>
</body>
Well, if you need to show loader while post form is submitting, you can use javascript functions to show it, like
#using (Html.BeginForm("AddAsync", "Home", FormMethod.Post, new { onsubmit = "showLoader(this);" }))
{
...
}
plus JS
<script>
var showLoader = function(form){
$("<div />").css({
'position' : 'fixed',
'left' : 0,
'right' : 0,
'bottom' : 0,
'top' : 0,
'background' : '#0020ff36',
'z-index' : '99',
'text-align' : 'center'
}).appendTo($("body"))
.append(
$("<img />").attr("src", "https://mir-s3-cdn-cf.behance.net/project_modules/disp/35771931234507.564a1d2403b3a.gif")
);
}
</script>
or by jquery event, like
<script>
$("form").submit(function(){
//show loader
});
</script>
example of this code https://dotnetfiddle.net/gfEVSE
But, regarding to your clarification of the issue in comments, it's impossible to show Details page with progress of saving without Javascript or another additional requests.
Example without ajax but with aditional requests every N seconds
[HttpPost]
public ActionResult AddAsync(SampleViewModel deviceRegistration)
{
Task.Run(()=>
{
//Saving to DB
});
return RedirectToAction("Details", id = deviceRegistration.id);
}
public ActionResult Details(int id)
{
var isObjectExistInDb = checkIfExistInDb(id);
if (!isObjectExistInDb){
return View("ShowLoader", id);
}
return View(object);
}
where in ShowLoader.cshtml you need to reload page every N seconds.
With ajax it will be more clear, pretty code. Please, let me know, if you need example with ajax :)
When returning a partial view to the browser, on the first load the partial view renders as I'v laid it out with no issues but when I hit my submit button and call an ajax request, it returns inside itself.
For example - on first run it renders:
<div id="search" class="col-md-4">
...
</div>
But after the postback it renders as
<div id="search" class="col-md-4">
<div id="search" class="col-md-4">
...
</div>
</div>
My View with the Partial View render is:
#model SpecCheck.Portals.Web.UI.ViewModels.Search
#{
ViewBag.Title = "Search";
}
#Html.Action("_GetSearch", "Home");
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-gears"></i> Discontinued Machines</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>All Tiers</option>
<option>Tier 2 / Tier 3</option>
<option>Interim Tier 4 / Tier 4</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-folder-open"></i> Search by Category
</h3>
</div>
<div class="panel-body">
<select class="form-control">
<option>Select a product category</option>
<option>Construction</option>
<option>Technologies</option>
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-star"></i> Latest Model Data</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
And my partial View:
#model IEnumerable<SpecCheck.Portals.Web.UI.ViewModels.Search>
<div id="modelSearch" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-search"></i> Search by Model / Manufacturer</h3>
</div>
<div class="panel-body">
#using (Ajax.BeginForm("_GetSearch", "Home", new AjaxOptions() { UpdateTargetId = "modelSearch" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.TextBox("search", null, new {id = "name", #class = "form-control", placeholder = "Please enter a manufacturer or model"})
<span class="input-group-btn">
<button id="search" class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
if (Model != null)
{
<div id="searchResults" class="fade">
#foreach (var s in Model)
{
<div class="result">
#switch (s.ResultType)
{
case "Man":
#s.Manufacturer
break;
case "Mod":
#s.Manufacturer #s.Model
<img src="~/Images/General/(#s.TierId).png" alt="Tier #s.TierId"/>
break;
}
</div>
}
</div>
}
}
</div>
</div>
</div>
And my Ajax call:
public PartialViewResult _GetSearch(List<Search> model, string search)
{
if (search != null)
{
var results = SearchModels(search).ToList();
model = results;
}
return PartialView("_Search", model);
}
Any idea why this might be happening?
Create a id before the partial view call.
And after the ajax call and append the partial view to that div. Like below
Don't forgot to empty the div before you append.
<div id="yourdivid">
#Html.Action("_GetSearch", "Home");
</div>