KendoUpload Widget doppelte Ausgabe

Question

Ich habe ein KendoUpload Widget in einem modalen Fenster Problem - wenn Sie das Fenster schließen und öffnen Sie es wieder KendoUpload Widget, als wenn mehrere Instanzen von einigen seiner Teil macht. Dadurch werden so viele Datensätze und Uploads erstellt, wie Sie das Fenster öffnen und schließen. Was kann das Problem verursachen? Ich habe versucht, das KendoUpload-Widget jedes Mal zu zerstören, wenn das Fenster geschlossen wird, aber kein Glück. Vielleicht wegen der falschen Syntax ... Irgendwelche Ideen? DANKE!

Jetzt schließe ich und das modale Fenster wieder öffnen ->

Jetzt habe ich versuchen, eine Datei zu laden ->

HTML:

<div id="UploadFiles" style="display: none"> 
<h3>Upload your files:</h3> 
<div class="demo-section k-content"> 
    <input name="files" id="files" type="file"/> 
</div> 
<br/> 
<h3>Current files on server:</h3> 
<div id="CurrentFilesOnServer"> 
    <ul class="CurrentFilesOnServerList"> 

    </ul> 
</div> 

Modal Fenster:

// Modal Window Upload file to server 
    var uploadFilesWindow = $("#UploadFiles").kendoWindow({ 
     width: "350px", 
     modal: true, 
     title: "Upload file to server:", 
     actions: [ 
      "Pin", 
      "Minimize", 
      "Maximize", 
      "Close" 
     ], 
     close: function() { 

     } 
    }).data("kendoWindow"); 

JS Abschnitt Upload:

// upload file on server 
    $(".k-grid-upload") 
     .click(function() { 
      uploadFilesWindow.center().open(); 

      function upload() { 

     $("#files") 
       .kendoUpload({ 
        async: { 
         saveUrl: "/api/Grid/UploadFileOnServer", 
         removeUrl: "", 
         autoUpload: true 
        } 
      } 
     }); 
}); 

C# Controller:

// Upload file on server 

    public string UploadFileOnServer() 
    { 

     var file = HttpContext.Current.Request.Files.Count > 0 ? 
    HttpContext.Current.Request.Files[0] : null; 

     if (file != null && file.ContentLength > 0) 
     { 
      var fileName = Path.GetFileName(file.FileName); 

      var path = Path.Combine(
       HttpContext.Current.Server.MapPath("~/uploads"), 
       fileName 
      ); 

      file.SaveAs(path); 
     } 

     return file != null ? "/uploads/" + file.FileName : null; 


    } 

Answer 1

Es ist ziemlich sicher, dass der Code, der das Hochladen Widget initialisiert, wird mehrere Male ausgeführt, was die Initialisierung und das beobachtete Problem zu duplizieren.

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

einen Kendo UI-Widget Destroying nicht die erzeugte HTML-Markup aus dem DOM entfernen (die einzige Ausnahme ist das Fenster), so dass das Hochladen zu zerstören wird nicht helfen.

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

Sie müssen den Code Refactoring, so dass der Upload nur einmal initialisiert wird, ebenso wie die Fenster. Alternativ können Sie das gesamte Fenster zerstören und neu erstellen, aber denken Sie daran, dass sein DOM entfernt wird und Sie es wieder hinzufügen müssen.

http://docs.telerik.com/kendo-ui/controls/layout/window/overview#configuration-Destroy

Answer 2

den Code wie folgt geändert und es funktioniert jetzt korrekt:

initialisieren kendoUpload:

var kup = $("#files") 
     .kendoUpload({ 
      async: { 
       saveUrl: "/api/Grid/UploadFileOnServer", 
       removeUrl: "", 
       autoUpload: true 
      } 
     }); 

Fenster öffnen & Anruf-Instanz kendoUpload:

$(".k-grid-upload") 
     .click(function() { 
      uploadFilesWindow.center().open(); 
      kup(); 
     }); 

(Thx zu @dimodi!)