We Keep Coding

Showing Loading window on Submit and Retriving Data

I'm just new to these ASP.NET developments and still studying and developing things.
So for my project I'm using a ADMIN LTE theme.
Here It has a loading page, Whenever I click to a page this loading screen shows up and then load the page.
<div class="preloader flex-column justify-content-center align-items-center">
<img class="control-sidebar-animate" src="~/Addons/dist/img/AbdThub.png" alt="PAS Logo" height="80" width="100">
</div>
This code is on the Layout Page.
I want to know When clicking on a submit button on view, or Retrieving data I want to show this waiting image.
How can I use this on those actions?

for submit if you don't use ajax as explained here https://stackoverflow.com/a/21521228/11143288 :
$('form').submit(function () {
$("#loader").show();;// Call (Show) loading box by default.
if (Page_ClientValidate() != null) //Check if there is a validation on page.
{
if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
$("#loader").hide();
}
}
});
and for ajax calls :
$(document).ajaxStart(function(){
// Show image container
$("#loader").show();
});
$(document).ajaxComplete(function(){
// Hide image container
$("#loader").hide();
});

c# asp.net page jitters/jumps/lags on update while scrolling

If I am scrolling my page and the update gets triggered by the timer the page/scrollposition slightly jumps/jitters/lags. I am using MaintainScrollPositionOnPostBackon my pages and it works fine if I am stationary somewhere on the page, no jump/jitter/lag on update then. Any ideas on how to fix it while scrolling too? Maybe pause the timer while scrolling if possible?

There is workaround for that issue.
You pass to controller element you had focus on and then on page load you focus back to that element.
Find focus:
var focusedElement = document.activeElement;
focusedElement you send to server (controller or whatever) via post/get or something.
Focus back on page load:
$(document).ready(function() {
$("#" + recivedFocusedElement).focus();
}
recivedFocusedElement you recive from server.

Found a solution over here. For lazy people:
<script type="text/javascript">
window.scrollTo = function( x,y )
{
return true;
}
</script>
Just put this in your .aspx file.

ASP.NET Partial View if Layout is already loaded, else Standard View with default Layout

Is there a way to load a view as Partial (one with Layout = null), or as Standard (one with the default Layout in _ViewStart)?
I am trying to accomplish only loading part of a page (Partial View) into the current page if a user is already at some page that has the Layout presented, or loading the whole page (View + Layout) if a user is going to the page are not at a page that has the Layout loaded (such as when entering a specific URL into their address bar).

Yes, but you'll need to use some javascript too. Razor is a server-side rendering engine so once it has left the server you'll need client side scripting to take over and respond to your user's clicks if you want to dynamically load portions of the page.
In your View you could have something like this:
<button>Load Partial</button>
<div id="partial-content">
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("button").click(function() {
$.get("/ControllerName/MyPartial").success(function(data) {
$("#partial-content").html(data);
});
});
});
</script>
In your Controller:
public ActionResult MyPartial()
{
return PartialView();
}
The javascript is simple:
Wait for the document to be ready.
Bind to the click event of the button.
When the button is clicked make a HTTP GET request to the url.
When the response comes back set the html of your div.

How do i show a simple loading message on the screen while my page fetches data from server?

How do i display a simple loading message on a masked screen while my webpage loads.
I have a product comparison page which gets called with a button click. Now the comparison page takes approx 4 secs to load. This is because the Stored Procedure take about 3.5 secs to return a result.
So for these 4 secs after the user clicks the button we see the previous screen with only the spinner on the tag to indicate that the page is being redirected. Is there any way i can show a page mask where the current page is blacked out before the next page is loaded..
The way i redirect to the compare page is a c# function
protected void redirect_comparepage(object sender, EventArgs e)
{
Response.Redirect("~/ProductComparison.aspx", false);
}
I tried to do the following on the comparison page however it does not work.
How to display a loading screen while site content loads
Any suggestions?

