.Net MVC 4.5导出Excel的JqGrid按钮功能不起作用。 我的代码有什么问题？

Question

I'm trying to get JqGrid's Json data to appear on spread sheet after it has been clicked by user.However after button has been clicked nothing appears to happen.I debugged the code and I know it's going to controller & data gets executed, but nothing prompts client to save or open .csv/excel file nor does it ever get created.

Please view code below: _ __ _ __ _ __ _ __ _ _ View _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __

<table id="Testl"> </table>
<div id="EmployeeTablePager"></div>



<script  type="text/javascript">
$.extend($.jgrid.defaults, { sortable: true });
$(document).ready(function(){
    jQuery('#Testl').jqGrid({
        url: '/Home/TestConnectionGrids',
        datatype: "json",
        mtype: 'GET',
        jsonReader: {
            page: "page",
            total: "total",
            records: "records",
            root: "rows",
            repeatitems: false,
            id: ""
        },
        colNames: ['Contract State Key', 'Contract', 'Service', 'Next Bill Date', 'Price PointTerm', 'Contract Status', 'Renewable Category'],
        colModel: [
            { name: 'ContractStateKey', index: 'ContractStateKey', sortable: true, sorttype: "text", width: 60, editable: false, sortable: true, editoptions: { readonly: true, size: 10 } },
            { name: 'ContractId', index: 'ContractId', sortable: true, sorttype: "text", width: 60, editable: false, editoptions: { readonly: true, size: 10 } },
            { name: 'Service', index: 'Service', width: 60, editable: false, editoptions: { readonly: true, size: 25 } },
            { name: 'NextBillDate', index: 'NextBillDate', sortable: true, sorttype: "date", width: 60, editoptions: { readonly: true, size: 10 } },
            { name: 'PricePointTerm', index: 'PricePointTerm', width: 60, editoptions: { readonly: true, size: 10 } },
            { name: 'ContractStatus', index: 'ContractStatus', width: 60, editoptions: { readonly: true, size: 10 } },
            { name: 'RenewableCategory', index: 'RenewableCategory', width: 60, editoptions: { readonly: true, size: 10 } }
        ],

        pager: '#EmployeeTablePager',
        excel: true,
        viewrecords: true,
        height:'auto',
        width:'1125',
        sortable: true,
        sorttype: "text",
        sortorder: "ASC",
        caption: "Jq-Grid test",
        rowList: [10, 25, 100],
        rowNum: 10
    })

 /* Need to initialize navGird before being able to set any custom buttons */

 .jqGrid('navGrid', '#EmployeeTablePager', {
     add: false,
     edit: false,
     del: false,
     search: false,
     refresh: false
  }).jqGrid('navButtonAdd', '#EmployeeTablePager',

{ 
caption: " Export to Excel ", buttonicon: "ui-icon-bookmark", position: "last",onClickButton: function () {
       $.post("/Home/ExportToExcel", {}, function () {
       });
   }
 });
});

//test function

function genCSV() {
    alert('a');
}

function ndateFormatter(cellval, opts, rwdat, _act) {
    var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
    var date = new Date();
    date.setTime(time);
    return date.toDateString();
 }
</script> // closing javascript tag

__ _ __ _ __ _ Controller _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using NHibernate;
using NHibernate.Cfg;
using NhbHelper;
using NhbHelper.NamedQueries;
using System.IO;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;

 public ActionResult ExportToExcel(){

        NhbHelper.NHibernateHelperBizin nbh;
        IList<TestNamedQuery> queryList;
        nbh = new NhbHelper.NHibernateHelperBizin();
        ISession session = NHibernateHelperBizin.GetCurrentSession();
        ITransaction tx = session.BeginTransaction();
        IQuery query = session.GetNamedQuery("TestTheIndyQuery");
        queryList = query.List<TestNamedQuery>();
        var grid = new GridView
        {
            DataSource = from document in queryList
                         select new
                        {
                             ContractStateKey = document.ContractStateKey,
                             ContractId = document.ContractId,
                             Service = document.Service,
                             NextBillDate = document.NextBillDate.ToShortDateString(),
                             PricePointTerm = document.PricePointTerm,
                             ContractStatus = document.ContractStatus,
                             RenewableCategory = document.RenewableCategory.Trim()
                         }
        };

       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");
    }

Answer 1

Where is your code to transfer jqgrid data send in the selected jqgrid rows to the function? If you want to transfer the contents of jqgrid to excel your code should be something like this:

//html code:

<input type="hidden" name="csvBuffer" id="csvBuffer" value="" />

//javascript code: 

grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false },
                                  {}, {}, {}, { multipleSearch: false, overlay: false,     width: 480 }).jqGrid('navButtonAdd',
                '#pager',
                { caption: " Export to Excel ",
                    buttonicon: "ui-icon-bookmark",
                    onClickButton: function() {
                        exportExcel($(this));
                    }, position: "last"
                });



function exportExcel(grid) 
{

    var mya = new Array();
    mya = grid.getDataIDs();  // Get All IDs
    var data = grid.getRowData(mya[0]);     // Get First row to get the labels
    var colNames = new Array();
    var ii = 0;
    for (var i in data) { colNames[ii++] = i; }    // capture col names
    var html = "";
    for (k = 0; k < colNames.length; k++) {
        html = html + colNames[k] + "\t";     // output each Column as tab delimited
    }
    html = html + "\n";                    // Output header with end of line
    for (i = 0; i < mya.length; i++) {
        data = grid.getRowData(mya[i]); // get each row
        for (j = 0; j < colNames.length; j++) {
            html = html + data[colNames[j]] + "\t"; // output each Row as tab delimited
        }
        html = html + "\n";  // output each row with end of line

    }
    html = html + "\n";  // end of line at the end

    document.forms[0].csvBuffer = html;
    document.forms[0].method = 'POST';
    document.forms[0].action = '/controller/method';  // send it to server which will open this contents in excel file
    document.forms[0].target = '_blank';
    document.forms[0].submit();
}

//controller code 

public void CsvExport()
    {
        string htmlMarkup = Request.Form["csvBuffer"].ToString();

        Response.Clear();

        Response.Buffer = true;

        Response.ContentType = "application/vnd.ms-excel";

        Response.AddHeader("Content-Disposition", "attachment;filename=xyz.xls");

        Response.Charset = "UTF-8";

        Response.ContentEncoding = Encoding.Default;

        Response.Write(htmlMarkup);

        Response.End();
    }