Загрузка файла с плагином jquery form и mvc 3 не заполняет целевое свойство с моим частичным просмотром - PullRequest
Новая
       6

Загрузка файла с плагином jquery form и mvc 3 не заполняет целевое свойство с моим частичным просмотром

1 голос
/ 30 ноября 2011

Я пытаюсь настроить простую загрузку файлов / изображений для веб-приложения, над которым я работаю. Чтобы помочь, я использую плагин jquery form, найденный здесь: http://jquery.malsup.com/form/

Из примеров видно, что вы определяете, куда вы хотите поместить возвращаемые данные, определяя свойство "target".

Таким образом, проблема в том, что вместо рендеринга частичного внутри определенного «целевого» местоположения весь мой браузер «отправляет обратно», и меня перенаправляют на страницу с отдельными частями. 

    public PartialViewResult BackgroundImageWindow()
    {
        return PartialView();
    }

BackgroundImageWindow.cshtml 

<div class="divBGImageLoader">


    <form id="FileUploadForm" action='@Url.Action("FileUpload", "SlideShow")' method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input id="UploadFileButton" type="submit" value="Upload" />
    </form>


    <div id="BGImageTable">
        @{Html.RenderAction("BackgroundImageWindowTable");}
    </div>


</div>

Что идет сюда: 

    public PartialViewResult BackgroundImageWindowTable()
    {

        DirectoryInfo di = new DirectoryInfo(Server.MapPath("~/Content/uploads"));
        List<FileInfo> files = di.GetFiles().ToList();

        return PartialView(files); // returns a partial with a table of the uploaded files
    }

JavaScript: 

    $("#UploadFileButton").live("submit", function(e){
        e.preventDefault(); // <- doc file said it needed this
        e.stopImmediatePropagation(); // <- uuh just in case 

        var ajaxSubmitOptions = {
            target: $("#BGImageTable"),
            beforeSubmit: function () {
                //$("#loading").show();
            },
            success: function (data) {
                //$("#loading").hide();
            }
        };

        $(this).ajaxSubmit(ajaxSubmitOptions);

        return false; //<- documentation said this was necessary to stop the 'post back'
    });

FileUpload Part: 

public ActionResult FileUpload(HttpPostedFileBase file)
{
    // Verify that the user selected a file
    if (file != null && file.ContentLength > 0)
    {
        // extract only the fielname
        var fileName = Path.GetFileName(file.FileName);
        // store the file inside ~/App_Data/uploads folder
        var path = Path.Combine(Server.MapPath("~/Content/uploads"), fileName);
        file.SaveAs(path);
    }
    // redirect back to the index action to show the form once again

    return RedirectToAction("BackgroundImageWindowTable");
}

Итак, как я уже говорил ранее, похоже, что это работает, за исключением того факта, что частичное изображение отображается и отображается так, как если бы это была отдельная страница.

1 Ответ

1 голос
/ 30 ноября 2011

Вы должны подключиться к событию form submit вместо UploadFileButton. Так же, как это 

$("#FileUploadForm").live("submit", function(e){
    // do your stuff here
}
...