Ajax.BeginForm PartialView不刷新

Question

I am using asp.net mvc 4. I've searched many other similar questions here, but they didn't help.

I want to refresh my partial view - FileList after uploading file. Instead I see now redirecting to page with updated file list, but i want to refresh this list in partial view. :(. Can anybody help? Another solutions to do similar features are acceptable :)

My partial view is in another (index) partial view.

Here is FileController:

private static int folderId = 0;

public ActionResult Index(int id)
{
    folderId = id;
    this.GetFiles();
    return PartialView();
}

public PartialViewResult FileList()
{
    this.GetFiles();
    return PartialView("FileList");
}

[HttpPost]
[ValidateAntiForgeryToken]
public PartialViewResult UploadFiles(IEnumerable<HttpPostedFileBase> filesToUpload)
{
        this.UploadFilesToBase(filesToUpload, 1);

    this.GetFiles();

    return PartialView("FileList");
}

and here is Index.cshtml

 <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/main.js")" type="text/javascript"></script>

 <script src="http://malsup.github.com/jquery.form.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

@using (Ajax.BeginForm("UploadFiles", "File", null, new AjaxOptions { HttpMethod =             "POST", UpdateTargetId = "FilesListDiv", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data" }))
{
   <div class="btn-upload-file">
      @Html.AntiForgeryToken()
      <span class="btn"><span>Upload file</span></span>
      <input type="file" class="file" name="filesToUpload" multiple    onchange="javascript:this.form.submit();"><br>
    </div>

 }

<div id="FilesListDiv">
   @*@Html.Action("FileList", "File")*@    
   @Html.Partial("~/Views/File/FileList.cshtml")
</div>

and here is my FileList.cshtml

 @{
    Layout = null;
    ViewBag.Title = "Files";
 }

 @foreach (MyProj.Web.DataContracts.File file in ViewBag.Files)
 {         
    file.Name
 }

Answer 1

Your ajax form doesn't work, probably because you haven't included jquery.unobtrusive-ajax.js into the page and as a result, it works like a regular html form.

As soon as you add this file, you will be able to refresh the content via ajax, but filesToUpload will be null in the controller. The reason for that is impossibility of uploading files via ajax, because it does not support multipart/form-data enctype.

You can try to use some jQuery upload plugins ot HTML 5 File API .

Answer 2

Use this plugin http://malsup.com/jquery/form/ and this will submit form without the refresh. When you got the file uploaded on server then you can make a callback on the success of upload.

Get the list of file from server as render as html (through partialresult) and update them on client side browser.