Transform MVC3 (Razor) form to Ajax form

Question

I have an MVC3 Razor form in index.cshtml using HtmlHelper. It works, but I want to replace it with Ajax form using AjaxHelper (note: I am still not familiar to Ajax/jQuery). It fails. My questions:

1. What's wrong with my code?
2. Are there any good websites that explain this kind of transformation?
3. If one transforms a view to Ajax processing, is it necessary to change the controller as well?

Here's my index.cshtml file. My trial with Ajax is commented out below the MVC3 form.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>

@using ( Html.BeginForm("UploadFile", "Home", FormMethod.Post, new
{
    enctype = "multipart/form-data"
}) )
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Select a file</legend>
        <input type="file" id="fileupload" name="fileuploadname" />
        <p>
            <input type="submit" value="Upload" id="upload" onclick="javascript:document.getElementById('upload').disabled=true; document.getElementById('upload').value='Uploading...'" />
        </p>
    </fieldset>
}

@* @using ( Ajax.BeginForm("UploadFile", "Home",
                new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST"
                }) )
{
    <input type="file" id="fileupload" name="fileuploadname" />
    <p>
        <input type="submit" value="Upload" id="upload" onclick="javascript:document.getElementById('upload').disabled=true; document.getElementById('upload').value='Uploading...'" />
    </p>
}
*@

Thx in advance.

Answer 1

You can't upload files using Ajax. At least not directly.

There are of course few plugins that help you with this, but they qork outside of AjaxHelper scope. This simply means you will have to get your hands dirty with jQuery which is also a good thing. It's a simple and small library and while getting acquainted with it you'll most likely deviate away from AjaxHelper and rather just use jQuery (with HtmlHelper).