Read data from Excel and display on page using JSON using jQuery AJAX in ASP.Net

Last Reply on Jun 18, 2014 04:18 AM By Azim

Posted on Jun 18, 2014 03:02 AM

hi i have a c# program in which im trying to read data from my excel sheet to my json page so i can use that information. The problem is that when i run my json page it doesnt do anything, it just gives a blank screen with no error or any data. Please help

string strExcelConn = @"Provider=Microsoft.Jet.OLEDB.4.0;" + "Data Source=C:\\ReadExcell.xls;" + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=1\";";

System.Data.OleDb.OleDbConnection connExcel = new System.Data.OleDb.OleDbConnection(strExcelConn);

System.Data.OleDb.OleDbCommand cmdExcel = new System.Data.OleDb.OleDbCommand();
cmdExcel.Connection = connExcel;
connExcel.Open();
System.Data.DataTable dtExcelSchema;

dtExcelSchema = connExcel.GetOleDbSchemaTable(System.Data.OleDb.OleDbSchemaGuid.Tables,null);
connExcel.Close();
connExcel.Open();
System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter();
DataSet ds = new DataSet();


string sheetName = dtExcelSchema.Rows[0]["Table_Name"].ToString();

cmdExcel.CommandText = "SELECT * From [Sheet1$]";


da.SelectCommand = cmdExcel;
da.Fill(ds);
connExcel.Close();

 

Posted on Jun 18, 2014 04:18 AM

Using the Reference of this article

 
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Table");
            var row = $("[id*=gvCustomers] tr:last-child").clone(true);
            $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
            $.each(customers, function () {
                var customer = $(this);
                $("td", row).eq(0).html($(this).find("CustomerID").text());
                $("td", row).eq(1).html($(this).find("City").text());
                $("td", row).eq(2).html($(this).find("Country").text());
                $("td", row).eq(3).html($(this).find("PostalCode").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
        Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2"
        HeaderStyle-ForeColor="White">
        <Columns>
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText="PostalCode" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

Namespaces

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyRow();
    }
}

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("CustomerID");
    dummy.Columns.Add("City");
    dummy.Columns.Add("Country");
    dummy.Columns.Add("PostalCode");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers()
{
    //string query = "SELECT top 10 CustomerID, ContactName, City FROM Customers";
    //SqlCommand cmd = new SqlCommand(query);
    //return GetData(cmd).GetXml();
    string strExcelConn = @"Provider=Microsoft.Jet.OLEDB.4.0;" + "Data Source=D:\\Excel\\Excel03.xls;" + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=1\";";
    System.Data.OleDb.OleDbConnection connExcel = new System.Data.OleDb.OleDbConnection(strExcelConn);
    System.Data.OleDb.OleDbCommand cmdExcel = new System.Data.OleDb.OleDbCommand();
    cmdExcel.Connection = connExcel;
    connExcel.Open();
    System.Data.DataTable dtExcelSchema;
    dtExcelSchema = connExcel.GetOleDbSchemaTable(System.Data.OleDb.OleDbSchemaGuid.Tables, null);
    connExcel.Close();
    connExcel.Open();
    System.Data.OleDb.OleDbDataAdapter da = new System.Data.OleDb.OleDbDataAdapter();
    DataSet ds = new DataSet();
    string sheetName = dtExcelSchema.Rows[0]["Table_Name"].ToString();
    cmdExcel.CommandText = "SELECT * From [Sheet1$]";
    da.SelectCommand = cmdExcel;
    da.Fill(ds); connExcel.Close();
    return ds.GetXml();

}

Screenshot

Excel

GridView