How about something like this? I used a little jQuery.
Add an OnClientClick to your button control to start the magic...
<asp:Button runat="server" ID="SubmitButton" Text="Submit"
OnClientClick="pleaseWait();" />
Include these new HTML elements to dim the screen and place a "PLEASE WAIT" in the middle of it. Make sure that the z-indexes used in these elements are higher than anything else on your page. 1000 & 1001 should do nicely...
<div id="modal" class="modal" style="background-color:rgba(64,64,64,0.5);width:100%;height:100%;z-index:1000;display:none">
</div>
<div id="wait" class="modal" style="width:300px;height:200px;margin:100px auto 0 auto;display:none;background-color:#fff;z-index:1001;text-align:center;">
PLEASE WAIT...
</div>
Here is the OnClientClick function. It just uses JQuery to make the HTML elements appear...
function pleaseWait(){
$(".modal").show();
return true; // Can't remember if this is needed; but it won't hurt.
}
So when you click the button that starts the long data-process, the page will dim and a "PLEASE WAIT" appears in the middle until it refreshes.
If you aren't using or don't want to use jQuery, your pleaseWait() function would look something like this...
function pleaseWait(){
document.getElementById("modal").style.display = "block";
document.getElementById("wait").style.display = "block";
return true; // Can't remember if this is needed; but it won't hurt.
}

you can use use multithreading for this.
private void ThreadCall(){
Thread thread = new Thread(new ThreadStart(FetchData));
thread.Start();
}
private void FetchData(){
//your code here
}
put your fetching code in FetchData() and just call ThreadCall() from your main function..
it could have been given a better answer if you provide code and more information about your problem ..

Run Javascript when Asp.net page is loading

I wonder if there is way to run JS code whenever a asp.net page is contacting the server.
I.e. I'm looking for a general event handler that is triggered whenever a call to the server is made for runat="server" components.
I know there's a way to get jQuery.ajax() to run JS code before and after a call to the server is made, but I'm not sure how to do it in asp.net. Especially, since this projects uses a lot of custom components.
The goal here is to show some kind of loading image when a button is clicked, to prevent the user to click a button twice and also to show the user that the system is working.
If the click causes the page or an updatepanel to refresh, I'd only like to display the loading image before the refresh, eg. User clicks, "loading" is shown, page/update panel is refreshed (causing the "loading" to disappear), the new page/content is displayed as normal.
Update 1:
I can't use UpdateProgress because some of the buttons aren't inside UpdatePanels. What I really want to do is to fire a JS as soon as any button/control that will contact the server is clicked. I.e. if the user clicks a dropdown which doesn't contact the server, nothing should happend. But if that dropdown has any connection to the server, a JS should be run.
I understand that this is ASP.NET Ajax and not jQuery Ajax, I only used jQuery as an example. Because I've used a jQuery method before (with jQuery Ajax) to trigger JS before the server call was made. Eg. to lock the element that was clicked or to display a "Loading..." screen.
I could of course add a bit of a JS hack to every page which adds a "onclick" event to every button manually, but I thought it would be better if there was a general solution for this (since I've got lots of pages, each with a few buttons that contact the server on them).
Update 2:
When I think about it, it doesn't necessarily need to be a JS that is triggered. It would be good enough if the page somehow only made sure that the same button wasn't clicked twice. Either by disabeling the button or by adding something in front of it (like a "Loading..." screen).

You can use an UpdateProgress for this to use with update panels, but if you are doing a full page postback (i.e. not ajax) the only loading animation you can have is the browsers own.
UpdateProgress:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Shiny loading aninmation
</ProgressTemplate>
</asp:UpdateProgress?

Here is how you can do it using jquery:
$(function() {
$('a[href]').on('click', function(e) {
var self = this;
e.preventDefault();
loadAsync($(self).attr('href'));
});
});
function loadAsync(url) {
$('div#result').fadeOut(200, function() {
$('div#loader').fadeIn(200, function() {
$.get(url, function(data) {
$('div#result').html($(data));
}).done(function() {
console.log('done');
}).fail(function() {
$('div#result').html('Error');
}).always(function() {
$('div#loader').fadeOut(200, function() {
$('div#result').fadeIn(200);
});
});
});
});
}