ASP.NET control with MVC's Razor engine

Question

I'm using ASP.NET MVC 3 with the Razor template engine for my website. I currently allow files uploads like this:

<form action="/File/Upload" method="post" enctype="multipart/form-data">
    <label for="file">Upload a file:</label>
    <input type="file" name="file" id="file" /> 
    <input type="submit" name="submit" value="Submit" />
</form>

But would like to use a 3rd party control such as NeatUpload, which allows a progress bar, multi file selection, etc.

In the documentation, they show the control being used like this:

<%@ Register TagPrefix="Upload" Namespace="Brettle.Web.NeatUpload"
         Assembly="Brettle.Web.NeatUpload" %>
<Upload:InputFile id="inputFileId" runat="server" />

with some code-behind.

The Razor engine understandably doesn't like this syntax. Is there another way to use 3rd party controls with it, or am I out of luck?

Answer 1

Third party controls that work with Web Forms aren't really compatible with a pure MVC application. Having said that, you may be able to work with a hybrid type of solution, leveraging Web Forms in certain places and MVC in others. It's not something I would do personally, but you could.

See this post by Scott Hanselman which goes into some detail about doing just that.

Using a web forms control on a Razor page just won't work though.

Answer 2

Specifically for NeatUpload (which is amazing!) there is now the ability to get the uploading of very large files using javascript on a static HTML page. Clearly this will work just as well with MCV whatever view engine you use :)

http://www.brettle.com/NeatUpload-1.3/dotnet/docs/Manual.html#3.11.Using%20NeatUpload%20from%20JavaScript%7Coutline

So more general solution "ask the developer of the user control to update to an MCV compatible version"

Edit: I won't change the above but note that NeatUpload is now hosted http://neatupload.codeplex.com/ but maybe dead (why not pick it up if you have the developer skills and time!)

Answer 3

I just found that the MVCRecaptcha project that appears to be doing exactly this. I haven't had the time to dig through the internal details, but the essence is contained in two small files. For those of you too lazy to follow the above link, let me try to explain:

Basically, they create the control programmatically, then call RenderControl to dump the html on the wire:

var captchaControl = new RecaptchaControl { ... }
var htmlWriter = new HtmlTextWriter(new StringWriter());
captchaControl.RenderControl(htmlWriter);
return htmlWriter.InnerWriter.ToString();

On the response side, they then create an attribute that you can add to your MVC actions:

class CaptchaValidatorAttribute : ActionFilterAttribute {...}

This class that re-creates the control, and calls:

var recaptchaResponse = captchaValidtor.Validate();

// this will push the result value into a parameter in our Action
filterContext.ActionParameters["captchaValid"] = recaptchaResponse.IsValid;

Which means that your controller will have to look something like this:

[CaptchaValidator]
[AcceptVerbs( HttpVerbs.Post )]
public ActionResult CreateComment( Int32 id, bool captchaValid )
{
    if (!captchaValid)
    {
        ModelState.AddModelError("_FORM", "You did not type the verification word correctly. Please try again.");
    }
    // ...
}

Although the project is now obsolete, it shows how to use an ASP.Net control in an MVC application.

Answer 4

You can do this, assuming you just want a render of the control content and don't care about registering scripts or postbacks, etc.

Create your own HtmlTextWriter, write the output to it, and then render that string in your Razor. This is basically the idea from @VeeTheSecond, reduced to practice:

@{
    System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label()
    {
        Text = "Hello World!"
    };

    HtmlString renderedControl;

    using (StringWriter w = new StringWriter())
    {
        using (HtmlTextWriter htmlW = new HtmlTextWriter(w))
        {
            label.RenderControl(htmlW);

            renderedControl = new HtmlString(w.ToString());
        }
    }
}
<div>
    @renderedControl
</div>

Answer 5

The Razor view engine does not support WebForms controls. You will need to find a library that is specifically designed to work with MVC.

Answer 6

Try placing the control in a <form runat="server"> tag.