Question

我试图在我的控制器中调用两个方法。一个启动转换，另一个返回转换百分比到视图以更新进度条。在调用getPercentage函数之前，通过单击“startConversion”按钮启动转换。但是，只有百分比函数不会开始转换。我已经尝试首先启动百分比功能并且它可以工作，但是在按下转换按钮后，setTimeout停止并且它不再更新。

是否有人建议可能出现的问题以及解决问题的方法？

//View
<script type="text/javascript" >
    $(window).load(function () {
        startConvert();
    });

    function startConvert() {
        document.getElementById("startConversion").click()
        getPercentage();
    }

    function getPercentage() {
            $.ajax(
            {
                type: "POST",
                url: "@Url.Action("GetPercentage","File")",
                success: function (result) {
                    $('#div').html(result);
                    var r = result;
                    progressBarSim(r);
                },
                error: function (req, status, error) {
                    alert("Fail");
                }
            });
        setTimeout(getPercentage, 500);
    }

</script>

<form action="" method="post" enctype="multipart/form-data">         
    <input id="startConversion" type="Submit"  name="Convert" />
</form>

//FileController
[HttpPost]
public double GetPercentage() {
    return enc.Percent;
}

[HttpPost]
public ActionResult Convert()
{
... //Removed
}

Answer 1

您提交的表单基本上会导致浏览器加载新页面（无论表单操作的结果是什么），这就是为什么似乎永远不会调用getPercentage（）方法。

最简单的方法是使用ajax提交表单，但似乎您希望用户上传文件，但无法通过ajax提交。

因此我建议将表单上的目标设置为页面上不可见的iframe。这将使表单提交给iframe（因此结果将加载到iframe中，而不会导致在主窗口中加载新页面。）

，例如：

  <iframe name="uploadTarget" src="" style="position:absolute;left:-9999px"></iframe>
  <form action="" method="post" enctype="multipart/form-data" target="uploadTarget">
  ... etc ...

如果您想跟踪实际上传的进度，那么您需要查看其他选项，例如使用http://blueimp.github.io/jQuery-File-Upload/

编辑：使用ajax提交表单：

function startConvert() {
    var form = $("#startConversion").closest("form");
    $.post(form.attr('action'), form.serializeArray());
    getPercentage();
}

Answer 2

为什么不尝试在setInterval(getPercentage, 500);方法本身内调用startConvert，而不是一次又一次调用setTimeout。

从脚本调用两个控制器方法

2 个答案: