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.
Related
I need to download an excel file from a site.
I created a WebBrowser control inside a Windows Form that navigates to the site, select a criteria, clicks a search button which opens up another page.
Now on this page there is a link button with a javascript function, that downloads an excel file when it is clicked.
the link code is the following:
<a onclick="$find('ReportViewer').exportReport('Excel');" href="javascript:void(0)" style="color: rgb(51, 102, 204); font-family: Verdana; font-size: 8pt; padding: 3px 8px 3px 32px; display: block; white-space: nowrap; text-decoration: none;">Excel</a>
I wrote a code in the WebBrowser to find the link with Text "Excel" and click it, but this opens up Internet explorer and prompts the user for download.
This is an automated process, so I don't need the prompt, I need the download to happen automatically and save the file in a specific directory.
I tried to use this solution
Download a file through the WebBrowser control
But it doesn't work in my case, I think because I don't have a direct url that ends with pdf or xls. It's a javascript call.
Any ideas ?
HtmlElementCollection links = webBrowser.Document.GetElementsByTagName("A");
foreach (HtmlElement link in links)
{
if (link.InnerText.Equals("My Assigned")) //replace this with how you search for excel
link.InvokeMember("Click");
}
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 have a page with a jqGrid. On that grid I've added a custom button to the pager that, when clicked, opens a file browser for the user to upload an excel file. The file input is wrapped in a form and targeted to a hidden iframe.
I know that in Internet explorer, you cannot submit a file using javascript. I'm trying to figure out a way to submit the iframe and actually get the file to pass to the server with a value.
In chrome I'm able to submit it by triggering a click on a submit button I have way off the page on file input change and get the file, but in Internet Exploder it comes back null.
HTML:
<form action="/ManagedCatalog/ImportContractsFromExcelFile" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="">
<input type="file" id="uploadedFile" name="uploadedFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<input type="submit" id="submitBtn" name="submitBtn" value="Upload" style="position: absolute; z-index: 19999; top: -1000px; left: -1000px;"/>
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width: 0; height: 0; border: 0px solid #fff;"></iframe>
The custom nav button fires this:
function ImportContractsFromExcelFile() {
$('#uploadedFile').trigger('click');
}
And what I've got to work in Chrome:
$('#uploadedFile').change(function () {
$('#submitBtn').trigger('click');
});
Any tips, tricks, advice, reviews, or beatings are fully encouraged.
plz help.
Edit:
I'm doing it this way, because the silverlight app my team and I are rewriting acts this way and the client would like to keep this behavior. I may go down a jquery dialog window route and give the user a button to click, but I'd like to try and keep it as similar as possible.
i'm trying to show the progress bar while uploading. I have a gif image that has a class with the property display:none and on button click I switch the property to display: block using javascript.
this is my function.
function showProgress() {
$('#uplImage').css('display','block')
}
this is the image class
.uplImage {
display: none;
margin-left: 100px;
z-index: 999;
position:absolute;
margin-top: -800px;
}
this is my button
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="submit"
Height="35px"
Width="100px" OnClick="btnSubmit_Click" OnClientClick="showProgress()"
ValidationGroup="validate" />
gif image doesn't show.
When pressing on asp button it would postback to the server side. So the thing is that you image does appear for a millisecond and then the postback is send
If you want to show an upload image while the file is uploading you need to use ajax.
If you want to show a progress bar, you need to post the files asynchronously using ajax. Right now you're simply posting the form back to the server, of course nothing shows up :)
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