How to preview various documents in Silverlight Application:

I had to display various documents for preview in my Silverlight application. All the file data is stored in database. We do not want to store these files in File System. This is to make sure that this will not come and byte us when we choose Cloud. I spent enough time in googling. Finally I found out below two solutions:
   1. IFrame or DIV in silverlight application
   2. Use RadHtmlPlaceHolder telerik control.
  
I found RadHtmlPlaceHolder control more flexibile and easy to implement.

Here are the steps for my POC:
I had to display various documents in my Silverlight application. All the file data is stored in database. We do not want to store these files in File System. This is to make sure that this will not come and byte us when we choose to use in Cloud. I spent enought time in googling. Finally I found out below two solutions:
   1. IFrame or DIV in silverlight application
   2. Use RadHtmlPlaceHolder telerik control.
  
I found RadHtmlPlaceHolder control more flexibile and easy to implement.
Here are the steps for my POC:

Step #1:Create a table in SQL server which will hold file data.

CREATE TABLE [dbo].[FileUpload](
 [Id] [int] IDENTITY(1,1) NOT NULL,
 [FileName] [varchar](50) NULL,
 [FileContent] [varbinary](max) NULL,
 [ContentType] [varchar](50) NULL,
 CONSTRAINT [PK_FileUpload] PRIMARY KEY CLUSTERED
(
 [Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

• File Name: File name
• File Content: Stored file content in VarBinary. For front end(C#) code it would be array of bytes.
• Content Type: Store type of the file. Example: PDF, JPG, PNG, etc.

Note: Write a tool to save some sample files in database. This code is out of scope for this blog. You may google for this.

Step #2:
Create a stored procedure to read File data from database.
CREATE Procedure [dbo].[GetFile]
 @Id int
AS
 Begin
  Select top 1 FileContent from  [FileUpload] where id=@id
End
The above stored procedure will read a document based on document id.

Step #3:
Create an .ASPX page for preview document on the screen. This page will be used as source for RadHtmlPlaceHolder control.
Write a method to read File content from database:
 public byte[] GetDocument(int docId)
        {
            byte[] result = null;
            using (SqlConnection aspnetDbConnection = new SqlConnection(ConnectionString))
            {
                SqlCommand command = aspnetDbConnection.CreateCommand();
                command.CommandType = CommandType.StoredProcedure;
                command.CommandText = "GetFile";
                SqlParameter paramFileName = new SqlParameter("@Id ", docId);
                command.Parameters.Add(paramFileName);
                aspnetDbConnection.Open();
                result = (byte[]) command.ExecuteScalar();
            }
            return result;
        }
Create below two methods in .ASPX code behind.
  // Declare this variable to hold document Id
  int docId;

  //This is Page Load event of ASPX page
        protected void Page_Load(object sender, EventArgs e)
        {
   // Read querystring of document id. This querystring is passed from Silverlight page
            docId = Convert.ToInt32(Request.QueryString["docid"]);

   LoadDocumentPDF();
           
        }

        void LoadDocumentPDF()
        {
            DocumentsService service = new DocumentsService();
   // Call GetDocument method to read byte[] of the required document
            byte[] buffer = service.GetDocument(docId);

   // Provide content type information here. In this case I know the content type is PDF. This content type can be many types. For example JPG, DOC, PNG etc
            Response.ContentType = "application/pdf";
            Response.AddHeader("content-length", buffer.Length.ToString());
            Response.BinaryWrite(buffer);

        }

Step #4:
Now its time to write some code in Silverlight.
Add RadHtmlPlaceholder control in XAML file:

< telerik:RadHtmlPlaceholder x:Name="TheHtmlPlaceHolder" Grid.Row="1" RespectSilverlightLayoutMeasure="True" >< /telerik:RadHtmlPlaceholder >

In code behind, paste below two lines to display required document. At this moment, I have hard coded Document Id to "2". In read document Id should be dynamic.

 Uri uri = new Uri("http://localhost:2233/DocumentViewer.aspx?docid=2", UriKind.RelativeOrAbsolute);
TheHtmlPlaceHolder.SourceUrl = uri;