Wie konvertiere ich dies in eine .ascx-Seite?

Question

Ich habe diesen Code in einer Webanwendung .cshtml-Datei in Ordnung. Allerdings muss ich dies in eine .ascx-Datei konvertieren können.

Es sind die @ using Ausdrücke und die ajax.beginform, die mir die Probleme verursachen.

Vielen Dank.

@{ 
    ViewBag.Title = "Async File Upload"; 
} 

<h2>Async File Upload</h2> 

@using (Ajax.BeginForm("AsyncUpload", "dnndev.me/fileupload/Upload", new AjaxOptions() { HttpMethod = "POST" }, new { enctype="multipart/form-data"})) 
{ 
    @Html.AntiForgeryToken() 
    <input type="file" name="files" id="fu1"/> 
    <input type="submit" value="Upload File" /> 

} 

<div class="progress"> 
    <div class="progress-bar">0%</div> 
</div> 
<div id="status"></div> 
<style> 
    .progress { 
     position:relative; 
     width:400px; 
     border:1px solid #ddd; 
     padding:1px; 
    } 
    .progress-bar { 
     width:0px; 
     height:20px; 
     background-color:#57be65; 
    } 
</style> 
@section scripts{ 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script> 
     (function() { 
      var bar = $('.progress-bar'); 
      var percent = $('.progress-bar'); 
      var status = $('#status'); 

      $('form').ajaxForm({ 
       beforeSend: function() { 
        status.empty(); 
        var percentValue = '0%'; 
        bar.width(percentValue); 
        percent.html(percentValue); 
       }, 
       uploadProgress: function (event, position, total, percentComplete) { 
        var percentValue = percentComplete + '%'; 
        bar.width(percentValue); 
        percent.html(percentValue); 
       }, 
       success: function (d) { 
        var percentValue = '100%'; 
        bar.width(percentValue); 
        percent.html(percentValue); 
        $('#fu1').val(''); 
        alert(d); 
       }, 
       complete: function (xhr) { 
        status.html(xhr.responseText); 
       } 
      }); 
     })(); 
    </script> 
} 

Answer 1

Ok. Anstatt dies zu bekämpfen und es in DotNetNuke zum Laufen zu bringen, ging ich einen anderen Weg.

Das ultimative Ziel war, eine asynchrone Datei-Upload-Funktion in DNN zu haben, so dass der Benutzer eine Art von Feedback erhielt, während eine Datei hochgeladen wurde. Das sind ziemlich große Dateien - 50-200mb - und ohne Feedback, besonders auf einer langsameren Verbindung, wusste der Benutzer nicht, was vor sich ging.

Also, was ich tat, war ...

Auf meinem DNN-Server, habe ich eine neue Website * außerhalb der DNN-Website * - upload.mydomain.com, zum Beispiel - und erstellt ein IIS Anwendung zeigt auf meine MVC. Die Anwendung bietet einfach asynchrone Datei-Uploads. Es funktioniert gut als Standalone so auf Schritt 2.

Ich musste es in DNN integrieren. Also habe ich ein virtuelles Verzeichnis in upload.mydomain.com erstellt, das auf meinen DNN Portals Ordner zeigt, wo die Benutzer ihre Dateien in ihre eigenen Portale hochladen.

Ich habe ein DNN-Modul mit dem Namen MyUpload erstellt und in der view.ascx dieses Moduls habe ich einen iframe eingefügt, der auf meine Upload-Anwendungs-URL zeigt.

Im Skript auf der Upload-Anwendungsansichtsseite (in meiner Frage gezeigt) habe ich ein paar parent.PostMessage-Funktionen hinzugefügt - eine, wenn der Download läuft und eine, wenn der Download beendet ist.

Auf der DNN-Modulseite schreibe ich einen Listener, der die Iframe-Post-Nachrichten überwacht.

Wenn der Benutzer auf die Upload-Schaltfläche im Iframe (die MVC-Upload-App) klickt, erhält der Listener im Modul eine "Status" -Antwort und führt eine Reihe von Dingen aus. Der Upload startet und der Fortschrittsbalken wird angezeigt, damit der Benutzer Feedback erhält. Wenn der Upload abgeschlossen ist und die Datei in das entsprechende Portal und den entsprechenden Ordner hochgeladen wurde (die MVC-App für die Übertragung hat aufgrund des virtuellen Verzeichnisses Zugriff auf den DNN-Portalenordner und den Unterordner), sendet der MVC eine Nachricht mit dem Status "Erfolg" an den übergeordneten Server zurück ".

Der Elternteil erhält diese Nachricht und geht von dort weiter, wobei die hochgeladene Datei in der entsprechenden Weise verarbeitet wird.

Das ist im Wesentlichen es.

- MVC-Skript -

@section scripts{ 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
    function parentExists() { 
     return (parent.location == window.location) ? false : true; 
    } 
    (function() { 
     var bar = $('.progress-bar'); 
     var percent = $('.progress-bar'); 
     var status = $('#status'); 
     var running = false; 

     $('form').ajaxForm({ 
      beforeSend: function() { 
       status.empty(); 
       var percentValue = '0%'; 
       bar.width(percentValue); 
       percent.html(percentValue); 
      }, 
      uploadProgress: function (event, position, total, percentComplete) { 
       if (running === false) { 
        running = true; 
        parent.postMessage("status|running","*"); 
       } 
       var percentValue = percentComplete + '%'; 
       bar.width(percentValue); 
       percent.html(percentValue); 
      }, 
      success: function (d) { 
       var percentValue = '100%'; 
       bar.width(percentValue); 
       percent.html(percentValue); 
       alert(d); 
       //alert($('#fu1').val()); 
       parent.postMessage("status|success|filename|" + $('#fu1').val(), "*"); 
       $('#fu1').val(''); 
      }, 
      complete: function (xhr) { 
       status.html(xhr.responseText); 
      } 
     }); 
    })(); 
</script> 
} 

--module Zuhörer -

<script type="text/javascript"> 
    handleStatusResponse = function (e) { 
     var response = e.data.split('|'); 
     var action = response[0]; 
     if (action === 'status') { 
      var status = response[1]; 
      if (status === "success") { 
       var filename = response[3].split('\\')[2]; 
       $('#hfFilename').val(filename); 
       $('#btnCreateAlbum').click(); 
      } 
      else if (status === "running") { 
       ShowProgress(); 
      } 
      else { 
       console.log("Unknown message: " + e.data); 
      } 
     } 
    } 
    addEventListener('message', handleStatusResponse, false); 
</script>