Friday, June 2, 2017

asp.net textbox Enter key press focus to next control

The default behavior when  pressing Enter key on textbox is to fire the form submit event.
 This default behavior can be overridden and force the input to be advanced to the next control as shown below.

<script type="text/javascript">
 
 function pageLoad(){
 //you can use the control id or class
    $("#<%=txtName.ClientID%>").keypress(function (event) {
                var Text = $(this).val();
                if (event.which == 13) {
                    event.preventDefault();
                    $("#<%=txtPwd.ClientID%>").focus();
                }
            });
 
     $("#<%=txtPwd.ClientID%>").keypress(function (event) {
                var Text = $(this).val();
                if (event.which == 13) {
                    event.preventDefault();
                    $("#<%=butnLogin.ClientID%>").focus();
                }
            });
 } 
 
</script> 
 
 


Thursday, May 25, 2017

Multiple ID and class seletor



CSS
#divTitle.Format {  }

#divTitle.Format { }

Above CSS rules looks identical but they serves different purposes. As a summary above rules can be described as follows.

First CSS rule will Select all elements with the class named Format that are descendants of the element with an ID of divTitle.

 Second CSS rule will Select the element which has an ID of divTitle and also a class name of Format.

So if you want to select a specific HTML element with a given id and class the second CSS rule will come handy.

More detailed discussion of the above topic can be found here.
 
Cheers
Samitha

Thursday, May 4, 2017

Expand and Collapse a html Table Rows on Click

HTML Table rows can be easily expanded/collapsed using jQuery as displayed in  code snippet below.

e.g.
HTML

<table class="Menu">
            <tr class="row" >
               <td>Menu 1</td>
            </tr>
            <tr class="row" >
                <td>
                    Sub Menu 1
                    Sub Menu 2
                </td>              
            </tr>
            <tr class="row" >
                <td>Menu 2</td>
            </tr>
        </table>

JavaScript

<script type="text/javascript">
           $(function(){
              //collapse all rows on load
              $(".row").hide();
              
              ToggleCollapse();
           });

  function   ToggleCollapse(){
    var isCollapsed = true;

    $(".Menu").click(function () {
                    if (isCollapsed) {
                        $(".row").show();
                        isCollapsed = false;
                    }
                    else
                    {
                        $(".row").hide();
                       isCollapsed = true;
                    }
                  });
 }
</script>


I have used CSS classes to identify the table rows and  the HTML Table.

Cheers,
Samitha

Friday, April 28, 2017

Visual Studio Performance enhancements

If you get the feeling that Visual Studio takes long time for debugging process, ensure that you have made this changes to enhance the performance.

1.Disable XAML Designer (from Options -> XAML Designer -> General -> Enable XAML Designer)

2. Disable Diagnostic Tools while debugging (from Options -> Debugging -> General -> Enable Diagnostic Tools while debugging)

3. Disable full solution analysis  (from  Options -> Text Editor -> C# -> Advanced -> Enable full solution analysis)

Regards
Samitha

Thursday, April 6, 2017

Visual Studio 2015 Installer Projects

If you try to open an Installer project created from Visual Studio 2010 from Visual Studio 2015 you will get a error.

This can be resolved by installing the extension for Visual Studio 2015 which can be downloaded here.

Friday, March 10, 2017

asp.net DropDownList get selected Text and Value

You can use JavaScript or jQuery to get the selected text/value of a fiven dropdownl list as shown below.

HTML
<asp:DropDownList ID="ddlPerson" runat="server"  onchange="GetSelected(this)">
                                                                           

JavaScript

<script type="text/javascript">

    function GetSelectedTextValue(ddl) {
        var selectedText = ddl.options[ddl.selectedIndex].innerHTML;
        var selectedValue = ddl.value;
        alert("Text: " + selectedText + " Value: " + selectedValue);
    }

</script>

jQuery

 <script type="text/javascript">

    $(function () {
        $("#ddlPerson").change(function () {
            var selectedText = $(this).find("option:selected").text();
            var selectedValue = $(this).val();
            alert("Text: " + selectedText + " Value: " + selectedValue);
        });
    });

</script>

Cheers
Samita

Thursday, February 23, 2017

Asp.net Preview Image before Upload

If you want to preview and image before its uploaded you have two options

1. Using a jQuery plugin
  There are plenty of jQuery plugins available that you can use to achieve this purpose. Here I will list some of the common plugins used.

2.Without using a jQuery plugin
  Here you can use simple jQuery as shown below.

HTML

<form id="form1" runat="server">
    <input type='file' id="imgUp" />
    <img id="preview" src="#" alt="your image" />
</form>

JavaScript

<script type="text/javascript">

 $("#imgUp").change(function(){

     var input= $(this).val();


    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
});

 </script>

Cheers
Samitha