How to use BlockUI


Here I will tell you how can you block user interface.Sometimes you need to block user activity with page until a certain process is completed. Jquery provides us a very easy way to do that.All you need to do is download jquery library and BlockUI plugin file.Here is an example how to block user activity.
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/BlockUI.js" type="text/javascript"></script>
   
   <script type="text/javascript">
   $(document).ready(function () {
    $('#btnBlock').click(function () {
        $.blockUI({
        message: $('#Block_div'),
        css:
        {
        padding: 0,
        margin: 0,
        textAlign: 'center',
        fontSize: 12,
        cursor: 'auto',
        border: 'none',
        background:'none'
        }
     });
   });
   $('#Block_div').click(function()
   {
   $.unblockUI();
   });
});


    </script>
<div id="Block_div" style="width:100%; display:none;">
        <img src="Images/loading2.gif" title="Click here to unblock" />
    </div>
    <div>
    To block screen click on this button and to unblock screen click on div which appears after screen is blocked.
    <br />
    <input type="button" id="btnBlock" value="Block" />
    </div>



Let’s see in detail how to use it.Screen will be blocked when button is clicked.First thing in the BlockUI script is message: $('#Block_div') now this is name of the element which you want to display when screen is blocked I have aloding image in it you can use anything you want.Next you see some css properties these are optional if you do not want to use them you can skip them but you can get a good look if you use these properties.You can download BlockUI from here. http://jquery.malsup.com/block/#download

Comments

Post a Comment

Popular posts from this blog

Using Progress Bar In C#

Image
Using Progress Bar in C#: Progress Bar is very commonly used control in many applications to display the progress of task being performed. Progress Bar is displayed when copying files, deleting files or installing some software. How to use Progress Bar: ·          Start New Windows Form Application. ·          Go to Toolbox. ·          Select Progress Bar and Drag it to your Form. To make Progress Bar working you need to know some properties of Progress Bar Progress Bar.Maximum: Defines how long it should run Progress Bar.Step: Defines how much it should increase current position of Progress Bar. Progress Bar.Style: How should it look like? There is also a very basic method which is used to run Progress Bar properly. Progress Bar.PerformStep() Let’s see an example. In this example we will copy files and folders from one location to another and show the progress bar while copying. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using
Read more

Check if ViewBag is null or doesn't exist

ASP.NET MVC uses  ViewBag to store some data from Controller and than accessed in View like you can save UserName in ViewBag who is logged in to your website and than display it in view. Sometimes you need to check if ViewBag exists or it is not null than execute your next piece of code. Let's take an example. Controller Code public ActionResult Index() { ViewBag . UserName = "John"; return View(); } View Code @if ( ViewBag . UserName ! = null ) { < label >@ViewBag.UserName</ label >;     } Here if ViewBag.UserName is not null than label will be rendered with username. If it is null the code will not execute. So you can easily check for a ViewBag Property and execute your code.
Read more

Jquery serer side datatables in asp.net

In this post we will learn how we can implement jquery   server side datatables in asp.net mvc application. We need to add datatables library to our page, we can add references of libray from datatables <a href="https://datatables.net/" target="_blank">website</a>. We need to create an html table on which we will apply datatable. <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable" id="tblInventoryItems">   <thead>     <tr>       <th>Item Name</th>       <th>Item Price</th>       <th>Item Quantity</th>       <th></th>     </tr>   </thead>   <tbody></tbody> </table> Then we need the code which will apply the datatable to above html table. Below is the code to apply datatable $("yourtableid").DataTable({         "proccessing": true,         "serverSide": true,  
Read more