2016-10-10 14 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)で、フィードバックがなく、特に遅いリンクでは、ユーザーは何が起こっているのか分からなかった。例えばupload.mydomain.com、 - -

だから、私がやったことだった...私DNNサーバーで

、私は* DNNサイト*の外に新しいサイトを追加し、IISを作成しましたアプリケーションは私のMVCを指しています。アプリケーションは単に非同期ファイルアップロードを提供します。それはステップ2のスタンドアロンとして非常に役立ちます。

私はそれをDNNに統合する必要がありました。そこで、upload.mydomain.comの仮想ディレクトリを作成して、自分のポータルに自分のファイルをアップロードするDNNポータルフォルダを指定しました。

私はMyUploadというDNNモジュールを作成しました。そのモジュールのview.ascxにアップロードアプリケーションのURLを示すiframeを入れました。

私の質問に示されているアップロードアプリケーションビューページのスクリプトで、parent.PostMessage関数をいくつか追加しました.1つはダウンロードが進行中で、もう1つはダウンロードが終了したときです。

DNNモジュール側では、iframe投稿メッセージを監視するリスナーを作成します。

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> 
関連する問題