utilizando la carga resbaladiza con mvc 2 y jquery/ajax

Question

estoy tratando de conseguir una carga resbaladiza trabajando dentro de un diálogo de jQuery ui. Lo tengo subiendo el archivo muy bien, y he comprobado las muestras, y todas terminan con la página completa de nueva carga. Me las arreglé para que no sea la devolución de datos final para tratar con los archivos después de que se carguen configurando AutoPostBackAfterUpload="false"

por lo que ahora coloca los archivos en el servidor, con el nombre de guía aleatorio. y obtener de una respuesta que tiene este aspecto:

{ 
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" 
} 

Así que lo que necesito saber es: ¿Cómo ajaxly Publica lo hace automáticamente carga resbaladiza cuando se tiene la AutoPostBackAfterUpload establece en true.

aquí es mi código: <% Html.BeginForm ("OrganizationMemberEditContactSectionChangePhoto", "OrganizationMember", FormMethod.Post, nuevo con el {.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> 

como se puede ver, he intentado tener la OnUploadEnded tomar el estado como un parámetro, pero no llenarlo con cualquiera de la información útil que el parámetro de estado para la acción necesita. Actualmente serializa el formulario y lo envía, pero solo rellena 1 campo. kw_uploadId.

la acción del controlador no hace nada aún, solo intenta tomar un UploadStatus como parámetro. pero está vacío si solo serializo el formulario.

estoy seguro de que me falta algo obvio. pero no puedo resolverlo. La documentación me resulta un tanto difícil de seguir y no es útil en este caso.

gracias!

Answer 1

Después de trabajar con Patrica, este problema ha sido resuelto.Nos topamos con un par de inconvenientes más, pero los conceptos básicos son los siguientes:

Lo principal en el trabajo aquí es una limitación en el diseño de SlickUpload: no se puede eliminar un control SlickUpload del DOM una vez que se ha agregado y luego readd de nuevo más tarde. Esto se resolverá en SlickUpload6, pero desafortunadamente es una limitación con la versión actual. Para resolver esto, ocultamos el control cuando la pestaña o el diálogo era invisible, en lugar de eliminarlo.

También hay una versión de versión secundaria SlickUpload (5.5.9) que agrega un método get_UploadId(), para facilitar la obtención del ID de carga para la carga actual.

Este código (de arriba):

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

se convierte en:

kw_uploadId: theThing.get_UploadId(), 

, usted puede obtener la versión más reciente aquí: SlickUpload 5.5.9

Answer 2

Odio los iframes, pero creo que es la ruta más fácil para ir aquí.

Como alternativa, puede usar jQuery plugin de forma http://malsup.com/jquery/form/

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

Answer 3

Bueno, en realidad era mucho más simple de lo que esperaba. esto es lo que tengo y funciona:

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(); 

     }); 
    } 

esto combinado con el aglutinante modelo personalizado encontrar aquí: http: //krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net -mvc-uploadstatus-controlador-acción-method.aspx

le permite tener una acción de controlador de esta manera:

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

y el estado está adecuadamente pobladas.

lo que, básicamente, sólo es necesario tener:

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

esa parte añadió.

hilo de soporte se puede encontrar aquí: http://krystalware.com/forums/yaf_postsm5128_aspnet-mvc-ajax-upload-without-update-panel.aspx#post5128