используя гладкую загрузку с mvc 2 и jquery / ajax

Question

Я пытаюсь получить гладкую загрузку, работающую в диалоге пользовательского интерфейса jquery.У меня получилось, что файл загружается просто отлично, и я проверил образцы, и все они в итоге перезагружают всю страницу.Мне удалось сделать так, чтобы он не делал окончательный постбэк для обработки файлов после его загрузки, установив AutoPostBackAfterUpload="false"

, так что теперь он помещает файлы на сервер со случайным руководствомназвание.и он получает ответ, который выглядит следующим образом:

{
state : "Complete",
reason : "NotTerminated",
percentComplete : 100.00,
percentCompleteText : "100.00 %",
contentLengthText : "826 KB",
transferredLengthText : "826 KB",
remainingLengthText : "0 bytes",
currentFileName : "Desert.jpg",
currentFileIndex : "1",
timeElapsedText : "1 second",
timeElapsedShortText : "00:01",
timeRemainingText : "",
timeRemainingShortText : "00:00",speedText : "596 KB/sec"
}

, поэтому мне нужно знать следующее: как я могу ajaxly публиковать, что автоматическая загрузка выполняется автоматически, когда для AutoPostBackAfterUpload установлено значение true.

вот мой код: <% Html.BeginForm ("OrganizationMemberEditContactSectionChangePhoto", "OrganizationMember", FormMethod.Post, новый с {.id = "uploadForm", .enctype = "multipart / form-data"})%>

    <kw:SlickUpload ID="SlickUpload1" runat="server" AutoPostBackAfterUpload="false"  UploadFormId="uploadForm" ShowDuringUploadElements="cancelButton" HideDuringUploadElements="uploadButton" MaxFiles="1" AutoUploadOnPostBack="false" ProgressInterval="200">
        <DownlevelSelectorTemplate>
            <input type="file" />
        </DownlevelSelectorTemplate>
        <UplevelSelectorTemplate>
            <input type="button" value="Add File" />
        </UplevelSelectorTemplate>
        <FileTemplate>
            <kw:FileListRemoveLink runat="server">[x] remove</kw:FileListRemoveLink>
            <kw:FileListFileName runat="server" />
            <kw:FileListValidationMessage runat="server" ForeColor="Red" />
        </FileTemplate>
        <ProgressTemplate>
            <table width="99%">
                <tr>
                    <td>
                        Uploading <kw:UploadProgressElement ID="UploadProgressElement1" runat="server" Element="FileCountText" />,
                        <kw:UploadProgressElement ID="UploadProgressElement2" runat="server" Element="ContentLengthText">(calculating)</kw:UploadProgressElement>.
                    </td>
                </tr>
                <tr>
                    <td>
                        Currently uploading:
                        <kw:UploadProgressElement ID="UploadProgressElement3" runat="server" Element="CurrentFileName" />,
                        file <kw:UploadProgressElement ID="UploadProgressElement4" runat="server" Element="CurrentFileIndex">&nbsp;</kw:UploadProgressElement>
                        of
                        <kw:UploadProgressElement ID="UploadProgressElement5" runat="server" Element="FileCount" />.
                    </td>
                </tr>
                <tr>
                    <td>
                        Speed:
                        <kw:UploadProgressElement ID="UploadProgressElement6" runat="server" Element="SpeedText">(calculating)</kw:UploadProgressElement>.
                    </td>
                </tr>
                <tr>
                    <td>
                        About
                        <kw:UploadProgressElement ID="UploadProgressElement7" runat="server" Element="TimeRemainingText">(calculating)</kw:UploadProgressElement> remaining.
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="border: 1px solid #008800; height: 1.5em; position: relative">
                            <kw:UploadProgressBarElement ID="UploadProgressBarElement1" runat="server" Style="background-color: #00ee00; width: 0; height: 1.5em" />
                            <div style="text-align: center; position: absolute; top: .15em; width: 100%">
                                <kw:UploadProgressElement ID="UploadProgressElement8" runat="server" Element="PercentCompleteText">(calculating)</kw:UploadProgressElement>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </ProgressTemplate>
    </kw:SlickUpload>
    <p>
        <input type="button" value="Upload" id="uploadButton" />
        <a href="javascript:kw.get('<%=SlickUpload1.ClientID %>').cancel()" id="cancelButton" style="display:none">Cancel</a>
    </p>            
