Question

我需要进行文件下载，在文件处理期间显示加载图标（因为我不知道要花多长时间），我决定使用iframe，代码运行正常但是问题是文件下载对话框没有显示。

我已经在IE，Firefox和Chrome中进行了测试，但它们中的任何一个都无法使用。

这是我的代码：

查看：

<table id="progress" style="visibility:hidden">
    <tr>
        <td>
            <img src="~/Content/Images/ajax-loader.gif" />
        </td>
        <td>
            <h4>please wait.</h4>
        </td>
    </tr>
</table>

<div class="buttons">
    <input type="button" value="Ok" class="button" id="downloadButton">
</div>

<iframe id="iframe" style="visibility:hidden"></iframe>

<script>
    $(document).ready(function () {

        $('#downloadButton').click(function () {

            $('#progress').show();
            $('input:button').attr("disabled", true);

            $('#iframe').src = "@Url.Action("GenerateFile", "Files", null)";

            $('#iframe').load("GenerateFile", function () {
                $('input:button').attr("disabled", false);
                $('#progress').hide();
            });
        });

    });
</script>

服务器端操作：

[HttpGet]       
public void GenerateFile(Filters viewModel)        
{        
    var result = GetCustomers().WithName(viewModel.Name);        
    StringBuilder file = new StringBuilder();

    foreach (var customer in result)        
    {        
        // fill up the string builder with csv format       
    }        

    System.Web.HttpContext.Current.Response.AddHeader("content-disposition","attachment; filename=Customers.csv");        
    System.Web.HttpContext.Current.Response.ContentType = "application/csv";        
    System.Web.HttpContext.Current.Response.Write(file);        
    System.Web.HttpContext.Current.Response.End();        
}

任何帮助将不胜感激，谢谢！

Answer 1

我认为此代码存在多个问题。试试这个：

public FileResult GenerateFile(Filters viewModel)
        {
            var result = GetCustomers().WithName(viewModel.Name);
            StringBuilder file = new StringBuilder();

            foreach (var customer in result)
            {
                // fill up the string builder with csv format       
            }
            var content = Encoding.UTF8.GetBytes(file.ToString());
            return File(content, "application/csv", "Customers.csv");
        }

我认为没有名为src的jQuery方法，所以也试试这个：

$('#iframe').attr('src',url);

我假设您使用的是Razor语法，请尝试使用此视图代码：

@{
    ViewBag.Title = "Test";
}

<table id="progress" style="display: none">
    <tr>
        <td>
            <img src="~/Content/Images/ajax-loader.gif" />
        </td>
        <td>
            <h4>please wait.</h4>
        </td>
    </tr>
</table>

<div class="buttons">
    <input type="button" value="Ok" class="button" id="downloadButton">
</div>

<iframe id="iframe" style="display: none"></iframe>
@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {

            $('#downloadButton').click(function () {

                $('#progress').show();
                $('input:button').attr("disabled", true);

                var url = "@Url.Action("GenerateFile", "Files", null)";
$("#iframe").attr('src', url);

                $('#iframe').load("/Files/GenerateFile", function () {
                    $('input:button').attr("disabled", false);
                    $('#progress').hide();
                });
            });

        });
    </script>
}

我还认为你应该在你的jQuery加载函数中指定一个Action参数，例如。 $（'＃iframe'）。load（“/ Files / GenerateFile / parameter”...）因为您的GenerateFile操作采用了Filters参数。

ASP.NET MVC - Iframe下载对话框未显示

1 个答案: