Countimator - A nice animated counter for your important numbers in home page

Again, its all about how users feel about your application. No matter how complex your business logic and algos, what users see is more important to measure the true value of your work. So making things a little fancy is not wrong in such a way.

If you have some key indicators to be shown in your home page that are important and large enough to notice by default, give them a little bit of fancy animated look. It will certainly impress your users.

To do that, we can easily use JQuery countimator plugin.

Download it and reference from your page after the JQuery.

 <script src="script/countimator/jquery.countimator.min.js" type="text/javascript"></script>  

Now let your numbers to be inside span tags with the class of counter.

 <span class="counter" >310.25</span>  

And add the following to your js file.

 $(function () {  
      $(".counter").countimator();  
 });  

Its done and you will see a nice implementation of countimator in your home page.

Click here for their official demo page.

Happy Coding...

An impressive tooltip for your web application with JQuery and Bootstrap

Providing title for a link or div make the browser to show it as tooltip text. If we can make it as a bit more beautiful for the user, it is interesting. With bootstrap, its very simple. Look at the following example.

 <a data-toggle="tooltip" title="Your title here">Link1</a>  

and add the following to your js file.

 $(document).ready(function () {  
   $('[data-toggle="tooltip"]').tooltip();   
 });  

nice and easy. look how it looks like.

Happy coding

ASP.Net - Make textbox numeric only - easy way

Sometimes we try validating various types of input types such as numeric only, decimal numbers and many more. To avoid any crashes and run time errors, both client side as well as server side validation is important.

Numeric validation has made easy with JQuery now all you have to do is to download the js file and implement it on your web application. Let's see how it is done below; Make sure you reference a valid JQuery on top of your page.

 <script src="/js/numeric/jquery.numeric.js" type="text/javascript"></script>  

And your input will look like below;

 <asp:TextBox ID="txtId" runat="server" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>  

And finally in your page related js file, add the following;

 $(document).ready(function () {  
   $("#txtId").numeric({ decimal: false, negative: false });  
 });  

The text box above will only enabled for entering positive whole numbers and no decimal is allowed. There are config parameters that we can use for different kind of numeric types such as;

 $("#txtId").numeric();  
 $("#txtId").numeric(","); // use , as separator  
 $("#txtId").numeric({ decimal : "," }); // use , as separator  
 $("#txtId").numeric({ negative : false }); // do not allow negative values  
 $("#txtId").numeric({ decimalPlaces : 2 }); // only allow 2 decimal places  
 $("#txtId").numeric(null, callback); // use default values, pass on the 'callback' function  

You can read more details here;

Happy coding :)

Chosen - a JQuery plugin for drop down lists for ASP.Net Web Applications

First of all you can see and download the plugin from here. A nice searchable drop down list for your web application is simple to implement now. Look at the country drop down below.

A drop down like this will be more user friendly as it provides more functionalities to the user. So lets see how we can implement this.

First you need to reference JQuery and then the chosen styles and the chosen js file.

 <script src="script/jquery-latest.js" type="text/javascript"></script>            
 <link href="/css/chosen.css"  rel="stylesheet" type="text/css" />            
 <script src="/js/chosen.jquery.js"  type="text/javascript"></script>  

and then add the drop down list to your page.

 <asp:DropDownList ID="drpCustomer" runat="server" CssClass="drpCustomercls" ClientIDMode="Static" ></asp:DropDownList>  

Now we need to apply chosen to this drop down list.

 $(".drpCustomercls").chosen({  
     "placeholder_text_single": "Customer"// Your placeholder here  
   }).change(function () {  
     var idCustomer = $(this).val(); // you can get the selected id from this.      
   });  

So you will get a final output like the following;

(Sorry for blurred content)

And it is more user friendly and very attractive for your application. Hope this helps. Happy coding.

GetOrdinal in C# - Why and How?

In our data access methods, we may use Data Tables, Data Sets or Data Readers. One of the fastest and more efficient way is to use Data Readers. It could be Sql, Oledb or even Ingress data reader.

There are many ways that we can pull out the data from Data Readers. Today we discuss the GetOrdinal method which is a recommended method.

Why it is so important? You can read the details from here. This is what MSDN says about it.

GetOrdinal performs a case-sensitive lookup first. If it fails, a second, case-insensitive search occurs (a case-insensitive comparison is done using the database collation). Unexpected results can occur when comparisons are affected by culture-specific casing rules. For example, in Turkish, the following example yields the wrong results because the file system in Turkish does not use linguistic casing rules for the letter 'i' in "file". The method throws an IndexOutOfRangeexception if the zero-based column ordinal is not found.

Lets see how we can implement it. Have a look at the following code sample.

 public List<MyEntity> GetEntityList()  
     {  
       List<MyEntity> MyEntityList = new List<MyEntity>();        
       DataAccessClass dbAccess = new DataAccessClass ();  
       string sProcName = "MyProcName";  
       try  
       {  
         using (SqlDataReader dr = dbAccess.ExecuteReader(sProcName))  
         {   
             int idOrdinal = dr.GetOrdinal("id");  
             int nameOrdinal = dr.GetOrdinal("name");  
             while (dr.Read())  
             {  
               MyEntity me = new MyEntity ();  
               me.id= dr.Getint32(idOrdinal);  
               me.name= dr.GetString(nameOrdinal);  
               MyEntityList .Add(pa);  
             }            
         }  
       }  
       catch (Exception ex)  
       {  
         throw new Exception(ex.Message, ex);  
       }  
       return MyEntityList ;  
     }  

Try it with your own entities and DB Access classes. Compare it with Data Tables and Data Sets and use whenever necessary. Happy Coding :)

A Confirmation Dialog for ASP.Net with Bootstrap

