Using Silverlight Upload control with ASP.NET MVC

Friday, January 15, 2010 by Valentin Stoychev | Comments 5
?
Email to a friend

[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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
               
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        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 :).

 

?
Email to a friend
Posted in: silverlight 4 Silverlight ASP.NET MVC

5 Comments

  • Hani 29 Apr
    Hi,
    Is there any possibility to post a sample with the Chart and Grid controls as well?

    Thanks for your help.
  • Valentin Stoychev 30 Apr
    Hi Hani,

    you just need to add the Charting and the GridView controls to the Silverlight application, no need for anything else. Give it a try and if you hit a problem - drop us a line.
  • net file upload 30 Jan

    FileUltimate is an ASP.NET file upload control which you can add directly to your existing ASP.NET (.aspx) pages.The control renders a user interface similar to "Windows Explorer" within the page which displays the contents of the target folder and accepts multiple file uploads from users. Actions can be limited by permissions and quota limits on folders. During file uploading, detailed information such as transfer speed and estimated time of completion are displayed along with the progress bar. This ASP.NET upload control supports browser upload,

    ajax upload and flash upload modes.

    http://www.gleamtech.com/products/fileultimate/asp-net-file-manager-control
    net file upload
  • Craig 14 Apr
    Hi Valentin,

    I would like to delete the file after the last chunk has been saved by the raduploadhandler, but the Remove() method always returns false.  How can I make sure that the handler has disposed of write lock on the file so that I may delete it?  I understand that I could call another method from the Radupload control  - Upload_Complete, but I would rather not have to recreate the logic that is already in place on the handler.


    Thanks!
  • Alex Fidanov 15 Apr
    Hello Craig,

    The file stream is being safely closed and disposed of in the SaveChunkData method. You should be able to get a lock on the file after the base implementation. Moreover, the RadUpload should send a ParamNameMessage back to the client reporting the error. What kind of error are you getting?

Add comment

  1. Formatting options
       
     
    		 
    		 
     
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by Valentin Stoychev - or - read latest articles in Developer Tools
RSS Feed
Bloggers Archive Tags