Monday, June 4, 2012

How to configure a link to open/download documents in a website using ASP.NET and C#?

Sometimes we need to give/configure a link in our website to open and/or download facility of various types of documents like Microsoft documents(word, excel, power-point file), PDF file etc.

Here I will discuss 3 ways to open documents in a website and/or download a document from a website using ASP.NET and C#.

1. open document using iframe.
2. open document using HTTPResponse.
3. open document using Google doc viewer.


1. Open document using iframe.


    Inline frame or iframe is a window cut into your webpage that allows you to view another page on your site. It gives you the flexibility to render a specific portion without reloading entire page.


    ok. using this iframe you can view a document file including word, excel, power-point, pdf, text file and many more. One thing you need to remember that you must have document reader, installed at your client PC to open and read the document.


lets see how we can achieve this.

I assume that there is a folder FileStore at your website which holds all the document files.

1. add a new page.

2. at aspx page add an iframe.

        <iframe id="iframShowFiles" runat="server" height="600" width="800" frameborder="0">

        </iframe>

3. at cs page add the following code at page load event-


string fileName = Request.QueryString["FileName"] != null ? Request.QueryString["FileName"].ToString() : string.Empty;

        string surverUrl = Request.Url.AbsoluteUri.Split('/')[0] + "//" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + "/";
        string fileStoreLocation = "FileStore/";
        string downloadFilePath = surverUrl + fileStoreLocation + fileName;

        iframShowFiles.Attributes.Add("src", downloadFilePath);



now at the target aspx page add a link -


<a target="_blank" href="Default.aspx?FileName=Project-Food.xlsx">View file using iframe</a>


now tun the site.




2. Open document using HTTPResponse.


follow the following instruction:


1. In target aspx page add a hyperlink -


<asp:HyperLink ID="hypDownloadMyFile" runat="server" Text="View file using HTTPResponse"

            NavigateUrl=""></asp:HyperLink>

2. at cs page write the following code at page load event -


        string fileName = "Project-Food.xlsx";

     
        #region Download file using HTTpResponse

        hypDownloadMyFile.Attributes.Add("onclick", "javascript:DownloadFile();");

        hypDownloadMyFile.Attributes.Add("onmouseover", "this.style.cursor='pointer';this.style.color='red';");
        hypDownloadMyFile.Attributes.Add("onmouseout", "this.style.color='';");
        if (!Page.IsPostBack)
        {
            bool isDownloadFile = false;
            if (Request.QueryString["DownloadFile"] != null && Request.QueryString["DownloadFile"] == "1")
                isDownloadFile = true;

            if (isDownloadFile)

            {
                DownloadMyFile(fileName);
            }
        }

        #endregion



and this is DownloadMyFile method -



 private void DownloadMyFile(string fileName)

    {
        string fileStoreLocation = "~/FileStore/";
        string physicalPath = Server.MapPath(fileStoreLocation);
        string filePath = physicalPath + fileName;
        if (System.IO.File.Exists(filePath))
        {
            Response.ContentType = "application/octet-stream";
            Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
            Response.WriteFile(filePath);
            Response.End();
        }
    }


now run the site.





3. Open document using Google doc viewer.


   This is very interesting thing. Google introduces this document viewer. You do not need any document reader installed at client pc to open and read the document. The supported file types are:

  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)
as per google Technical Documentation - Instructions for building your own URLs

All viewer URLs should use the path http://docs.google.com/viewer .

This path accepts two parameters:
1. url : The URL of the document to view. This should be URL-encoded.
2. embedded : If set to true , the viewer will use an embedded mode interface.

For example, if you wanted to view the PDF at the URL http://research.google.com/archive/bigtable-osdi06.pdf , you would use the URL:


http://docs.google.com/viewer?url=http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf


lets use a real life example:


1. Add a hyperlink into your target aspx page -


<asp:HyperLink ID="hypViewFileUsingGoogleDoc" runat="server" Text="View file using Google Doc"

            Target="_blank"></asp:HyperLink>

2. add the following code at cs page at page load event -


 #region Download file using Google Doc

   
        hypViewFileUsingGoogleDoc.Attributes.Add("onmouseover", "this.style.cursor='pointer';this.style.color='red';");
        hypViewFileUsingGoogleDoc.Attributes.Add("onmouseout", "this.style.color='';");
        string surverUrl = Request.Url.AbsoluteUri.Split('/')[0] + "//" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + "/";
        string fileStoreLocation = "FileStore/";
        string downloadFilePath = surverUrl + fileStoreLocation + fileName;
        hypViewFileUsingGoogleDoc.NavigateUrl = "http://docs.google.com/viewer?url=" + downloadFilePath;

        #endregion


now run the site.


If you found a screen like this -





Do not worry about this. Google cannot format and display the document from private file storage that are behind a firewall or on a local site that is accessed with a 'localhost' address.


Click on red font 'here' text. the document will download.


You can discover many more from the Google doc viewer.




That's all for now. Happy programming.. :)



Saturday, June 2, 2012

Create expandable post with a link "Read More" in your blogger post?

When we write a post, generally the google blogger shows the full-length blog at home page. The result is, the blog home page grows as long as the total length of all displayed blog. By using 'After the jump' feature we can show only the blog summary.

I have found it very useful guide from google blogger guide.

Here is the link: Create expandable post

Friday, June 1, 2012

How to remove Home link at the bottom of blogger main page?


F

ollow the steps to remove the Home link at the bottom of your blogger main page.


Step 1: From Dashboard > Template > Edit HTML.


Click "Proceed" button.

Step 2: at code editor check "Expand Widget Templates".

Step 3: Then copy the code and paste in a notepad.
Then Find and Remove <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>





your can also comment the line so that reuse later.





Thats all. now replace the existing blogger code with new modified code. Save the template and see preview. Happy blogging. :-)