I do have a MVC5 C# View (razor as view engine) that sends and retrieves information from a database, it doesn't use jQuery, AJAX or JSOn to make the async calls so it refresh/reload the view every time it sends info to the database.
I want to show an image (sending image) to the user in order to let the user know that the page(MVC View) is working and that has wait, I do have jQuery code in the page and has tried this:
<script language="JavaScript" type="text/javascript">
$(window).load(function () {
$('#cargando').hide();
});
</script>
<style type="text/css">
#cargando {
width: 350px;
height: 70px;
clear: both;
background-color: #FFFF00;
color: #CC0000;
}
</style>
and has this div
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
but doesn´t work, could you please tell me how to show the image before the view renders again from the actio' controller?
this is my view
<div class="section">
<div class="container">
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
<div id="loading">
<br />
<div class="jumbotron">
<div class="container">
<img src="~/Imagenes/logo%logo.png" class="img-responsive" />
<div class="row well">
<div>
<img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" /> <p style="margin-left: 10px">
#*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*#
<h4>BIENVENIDO ...</h4>
<p>xxx permite ... </p>
</div>
</div>
</div>
</div>
It wont be possible without ajax because when you make a postback to your server it sends back a new HTML page and the browser processes that from scratch.
To show the user a loading image in between different pages or in between different postbacks of same page, you will have to use ajax request or you can use iframes which will complicate things more than ajax and are not preferred in such situations.
Following jQuery methods will be helpful:
$.load
$.ajax
$.get
If you want to display a "loading overlay" because your server round trip takes a while, you can do this with javascript. The new page load will re-hide the loading screen.
Place the "overlay div" outside of your main content, at the end of the page just before the </body> closing tag:
<div id="overlay" class="overlay">
<div class="loader"></div>
<!-- Alternatively you can have some text here -->
</div>
Your button would look like this:
<button id="mvc-action-button">
Some Action
</button>
Some CSS for the overlay:
html {
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
.overlay {
display: none;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.8);
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Use the following JS to display the loading screen:
document.getElementById('mvc-action-button')
.addEventListener('click', function(e) {
document.getElementById('overlay').style.display = 'flex';
});
See it all together in this jsfiddle.
Note that I've used flexbox to center the content on the overlay page, this may not work on all browsers (though modern browsers should be fine).
Caveats: If your subsequent page load hangs or fails for whatever reason, the user will be stuck on the loading screen or a white screen and will have to refresh the page.
Related
I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
</div>
After build, my markup code looks like:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
</div>
But after postback, this control's height automatically increases.
I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.
Appreciate for your help.
thats sounds weird
one solutions should be define a static height for that element in your css like
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
as referenced on this post
height issue in bootstrap switch,
also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files
Im trying to do a page which is similar to this http://www.manuliferetirement.sg/calculator.html on c# asp.net page. Is it possible to put multiple smaller pages/section and allow me to click next to go to the next section with c# asp.net?
Why yes! Inspecting the HTML code of the website, they merely had all the steps laid out in their own respective divs, and simply changed the CSS styling of each div from display: none to display: block to show them, and the opposite to hide them. Try right-clicking the webpage and selecting "Inspect Element", then try going through the steps. It should make everything clear.
If you want to do this, you'd need a bit of javascript knowledge, but it is very doable on ASP.NET.
If you know jQuery, It will help you a lot. Simply make your pages as div inside a single page and give them an unique ID.
<div class="page">
<div id="Page_One">
<input type="text" name="email_address" placeholder="Email Address"/>
<button id="GoToSecond">Next</button>
</div>
<div id="Page_Two" class="hidden">
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="retype_password" placeholder="Retype Password"/>
<button id="GoToLast">Next</button>
<button id="ReturnToFirst">Back</button>
</div>
<div id="Page_Three" class="hidden">
<p>A confirmation code has been sent to your email. Put your code here</p>
<input type="text" name="confirmation_code" placeholder="Code"/>
<button id="AddUser">Add User</button>
<button id="ReturnToSecond">Back</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Inside here you need to do some javascript to handle your ui transition
$("#GoToSecond").on('click', function(e){
//Do your validation to move next
$('#Page_One').hide("slide", {direction: "left"});
$('#Page_Two').delay(500).show("slide", {direction: "right"});
});
//Second Page functions
$("#ReturnToFirst").on('click', function(e){
$('#Page_Two').hide("slide", {direction: "right"});
$('#Page_One').delay(600).show("slide", {direction: "left"});
});
$("#GoToLast").on('click', function(e){
//Do your validation to move next
$('#Page_Two').hide("slide", {direction: "left"});
$('#Page_Three').delay(600).show("slide", {direction: "right"});
});
//Last Page functions
$("#ReturnToSecond").on('click', function(e){
$('#Page_Three').hide("slide", {direction: "right"});
$('#Page_Two').delay(600).show("slide", {direction: "left"});
});
$("#AddUser").on('click', function(e){
alert("Make your submission here");
});
})
</script>
<style>
.page{
margin: 0 auto;
width: 300px;
min-height: 200px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.hidden{ display: none;}
</style>
I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES
In my aspx page, I have a textarea:
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>
All I want is the Textarea auto display full the browser. But when I built the page, the text area just display small in the left browser screen.
Try to press F12, the Textarea tag is changed:
<textarea id="code" name="code" runat="server" wrap="off" style="display:block" > </textarea>
Really tired, I met this situation for many times. Sometimes, I add style= "clear:both" but in this situation, it cannot help.
The Textarea 's style is just contain: display:block
I copy my code to http://jsfiddle.net/REgjn/ ---> it display as the way I expected: the textarea is fill full the chrome browser. But it is not when I built it on the real browser.
Help!!!
Why is the TextArea tag changed???
I have modified your code. I hope it will work
<div style=" position: absolute; top: 45px; bottom: 5px;
left: 5px; right: 5px;width:99%; height:99%">
<textarea id="code" name="code" runat="server" wrap="off" style="clear: both; width:99%; height:99%" >
</textarea>
</div>
I have a drop down list, when I change the drop down list a telerik tree will be loading which is in a partial view and ajax loading bar appears in the tree content only. But I want to disable the page (user should not be able to use the page but he should see the page) while the content is loading and show the user a "loading....." screen.
If you use MVC's Ajax.BeginForm to do your ajax call back (rather than jquery) you can use the built in AjaxOption called LoadingElementId. The downside is that it will require you to use a form to post instead of using $.ajax(). In the form you have to have an invisible button and the onchange event for the dropdown would have to build the form data in hidden fields and then issue a click event to the hidden button.
The other approach is to toss a div up like this:
<div id="loading-pane">
<img src='<%: Url.Content("~/Content/Images/ajax-loader.gif") %>' />
</div>
and then css like this
#loading-pane { display:none; opacity: 0.8; position: fixed; top: 0; left: 0;
width: 100%; height: 100%; filter: alpha(opacity=80); -moz-opacity: 0.8;
z-index: 999998; background-color: #ffffff; }
#loading-pane img { position: absolute; top: 40%; left: 47%; z-index: 999999; }
then something like this
$('#MyDropDown').change(function() {
$('#loading-pane').show();
$.ajax({
success: function() {
$('#loading-pane').hide();
}
});
});
Perhaps you could make use of BlockUI