Loading a Pdf from the File System in a LightSwitch Web Application
Prerequisites
For this sample, I will be using Visual Studio 2012 with LightSwitch installed. You will also need to have ComponentOne Studio for LightSwitch installed to create this sample. Links to the Studio for LightSwitch download page, as well as the sample created below, can be found at the bottom of this post.
Setting up the Application
Let’s begin by setting up the LightSwitch application to use the C1PdfViewer for LightSwitch. Open Visual Studio and start a new project by clicking File>New Project. You will be presented with the New Project dialog. In this dialog, select “LightSwitch” from the navigation pane on the left and select “LightSwitch Application” in your desired programming language. 
Now we can start digging into the application. Let’s navigate to the “Properties” screen and add the PdfViewer extension to the project and set the application type to “web”. Make sure your extensions are added and save and close the screen.
Creating the Data
Inside the solution explorer, right click the “Data Source” node and select “Add Table”. Name the table “PdfDoc” and when the screen is presented, add the following data and data types to the table. 
Now that we have a table created, let’s add the screen that’s going to show our data.
Creating the Screen
In the solution explorer, right click the “Screens” node and select “Add Screen”. In the “Add New Screen” dialog, select “List and Details Screen” and set its screen data to the “Pdf Docs” table that we just created. 
Click OK and the screen will be created for you behind the scenes. When you are presented with the screen designer, it should look similar to the following. 
We’re going to modify this hierarchy slightly and add the C1PdfViewer extension to the screen as well as a button to load our Pdf into the binary field that we prepared in the table. In the “Rows Layout” of the screen, click the drop down for the “Description” field and select the C1PdfViewer. 
Next, expand the Command Bar of the list node and add a button to the bar. 
You will be presented with a dialog that prompts you name the method that will be used by this button. Name this method “LoadPdf” and click OK to create the button. 
Creating the User Code Folder
Next, what we will need to do is give the button something to do. In the screen designer, right click on the “Load Pdf” button and select “Edit Execute Code”. 
We are not going to write any code just yet, but we needed to follow these steps to create the "User Code" folder.
Building the Silverlight Child Window
In order to circumvent the Silverlight dialog security, we will create an open file child window that will call the OFD for us. In the solution explorer, switch from “Logical View” to “File View” to expose the guts of the project. Expand the Client node and you should see a folder labeled “User Code”. Right click on this folder and select Add>New Item. Select “Silverlight Child Window” from the list and name it “SelectFileWindow.xaml”. 
After the child window gets created, we can add some XAML to the SelectFileWindow.xaml page so that the xaml window looks like below.
<controls:ChildWindow x:Class="LightSwitchApplication.UserCode.SelectFileWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300"
Title="SelectFileWindow">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Content="Browse" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Name="BrowseButton" VerticalAlignment="Top" Width="75" Click="BrowseButton_Click"/>
<TextBox Height="23" HorizontalAlignment="Left" Margin="0,12,0,0" Name="FileTextBox" VerticalAlignment="Top" Width="300" IsEnabled="True"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
</Grid>
</controls:ChildWindow>
Now we can open up the SelectFileWindow.xaml.cs to wire up the child window controls. Let’s add some code so that the cs file looks like below.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Runtime.InteropServices.Automation;
namespace LightSwitchApplication.UserCode
{
public partial class SelectFileWindow : ChildWindow
{
public SelectFileWindow()
{
InitializeComponent();
}
private FileStream documentStream;
public FileStream DocumentStream
{
get { return documentStream; }
set { documentStream = value; }
}
/// <summary>
/// OK Button
/// </summary>
private void OKButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
}
/// <summary>
/// Cancel button
/// </summary>
private void CancelButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
}
/// <summary>
/// Browse button
/// </summary>
private void BrowseButton_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
// Limit the dialog to only show ".csv" files,
// modify this as necessary to allow other file types
openFileDialog.Filter = "pdf files (*.pdf)|*.pdf";
openFileDialog.FilterIndex = 1;
if (openFileDialog.ShowDialog() == true)
{
this.FileTextBox.Text = openFileDialog.File.Name;
this.FileTextBox.IsReadOnly = true;
System.IO.FileStream myStream = openFileDialog.File.OpenRead();
documentStream = myStream;
}
}
}
}
Now we can return to the PdfDocsListDetail screen to write some screen code.
Writing the Screen Code
Now that we have a child window to call, we can call it from the “Load Pdf” button we created earlier in this post. Let’s switch back to logical view and open the PdfDocsListDetail screen in the solution explorer. Click on the “Write Code” button at the top of the screen and let’s write some code. The screen code should look like the following.
using System;
using System.Linq;
using System.IO;
using System.IO.IsolatedStorage;
using System.Collections.Generic;
using Microsoft.LightSwitch;
using Microsoft.LightSwitch.Framework.Client;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Presentation.Extensions;
using Microsoft.LightSwitch.Threading;
using LightSwitchApplication.UserCode;
namespace LightSwitchApplication
{
public partial class PdfDocsListDetail
{
partial void LoadPdf_Execute()
{
Dispatchers.Main.BeginInvoke(() =>
{
SelectFileWindow selectFileWindow = new SelectFileWindow();
selectFileWindow.Closed += new EventHandler(selectFileWindow_Closed);
selectFileWindow.Show();
});
}
void selectFileWindow_Closed(object sender, EventArgs e)
{
SelectFileWindow selectFileWindow = (SelectFileWindow)sender;
// Continue if they hit the OK button AND they selected a file
if (selectFileWindow.DialogResult == true && (selectFileWindow.DocumentStream != null))
{
using (FileStream fs = selectFileWindow.DocumentStream)
{
byte[] buf = new byte[fs.Length];
fs.Read(buf, 0, buf.Length);
if (PdfDocs.Count <= 0 && PdfDocs.CanAddNew)
PdfDocs.AddNew();
if (PdfDocs.Count > 0)
{
PdfDocs.SelectedItem.Document = buf;
}
}
}
}
}
}
Once we have this code in place, we can do a “Rebuild All” and try to run the application. When you start up the application, you will see the following screen. 
Let’s add a Pdf to the table by clicking the plus button and filling in the caption field in the popup. 
Once you click OK, highlight the entry in the list portion of the screen that you just created and click the “Load Pdf” button. 
This will call the Silverlight child window where you can browse to your Pdf. Click the “Browse” button to open the native OpenFileDialog and navigate to your pdf document. 
Once you locate your pdf, click the “Open” button to load the document stream into the Silverlight child window. 
Once you locate your pdf, click the “Open” button to load the document stream into the Silverlight child window. 
Summary
You should be able to utilize this method throughout your entire application, and not only with the C1PdfViewer making it a very versatile post for each individual.
Sample and Download Links
Sample: [url]http://bit.ly/WNr820[/url] Studio for LightSwitch: [url]http://bit.ly/WNre9Q[/url]
MESCIUS inc.