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.

• jQuery File Upload
• Dropzone
• Bootstrap File Input

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

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

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