Most of the time, you may perform CRUD operations in your web application and some may cost you a lot if something goes wrong. For example, even the admin can go wrong with a little thing and the whole application may be crashed. To avoid such things, we can have a confirmation popup before performing any CRUD operation which is worth to double check. With bootstrap, it is not that complex and can easily manage in the client side. First you need to create the confirmation popup.

 <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
     <div class="modal-dialog">  
       <div class="modal-content">  
         <div class="modal-header">  
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
           <h4 class="modal-title" id="myModalLabel">Confirm</h4>  
         </div>  
         <div class="modal-body">  
           <p>You are about to save one record.</p>  
           <p>Do you want to proceed?</p>  
         </div>  
         <div class="modal-footer">  
           <button type="button" class="btn btn-default" data-dismiss="modal">No</button>  
           <a class="btn btn-danger btn-ok" data-dismiss="modal">Yes</a>  
         </div>  
       </div>  
     </div>  

This will give you confirmation window like below;

We are not done yet. Still we need to pop this window once the user click on Save button. To do so, we declare the button as below.

 <button id="btnSave" class="btn btn-primary btn-lg btn-block btn-sm btn-setmargin" type="button" data-toggle="modal" data-target="#confirm-delete">Save</button>  

A simple button which will be called this above created popup is enabling user to think twice before saving a record.

The "Yes" Button on popup can have a Ajax call to update the details or even can use a server side button control with a postback enabled.

Ultimately the page will looks like below.

Happy coding... :)

Bootstrap Columns Hack - Add additional columns

In Bootstrap 3, you will get default 12 columns that we discussed earlier as well. From 1 to 12 you are able to select which width you need in your grid. For example you can have 3 columns in a row where you may use col-lg-4 as the class name for all 3 divs you create inside the row.

What if we need a customized columns which doesn't support by the default bootstrap css template. You still can add a small piece of code into bootstrap.css file and use it across the application.

Look at the following css;

 .col-xs-1-5,  
 .col-sm-1-5,  
 .col-md-1-5,  
 .col-lg-1-5 {  
   position: relative;  
   min-height: 1px;  
   padding-right: 10px;  
   padding-left: 10px;  
 }  
 .col-xs-1-5 {  
   width: 15%;  
   float: left;  
 }  
 @media (min-width: 768px) {  
 .col-sm-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  
 @media (min-width: 992px) {  
   .col-md-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  
 @media (min-width: 1200px) {  
   .col-lg-1-5 {  
     width: 15%;  
     float: left;  
   }  
 }  

in this code, you will get equally width of 15% columns. like below;

 <div class="row">              
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>              
 </div>  

So the 15*6 = 90 and you still have 10% left for a column. Just modify the above code to cater for another 10% column.

 /*10% column*/  
 .col-xs-1-0,  
 .col-sm-1-0,  
 .col-md-1-0,  
 .col-lg-1-0 {  
   position: relative;  
   min-height: 1px;  
   padding-right: 10px;  
   padding-left: 10px;  
 }  
 .col-xs-1-0 {  
   width: 10%;  
   float: left;  
 }  
 @media (min-width: 768px) {  
 .col-sm-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  
 @media (min-width: 992px) {  
   .col-md-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  
 @media (min-width: 1200px) {  
   .col-lg-1-0 {  
     width: 10%;  
     float: left;  
   }  
 }  

So the complete code for 100% for the page will be look like below;

 <div class="row">  
             <div class="col-lg-1-0"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>  
             <div class="col-lg-1-5"></div>              
</div>  

So you will get 15% equally divided 6 columns and a 10% column at first. This way, it is possible to add extra columns as much as needed.

Happy coding...!

ASP.Net Bootstrap Pagination - Easy way with JQuery AJAX

There has to be at least one listing in your web application. And mostly you may use a Pager that is provided as a ASP.Net control.

Today we talk about a different way of pagination with Bootstrap and JQuery AJAX. It is much more easier and sometimes having more control to the developer.

You don't need to reinvent the wheel but we can use already built controls for this too. Thanks to "Christos Pontikis", you will find a good pagination control here.

Download it and add the references to the project.

In your java-script file, add the following,

 function SetPagination() {  
   var pageRows = 20;  
   $("#pagination").bs_pagination({  
     totalPages: Math.ceil($("#hdnTotalRecords").val() / pageRows),  
     currentPage: $('#hdnPageNumber').val(),  
     rowsPerPage: pageRows,  
     visiblePageLinks: 5,  
     showGoToPage: true,  
     showRowsPerPage: true,  
     showRowsInfo: true,  
     showRowsDefaultInfo: true,  
     disableTextSelectionInNavPane: true, // disable text selection and double click  
     onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked  
       //alert('Current page is: ' + data.currentPage + '. ' + data.rowsPerPage + ' are displayed per page.');  
       GetQuestResultPagination(data.currentPage, data.rowsPerPage);  
     }  
   });  
 }  

SetPagination() is the java-script function that we use for setting up the pagination control.

var pageRows = 20; 

This is the default value for no of rows per list.

totalPages: Math.ceil($("#hdnTotalRecords").val() / pageRows),  

This is where we set the actual no of pages with its calculation. the hdnTotalRecords is the hidden field where we keep total no of records.

currentPage: $('#hdnPageNumber').val(),

Here we set the current page number.

onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked  
       //alert('Current page is: ' + data.currentPage + '. ' + data.rowsPerPage + ' are displayed per page.');  
       GetQuestResultPagination(data.currentPage, data.rowsPerPage);  
     }  

when the pagination is changed, this even fires and the function inside it will create the ajax call to the DB and get the relevant data and make the list accordingly.

Once it is loaded, the look will be like below;

Very easy and user friendly pagination with bootstrap. Happy coding.. :)