Question

我在Web应用程序.cshtml文件中正常运行此代码。但是，我需要能够将其转换为.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>
}

Answer 1

确定。我采取了不同的方法，而不是与此作斗争并试图让它在DotNetNuke中运作。

这背后的最终目标是在DNN中使用异步文件上传功能，以便用户在上传文件时获得某种反馈。这些是相当大的文件--50-200mb - 并且没有反馈，特别是在较慢的链接上，用户不知道发生了什么。

所以，我做的是......

在我的DNN服务器上，我在dnn网站*之外添加了一个新网站* - 例如upload.mydomain.com - 并创建了一个指向我的MVC的IIS应用程序。该应用程序只提供异步文件上传。它作为一个独立的工作很好，所以步骤2。

我必须将它整合到DNN中。所以，我在upload.mydomain.com中创建了一个虚拟目录，指向我的DNN门户文件夹，用户将文件上传到自己的门户网站。

我创建了一个名为MyUpload的DNN模块，在该模块的view.ascx中，我输入了一个指向我的上传应用程序URL的iframe。

在上传应用程序视图页面的脚本中（显示在我的问题中），我添加了几个parent.PostMessage函数 - 一个在下载过程中，另一个在下载完成时。

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

- 模块监听器 -

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

如何将其转换为.ascx页面？

1 个答案: