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
Related
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.
I am creating a treeview in asp.net and able to bind treeview perfectly.But my tree view is looks the following image which is as default layout of treeview control.
I am using the following code
$(document).ready(function () {
$("div[id=tvCategories] input[type=checkbox]").click(function () {
$(this).closest('table').next('div').find('input[type=checkbox]').attr('checked', this.checked);
$(this).parents('div').each(function (index) {
if ($(this).find('input[type=checkbox]:checkbox').length > 0) {
$(this).prev('table').find('input[type=checkbox]').attr('checked', true);
}
});
});
});
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TreeView ID="tvCategories" NodeIndent="25" OnTreeNodeDataBound="tvCategories_TreeNodeDataBound" Style="font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 5px; margin-bottom: 5px; margin-left: 50px; color: Black; font-size: 12px"
runat="server" ShowCheckBoxes="All">
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
But I want need the following layout. which I am not able to create this
Please help me to create this.Is Trieeview control is match for this layout or bind it by other way ?
What you are intending to do is not possible to elegantly do because of the default HTML that is rendered by the TreeView control (Table -> Div -> Table, Div etc).
You could however use a CSS control adaptor to change the way the default HTML is rendered (Ul -> Li -> Ul -> Li). The HTML that is rendered using this approach is nested and therefore can be targeted using CSS to attain the look you are seeking to achieve. You may have to rewrite some of your code and create a custom implementation.
See http://samples.asp.net/cssadapters/TreeView.aspx for code examples.
I hope that helps!
I'm creating a form and am trying to do validation on my bootstrap form, using bootstrap components. I'm using a c# class library to do my server side validation, and then use the c# code-behind to validate the styles when the form meets a validation condition. I use a panel to hold my form control as such:
<asp:Panel ID="TeacherNamePanel" CssClass="form-group" runat="server">
<asp:TextBox ID="tbTeacherName" CssClass="form-control input-lg" placeholder="Teacher-in-charge" runat="server"></asp:TextBox>
</asp:Panel>
and in the code-behind to validate the style:
if (teacherName.Length == 0)
{
TeacherNamePanel.CssClass = "form-group has-error has-feedback";
Label span = new Label();
span.CssClass = "glyphicon glyphicon-remove form-control-feedback";
span.Attributes["style"] = "vertical-align:middle";
TeacherNamePanel.Controls.Add(span);
}
else
TeacherNamePanel.CssClass = "form-group";
However, my glyphicon is not centred in my form's input control, it's too low. Anyway to rectify this problem? Tried to change the positioning for "top" in the css for .has-feedback .form-control-feedback but to no avail.
Just a couple of ways to achieve what your after.
Use different syntax:
span.Attributes["style"] = "vertical-align:middle";
to
span.Attributes.Add("vertical-align", "middle");
Add a css class and apply it to label with the CssClass property. For instance:
This goes in your css file
.centerAlign {vertical-align: middle;}
then the following should work
span.CssClass = "centerAlign";
and will generate:
<span class="centerAlign">your text</span>
Try using !important to force the attribute to override predefined ones like so:
span{vertical-align:middle!important;}
Solved! I copied the following css from bootstrap.css
.has-feedback .form-control-feedback {
position: absolute;
top: 25px;
right: 0;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
and pasted it in my own stylesheet and adjusted top and right to fit my input box. Thanks for your help and advice guys!
I am generating excel file from sql database, sql datatable contain 50k data so that file took long time to download. so i want to display one waiting dialog box to user while downloading that file. Any suggestion?
you can try the way I did it using jquery. this will show a loading image during a long process.
Add a gif(loading image) in your _Layout.cshtml. Put this inside the body.
<div id="loaderblock"></div>
<div id="loadercontainer">
<img src="~/Images/sampleloadingimage.gif" />
</div>
add this to your Site.css
#loadercontainer { display:none;position: fixed;margin-top: 20%; margin-left: 45%; z-index: 999999;}
#loaderblock {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
add this javascript in your view.
function generateexcel() {
$('#loaderblock').fadeIn();
$('#loadercontainer').fadeIn();
$("#idofyourform").submit(); //submit your form
}
and change your submit button to something like this:
<input type="button" value="Generate Excel" onclick="generateexcel();" />
this sample will show you how it works: sample
that is not my issuse.i want that loading image display only while the file is downloading.when file is successfully download and save dialog appear on browser at that time loading image should disappear automatically.
I have problem in Visual Studio 2008 (ASP.net with C#).
I have div#apDiv13, now I want to make my div a hyperlink.
I set my div's background and now I want it to be a hyperlink on mouse over
or go to some address in web on-click.
This is very bad idea but technically it's possible. What you need to do is display link as a block and set its size to 100% vertically and horizontally so it fills the container div.
Example (http://jsfiddle.net/snLwg/)
div {
background: red;
width: 300px;
height: 300px;
}
div a {
display: block;
height: 100%;
width: 100%;
}
Simple way:
<a href="http://stackoverflow.com/">
<div>Contents of your div</div>
</a>