I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
showData();
}
});
function showData() {
PageMethods.getData(onSuccess, onError); // getData is a page webmethod thats return five record in json string.
function onSuccess(data) {
alert(data); // data has all five record.
}
function onError(data) {
alert('Problem');
}
}
</script>
.NET
<div id="Posts" class="container-fluid padded">
<asp:Repeater ID="PostsRepeater" runat="server">
<ItemTemplate>
<section>
<div class="col-md-2">
<img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
</div>
<div class="col-md-10">
<div>
<b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
</div>
<hr>
<p><%#Eval("Status") %></p>
<img src="images/1451285316491.jpg" class="img-responsive">
</div>
<div class="row commentbox">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
</div>
<!-- /thumbnail -->
</div>
<!-- /col-sm-1 -->
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
</div>
<div class="panel-body">
This Is awsome post
</div>
<!-- /panel-body -->
</div>
<!-- /panel panel-default -->
</div>
<!-- /col-sm-6 -->
</div>
<!-- /row commentbox -->
</section>
</ItemTemplate>
</asp:Repeater>
<img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />
</div>
On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)
Edited: Code to bind data .i.e( Ajax success method)
function OnSuccess(response) {
var items = response.d;
var fragment='';
$.each(items, function (index, val) {
var aData_imgSRC= val.imgSRC;
var aData_USERNAME= val.USERNAME;
// .....
fragment += "<section> <div class='col-md-2'> <img src='"+aData_imgSRC+"' class='img-circle img-responsive' /> </div> <div class='col-md-10'> <div> <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div> <hr> <p>"+aData_Status+"</p> <img src='images/1451285316491.jpg' class='img-responsive'></div> </section>";
});
$('#Posts').append(fragment);
}
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");
}
}
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 :)
I have six div tags in my project and a hidden field. On mouse-over of this each div I want to get the value of div using hidden field. Is there a way out for this?
Below is my code:
<div class="item user">
<h2>qhse</h2>
<div id='qhse' class="qhse" runat="server" >
</div>
</div>
<div class="item home">
<h2>policies</h2>
<div id='hexa' class="hexa" runat="server" >
</div>
</div>
<div class="item shop">
<h2>procedures</h2>
<div id='policies' class="policies" runat="server">
</div>
</div >
<div class="item camera">
<h2>certificates</h2>
<div id='certificates' class="certificates" runat="server" >
</div>
</div >
<div class="item fav">
<h2>forms</h2>
<div id='forms' class="forms" runat="server" >
</div>
</div >
<div class="item last">
<h2>hexa</h2>
<div id='procedures' class="procedures" runat="server" >
</div>
</div >
</div>
I wish to get the id of each div in hidden field using javascript.
Javascript
$(function () {
$('#nav > div').hover(function () {
var $this = $(this);
$this.find('div').stop().animate({
document.getElementById("<%= hdnSelected.ClientID %>").value = "Policies";
});
But doing this method I am getting id of only one div. I need to get id's of all div's.
Thanks
Try this
$(function(){
var field = $('#<%= hdnSelected.ClientID %>');
$('#nav').on('mouseover', '.item > div[id]', function() {
field.val(this.id);
});
});
I want to read source code from a website, however the Content is hidden ,example :
this code , that read by Firefox
**
<script type="text/javascript" src="http://stc.m.nixcdn.com/js/html5-player.0.1.js"></script>
<div class="player">
<div class="hide-html5">
<audio id="audio" controls="controls">
<source src="http://aredir.nixcdn.com/4872ac6dba1848a6300a022df6b76789/5357217a/NhacCuaTui854/LacDuong-PhamTruong-3025698.mp3" type="audio/mpeg" />
</audio>
</div>
<div id="play" class="play control">
</div>
<div id="progress">
<div id="progress_box">
<div id="load_progress" style="width:0px;">
<div class="hand-control" id="hand_progress" style="left:-7px;">
</div>
<div id="play_progress" style="width:0px;">
</div>
</div>
</div>
</div>
<div id="play_time">
<span id="current_time_display">00:00</span>
</div>
</div>
<script type="text/javascript">
bodyLoaded();
document.getElementById("audio").addEventListener("ended",
function() {
playAudio();
}, false);
</script>
**
C# code :
using(WebClient client = new WebClient())
{
data = client.DownloadString(url);
}
but Source code , that downloaded not have the content.
I using c#. Thanks.