Update only partial view when submit button for file upload is clicked

Question

I have a partial view that allows users to submit files.

<form action="Attachments" method="post" enctype="multipart/form-data" target="_self">
    <div>
        <label style="text-align: left;">Add File:</label>
    </div>
    <div>
        <input type="file" name="file" id="file" style="width: 275px;" />
    </div>
    <div style="text-align: right;">
        <input type="submit" value="Add"/>
    </div>
</form>

This calls the AttachmentsController method for HTTPPost

[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{

    if (file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine("C:\\Attachments", fileName);
        file.SaveAs(path);

        return AddAttachment(fileName);
    }

    return RedirectToAction("Failed", "Attachments");
}

The addAttachment returns "return RedirectToAction("Index", "Attachments");" After all this is done to add the attachment the whole screen is refreshed and I want only the partial view for adding attachments refreshed. How can I accomplish this!?

Answer 1

You should post your file by ajax request. And when server returns response, update only necessary page parts.

There is a nice form plugin that allows you to send an HTML form asynchroniously http://malsup.com/jquery/form/ .

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

or

$("someButton").click(function(){
    $('#myForm1').ajaxSubmit();
});