<%Html.EndForm()%>
<script type="text/javascript">
    var theThing;
    var urlToPost = "theUrlThatHandlesThePostBack";
    function v2SetUpPhotoDialog() {

        theThing = kw.get("<%=SlickUpload1.ClientID %>");
        theThing.add_OnUploadEnded(function (status) {
            var data = $('#uploadForm').serialize();
            $.ajax({
                type: 'POST',
                url: urlToPost,
                data: data,
                success: function () {
                    v2RegularNotice('success');
                },
                error: function () {
                    v2RegularNotice('fail');
                }
            });
        });

        $('#uploadButton').live('click', function () {
            theThing = kw.get("<%=SlickUpload1.ClientID %>");
            theThing.submit();
            return false;
            //  kw.get("<%=SlickUpload1.ClientID %>").submit();
        });
    }
</script>

Как вы можете видеть, я пытался заставить OnUploadEnded принимать статус в качестве параметра, но он не заполняет его какой-либо полезной информацией, необходимой параметру status для действия.В настоящее время он сериализует форму и отправляет ее, но заполняет только 1 поле.kw_uploadId.

действие контроллера еще ничего не делает, оно просто пытается принять UploadStatus в качестве параметра.но это пусто, если я просто сериализовать форму.

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

спасибо!

Answer 1

После работы с Патрикой эта проблема была решена.Мы столкнулись с еще несколькими препятствиями, но основные принципы заключаются в следующем:

Главное здесь - ограничение в дизайне SlickUpload: вы не можете удалить элемент управления SlickUpload из DOM, как только он будет добавлен, изатем прочитал это снова позже.Это будет решено в SlickUpload6, но, к сожалению, это ограничение текущей версии.Чтобы решить эту проблему, мы скрыли элемент управления, когда вкладка или диалоговое окно были невидимы, вместо того, чтобы фактически удалить его.

Существует также выпуск вспомогательной версии SlickUpload (5.5.9), который добавляет метод get_UploadId (), чтобыупростить получение идентификатора загрузки для текущей загрузки.

Этот код (сверху):

kw_uploadId: document.getElementById("kw_uploadId").value,

становится:

kw_uploadId: theThing.get_UploadId(),

Вы можете получить последнюю версиюздесь: SlickUpload 5.5.9

Answer 2

Ну, это было намного проще, чем я ожидал.вот что у меня есть, и это работает:

 function v2SetUpPhotoDialog() {

        theThing = kw.get("<%=SlickUpload1.ClientID %>");
        theThing.add_OnUploadEnded(function (data) {
            var data = {
                kw_uploadId: document.getElementById("kw_uploadId").value,
                kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"),
                id: $('#Id').val()
            };

            $.ajax({
                type: 'POST',
                url: urlToPost,
                data: data,
                success: function (result) {
                    alert(result.Message);

                },
                error: function () {
                    v2RegularNotice('fail');
                }
            });
        });

        $('#uploadButton').live('click', function () {
            theThing = kw.get("<%=SlickUpload1.ClientID %>");
            v2RegularNotice('click me');
            theThing.submit();

        });
    }

это в сочетании с пользовательским механизмом связывания моделей, найденным здесь: http://krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net-mvc-uploadstatus-controller-action-method.aspx

позволяет вам иметь действие контроллера, подобное этому:

public function ChangePhoto(byval status as UploadStatus, byval id as integer) as actionresult

и статус правильно заполнен.

так что, в основном, нужно просто:

kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"),

эта часть добавлена.

нить поддержки можно найти здесь: http://krystalware.com/forums/yaf_postsm5128_aspnet-mvc-ajax-upload-without-update-panel.aspx#post5128

Answer 3

Я ненавижу iframes, но я думаю, что это самый простой путь, чтобы пойти сюда.

В качестве альтернативы, вы можете использовать плагин формы jQuery http://malsup.com/jquery/form/

$('#YOURFORM').ajaxForm({target:'#YOURFORM'}); //replace form with result HTML