[Download the complete final project]

We got a customer inquiry today about how to integrate the Telerik Silverlight Upload control within an ASP.NET MVC site. This is quite an interesting scenario, especially with the new Drag and Drop from the file system coming with our Silverlight 4 release in the mid-March.

I was not sure what should be done to run the SL upload in the MVC site. This was my first time experience with ASP.NET MVC 2 and it turned out to be a very pleasant and easy one. These are the steps that need to be followed:

1. Create an ASP.NET MVC site:

2. Create a new Silverlight application and associate it with the MVC project. Uncheck the option to create a new test page for the Silverlight application. We need to keep everything clean and simple. This is an ASP.NET MVC application after all :)

Add Silverlight Application to the MVC site

3. Copy the RadUpload handler (RadUploadHandler.ashx) from the RadControls for Silverlight distribution to the root folder of the ASP.NET MVC application.

4. Add a reference to the Telerik.Windows.Controls.RadUploadHandler.dll. I copied the dll in the bin folder and added the reference.

5. Add the RadUpload control to the Silverlight application and configure the Silverlight application to use the correct handler. Here is the sample code:

<UserControl x:Class="SilverlightApplication1.MainPage"
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
               
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        d:DesignWidth="640" d:DesignHeight="480">
  
    <Grid x:Name="LayoutRoot" Height="300" VerticalAlignment="Top">
        <telerikInput:RadUpload UploadServiceUrl="RadUploadHandler.ashx"></telerikInput:RadUpload>
    </Grid>
  
  
</UserControl>

 

 6. Declare the SL object in the ASP.NET MVC home page. In "/Views/Home/Index.aspx" page add the following code to render the SL application:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320">
          <param name="source" value="ClientBin/SilverlightApplication1.xap"/>
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.41108.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.41108.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object>

 

 At this point your solution should have the following structure:

 

Now run your project and you should see the Silverlight Upload nicely working within the ASP.NET MVC site:

 Silverlight Upload with ASP.NET MVC

That's it - super easy and straightforward. Next step - take a look at our Silverlight and ASP.NET MVC controls :).


About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Related Posts

Comments

Comments are disabled in preview mode.