jqgrid / mvc 3 - 导出到excel并引发文件下载对话框?

时间:2011-09-28 07:58:59

标签: jquery asp.net-mvc-3 jqgrid download

我已经阅读了很多解决方案,但我还没有完成工作。
我的问题很简单,将数据导出到excel文件并引发文件下载对话框 但是文件下载对话框不显示。我可能是从View到Controller的调用方法是错误的,因为我调试了ExportToExcel函数并且没有错误
预先感谢

这是视图:

<script type="text/javascript">
    $(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/documents/List',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID', 'File Name', 'Description', 'File', 'Modified', 'File Type', 'Access'],
            colModel: [
                    { name: 'ID', index: 'id', width: 40, align: 'left', key: true, editable: false, editrules: { edithidden: false }, edittype: 'text' },
                    { name: 'FileName', index: 'filename', width: 315, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                    { name: 'Description', index: 'description', width: 210, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                    { name: 'File', index: 'file', hidden: true, enctype: "multipart/form-data", method: "post", editable: true, edittype: 'file', editrules: { edithidden: true, required: true }, formoptions: { elmsuffix: ' *'} },
                    { name: 'Modified', index: 'modified', width: 105, align: 'left', editable: false, edittype: 'text', editoptions: { size: 20, dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }); } } },
                    { name: 'FileType', index: 'filetype', width: 210, align: 'left', editable: true, edittype: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' },
                        editoptions: { dataUrl: '/HtmlSelectHelper/ConstructDocumentTypeList' }
                    },
                    { name: 'Access', index: 'access', width: 114, align: 'left', editable: true, edittype: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' },
                        editoptions: { value: '0:Private;1:Public' }
                    },
               ],
            autowidth: false,
            forceFit: false,
            shrinkToFit: false,
            width: 1024,
            height: 600,
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100],
            pager: jQuery('#pager'),
            sortorder: "desc",
            sortable: true,
            viewrecords: true,
            caption: "Documents List",
            editurl: "/documents/edit"
        });
        jQuery("#list").jqGrid('navGrid', '#pager',
        {
            add: true, edit: true, view: true, del: true
        },
        {
            closeAfterEdit: true,
            closeAfterAdd: true,
            width: 400
        },
        {
            closeAfterEdit: true,
            closeAfterAdd: true,
            width: 400,
            serializeEditData: function (data) { return $.param($.extend({}, data, { id: 0 })); }
        },
        {
    },
        {
            multipleSearch: true
        });

    jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
        onClickButton: function () {
            jQuery("#list").jqGrid('columnChooser');
        }
    });

    jQuery("#list").jqGrid('navButtonAdd', '#pager', {
        caption: "", buttonicon: "ui-icon-print", title: "Excel Export",
        onClickButton: function () {
                        $.post("/Documents/ExportToExcel", {}, function () {

                        });
        }
    });

    jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
});               
</script>

这是控制器:

public ActionResult ExportToExcel()
{
    var documents = db.documents as IEnumerable<document>;

    var grid = new GridView
                   {
                       DataSource = from document in documents
                                    select new
                                               {
                                                   filename = document.filename,
                                                   description = document.description,
                                                   modified = document.modified.ToString(),
                                                   filetype = document.filetype,
                                                   access = document.access
                                               }
                   };

    grid.DataBind();

    Response.ClearContent();
    Response.AddHeader("content-disposition", "inline; filename=Excel.xls");

    Response.ContentType = "application/excel";

    StringWriter sw = new StringWriter();

    HtmlTextWriter htw = new HtmlTextWriter(sw);

    grid.RenderControl(htw);

    Response.Write(sw.ToString());

    Response.End();
    return View("Index");
}

4 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,并通过更改视图设法解决如下:

jQuery("#list").jqGrid('navButtonAdd', '#pager', {
    caption: "", buttonicon: "ui-icon-print", title: "Excel Export",
    onClickButton: function () {
                    window.location.href = "/Documents/ExportToExcel";
    }
});

答案 1 :(得分:0)

根本不渲染视图。

而不是返回View()返回File()传递byte[]文件内容。 更多信息:http://msdn.microsoft.com/en-us/library/dd460208.aspx

答案 2 :(得分:0)

请更改以下代码

而不是返回View()返回新的EmptyResult();

还有Response.ContentType =“application / vnd.ms-excel”

如果您的代码无效,您可以使用NPOI进行Excel文件操作

答案 3 :(得分:0)

我认为最好的方法是使用FileResult

    public FileResult Binary(MyModel Model)
    {
        return new FileContentResult(bindata, "application/vnd.ms-excel")
                    {
                        FileDownloadName = "mytestfile.xls"
                    };        
    }