Ajax.BeginForm PartialView не обновляется

Question

Я использую asp.net mvc 4. Я искал много других подобных вопросов здесь, но они не помогли.

Я хочу обновить свой частичный вид - FileList после загрузки файла. Вместо этого я вижу теперь перенаправление на страницу с обновленным списком файлов, но я хочу обновить этот список на частичном представлении. :(. Может ли кто-нибудь помочь? Возможны другие решения для выполнения подобных функций :)

Мой неполный просмотр находится в другом (индексном) частичном представлении.

Вот 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"); 
} 

и здесь 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> 

и вот мой FileList.cshtml

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

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

Answer 1

Ваша форма Ajax не работает, вероятно, потому, что вы не включили jquery.unobtrusive-ajax.js на страницу, и в результате он работает как обычный h tml.

Как только вы добавите этот файл, вы сможете обновить его с помощью ajax, но filesToUpload будет null в контроллере. Причиной этого является невозможность загрузки файлов через ajax, поскольку он не поддерживает multipart/form-data enctype.

Вы можете попытаться использовать некоторые плагины загрузки jQuery ot HTML 5 File API.

Answer 2

Используйте этот плагин http://malsup.com/jquery/form/, и это будет отправлять форму без обновления. Когда вы загрузите файл на сервер, вы можете сделать обратный вызов для успеха загрузки.

Получите список файлов с сервера как render как html (через partialresult) и обновите их в браузере на стороне клиента.