2016-10-10 68 views
0

我有這個代碼在web應用程序.cshtml文件中正常工作。但是,我需要能夠將其轉換爲.ascx文件。如何將其轉換爲.ascx頁面?

這是@using表情和被引起我的問​​題的ajax.beginform。

謝謝。

@{ 
    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> 
} 
+0

如果您使用剃刀語法,那麼你可以創建一個局部視圖(其中也有一個.cshtml語法)代替。除非你的意思是你想將這段代碼移植到使用WebForms視圖引擎的單獨應用程序中? – ADyson

+0

我想將此代碼移植到不使用剃鬚刀的現有dotnetnuke模塊。這是一個現有的.ascx頁面。 – Chris

+0

它甚至使用WebForms引擎或實際的舊式Web表單的MVC? – ADyson

回答

0

好的。我沒有去反對這個並試圖讓它在DotNetNuke中工作,而是採取了不同的方法。

這背後的最終目標是在DNN異步文件上傳功能,使用戶有某種的反饋,一個文件被上傳。這些都是相當大的文件 - 50-200mb - 並且沒有反饋,特別是在較慢的鏈接上,用戶不知道發生了什麼。

所以,我所做的是...

在我的DNN的服務器,我添加了一個新的網站* DNN的網站*之外 - upload.mydomain.com,例如 - 並創建了一個IIS指向我的MVC的應用程序。該應用程序只提供異步文件上傳。它作爲一個獨立的很好,所以步驟2.

我不得不將它整合到DNN。因此,我在upload.mydomain.com中創建了一個虛擬目錄,指向我的DNN門戶網站文件夾,用戶可以將其文件上傳到自己的門戶網站。

我創建了一個DNN模塊調用MyUpload並在該模塊的view.ascx,我把一個iframe指向我上傳的應用程序URL。

在上傳應用程序視圖頁面(在我的問題所示)的劇本,我增加了幾個功能parent.PostMessage - 一個在下載過程中,一個當下載完成。

在DNN模塊側,我編寫一個監視的IFRAME POST消息監聽器。

當用戶點擊在iframe上傳按鈕(MVC上傳應用程序),該模塊在聽者獲得一個「身份」響應,並做了幾件事情。上傳開始並顯示進度條,以便用戶獲得一些反饋。當上傳完成後,文件上傳到相應的門戶和文件夾(由於虛擬目錄,上傳MVC應用程序可以訪問DNN門戶文件夾和子文件夾),MVC將另一條消息發送回父項,狀態爲「成功」。

父母獲取該消息並從那裏繼續,以適當的方式處理上傳的文件。

這就是本質。

- MVC腳本 -

@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聽衆 -

<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>