1

我需要进行文件下载，在文件处理过程中显示加载图标（因为我不知道需要多长时间），我决定使用 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();        
}

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

4

1 回答 1

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 参数。

于 2012-11-06T15:37:24.323 回答