Google Autocomplete for Addresses and Search

If your application includes an address text field that user should be specified, Google Autocomplete for Addresses and Search  can help users supply the details. This is very easy to integrate and efficient.


Read here for more information.

Cheers,
Samitha

Hide elements when pritning the web page

When it comes to print a given web page, there may be things that we do not wish to appear in the print preview or when the page is actually printed. There are few ways to solve this issue.

1. Write print specific page and redirect to that page on print.
2. Use CSS to hide elements on print.

Here I am going to show how we are going to achieve this using CSS.

1. Write a class for non printing items in your CSS file (such as. .no-print)
2. The class definition would be similar to shown below.

/*use media query to style page when printing*/
@media print
{
    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }


/*removes href values when printing */
    a[href]:after {
    content: none !important;
  }
}

3. Refer the class in the elements that needs to be hidden

e.g.

• Hyper link and image

<a href="http://domain.com/link" target="_blank" class="no-print">
                                            <img  class="no-print"     src="~/Content/Styles/_Default/image.png" height="20" width="20">
                                        </a>

• Button 
  <input type="button" value=Apply" class=" no-print" />

Cheers,
Samitha

Bootstrap layout generator

Since twitter introduced BootStrap, there has been plenty of resources that aid in building bootstrap layouts. Now the developers simply can try one of free online layout builders and generate the layout online.
This article discusses some of the available online bootstrap layout generators and I found layoutit to be very use full.

Cheers,
Samitha

ASP.Net keep textbox passoword on postbacks

As a security measure , text inputted to a password textbox is cleared on post backs. If any of you come across a situation where it needs to be keep password visible on post backs, it would be not as straightforward as you might have think.

Achieving this objective involves following steps.

1. Textbox definition (in the .aspx page)


2. PageLoad code behind
 txtAdminPWD.Attributes("type") = "password"

 If ViewState("Password") IsNot Nothing Then
            txtAdminPWD.Attributes.Add("value", ViewState("Password").ToString())
 End If

3.  Password stored to the textbox in the value and in view state (can be inside a method to populate the password )
ViewState("Password") = Decrypt(cUser.AdminPWD).ToString()
                txtAdminPWD.Attributes.Add("value", Decrypt(cUser.AdminPWD).ToString())

4.Use the javascript PageLoad to restore password textbox value
function pageLoad() {
                setTimeout(function () {
                   $("input#ctl00_cphMainContent_txtAdminPWD").val($("input#ctl00_cphMainContent_txtAdminPWD").val());
                }, 10);
{

5. Clearing the password
txtAdminPWD.Text = ""
txtAdminPWD.Attributes.Add("value", txtAdminPWD.Text)


Cheers
Samitha

Asp.net MVC 4 bootstrap integration

When it comes to integration of the popular Bootstrap with Asp.Net MVC,. there are  plenty of tutorial that guide you on step-by-step instructions on installation. I found following article pretty easy to follow and install bootstrap without much hassle.

1. Using the NUGET Package manager
2. Without using the NUGET package manager

Cheers,
Samitha.

Disable all Element inside a div or table

If you ever wanted to disable all the elements inside a table or div. jQuery provides an easy way of doing it.


$("#tableName").find("input,button,textarea,select").attr("disabled", "disabled");

 You can also try the jQuery BlockUIplugin for Page or element level blocking.

Cheers,
Samitha

asp.net textbox yellowing in Chrome

I came across this issue when working with textboxes (auto fill on)   and tested on chrome browser. The textboxes are rendered with a yellowish background color.

This can be resolved in two ways.

1. Using CSS
 input:-webkit-autofill
    {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

2.Using jQuery
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

Detailed discussion can be found here.

Cheers,
Samitha