2016-10-10 71 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>