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




Friday, February 17, 2017

ASP.Net MVC generate Url of any file

If you want to get generate a URL for a given file (image)  in ASP.net MVC you can use following method

public static string ResolveServerUrl(string serverUrl, bool forceHttps)
{
    if (serverUrl.IndexOf("://") > -1)
        return serverUrl;

    string newUrl = serverUrl;
    Uri originalUri = System.Web.HttpContext.Current.Request.Url;
    newUrl = (forceHttps ? "https" : originalUri.Scheme) +
        "://" + originalUri.Authority + newUrl;
    return newUrl;
} 
 
 Then you can get the absolute URL by calling the method as displayed below.

ResolveServerUrl(VirtualPathUtility.ToAbsolute("~/images/YourImage.gif"),false))
 
 
Refer to this stackflow discussion for more information

 
Cheers,
Samitha
 
 

Friday, February 3, 2017

Printing web pages


When you are developing a Web page, you will have to consider Web page printing facility. There are some guidelines you need to follow to ensure that all the content within the page is printed in a usable way.

Following article discusses on the way you should design the page. In summary you should consider following when designing the style sheet.

1. Design a print style sheet (use media="print")
2. Remove unwanted items (use a no-print class). In addition you might need to eliminate hyperlinks being printed. That can be achieved as shown below.
 @media print
{
     a[href]:after {
    content: none !important;
   }
}

3. Format the page
4. Change the font and Links


Cheers,
Samitha

Friday, January 27, 2017

asp.net mvc disable submit when ENTER key is pressed

When you create a view with a submit button, the default behavior is submit will be triggered on KEY PRESS events.

If your view has a BeginForm, following code will stop submitting on KEY PRESS.

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { onkeydown = "return event.keyCode!=13" }))
{
    //code
}


Alternatively you can use jQuery to resolve the same issue as follows

<script>

 $(function () {
         $(document).on("keydown", "input", function(e) {
             if (e.which==13) e.preventDefault();
        });
  });

</script>


Friday, January 20, 2017

Rotate Image OnClick

An image can be easily rotated using JavaScript or jQuery. I ll share both ways in this post.

HTML

 <img src="Pic.jpg" id="image" onclick="rotate90(this)"> 
 
JavaScript

 <script>
    var angle=90;
 
    function rotate90(ele){
  
     if(angle>360)//reset angle
                angle=90;
 
     ele.style.webkitTransform="rotate("+angle+"deg)";//Mozilla
     ele.style.msTransform ="rotate("+delta+"deg)"; //IE
 
     /*optionally set other vendor specific transformation
       ele.style.MozTransform = rotate("+delta+"deg)";
       ele.style.OTransform = rotate("+delta+"deg)";
    */
 
        angle+=90;
    }
 </script>
 
jQuery
 
 Use jQuery Rotate plugin to do the actual rotation 

 <script>
    var angle=90;
 
    function rotate90(ele){
  
       if(angle>360)//reset angle
                angle=90;
 
       $(this).rotate(angle);
 
        angle+=90;
    }
 </script>
 
Cheers
Samitha

Wednesday, January 11, 2017

asp.net MVC Make DIV redirect

 Suppose you have a DIV element on a page, such that when clicked should behave like a normal Hyperlink. This can be easily achieved using jQuery.

HTML

<div class="logo" data-action ="@Url.Action("ActionName", "ControllerName")" style="cursor: pointer;" >                   
  DivText       
</div>
 
JavaScript

<script>
   $(function() {

     $('.logo').click(function () {
                var url = $(this).attr('data-action');

                if (url !== undefined)
                    window.location.href = url;
            });
});

</script>