no

How to Add a Loading Screen to C# Using Jquery

With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using ...

With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article: http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/. It uses jquery's ui dialog and mvc's partial view to render the popup form.

But sometimes the submit event in the popup form requires some time to verify the data inputted, so I definitely needed a loading screen which by default is not included with the library.

So here's how I added the loading screen:
1.) Modify DialogForm.js

//after this line
$('form', dialog).submit(function () { 
//add
var ld = $(document.createElement('div')).attr('id', 'loadingDialog');
var opaque = $(document.createElement('div')).attr('id', 'opaque');
opaque.append(ld);
$("#" + $(dialog).attr("id")).prepend(opaque); //dynamic dialog id

//and after
data: $(this).serialize(),
//add these 2 events
beforeSend: function (xhr) {
  $('#opaque').show();
},
complete: function (jqXHR, textStatus) {
  $('#opaque').hide();
},
2.) Then we need to add the css styles in your css file:
#loadingDialog, .loading-dialog { width: 100%; height: 100%; background-image: url(images/bg_ajax-loader.gif); background-position: center; background-repeat: no-repeat; position: fixed; cursor: progress; border: 1px solid #000; filter: alpha(opacity=100); opacity: 1; }
#opaque { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2147483647; background-color: black; filter: alpha(opacity=40); opacity: 0.4; display: none; }
3.) And lastly don't forget to add the image bg_ajax-loader.gif under /Content/images folder.

Related

c# 1731144196114525254

Post a Comment Default Comments

Outsourcing

Are you looking for freelancers in the Philippines? Get in touch.

Donations

If you like what I do, you can support this channel by buying me a coffee. I would be grateful for your contribution! Your donations will help me create more FREE online courses and learning materials for programmers and remote workers.

item