Post
Ask Question
Guest User

Guest User

  • Tech Writer
  • 82
  • 7.3k

ajax c# html jquery

Aug 28 2019 4:45 AM
i have create program which is work for read excel file and print data into html table,
note:- i have use all control in html but web page is aspx because that is my requirement.
html and ajax code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var reader = new FileReader();
$('input[type=file]').change(function () {
if (typeof (FileReader) != "undefined") {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid Excel file.");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
$('#btnUpload').on("click", function () {
var byteData = reader.result;
byteData = byteData.split(';')[1].replace("base64,", "");
$.ajax({
type: "POST",
url: "Default.aspx/GetExcelData",
data: '{byteData: "' + byteData + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find(tableCreate());
var tbl;
function tableCreate() {
tbl = "<Table>";
for (var i = 0; i < byteData.length; i++) {
tbl += "<tr>";
for (var j = 0; j < byteData[i].length; j++) {
if (i == 0) {
tbl += "<th>" + byteData[i][j] + "</th>";
}
else {
tbl += "<td>" + byteData[i][j] + "</td>";
}
}
tbl += "</tr>";
}
tbl += "</Table>";
return tbl;
};
$("#div1").append(tableCreate());
$("tr:nth-child(odd)").css("background-color", "blanchedalmond");
},
error: function (response) {
alert(response.responseText);
}
});
return false;
});
});
</script>
<input type="file" id="fuUpload" runat="server" />
<input type="button" id="btnUpload" value="Upload" runat="server" />
<br />
<br />
<div id="div1"></div>
</form>
</body>
</html>
and c# code is here :
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetExcelData(string byteData)
{
byte[] bytes = Convert.FromBase64String(byteData);
string filePath = HttpContext.Current.Server.MapPath("~/Files/Test.xls");
if (!Directory.Exists(HttpContext.Current.Server.MapPath("~/Files")))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Files"));
}
// Save file in File folder.
File.WriteAllBytes(filePath, bytes);
string extension = Path.GetExtension(filePath);
string excelConnectionString = "";
switch (extension)
{
case ".xls": //Excel 97-03
excelConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source={0};Extended Properties='Excel 8.0;HDR=YES;IMEX=1;'";
break;
case ".xlsx": //Excel 07
excelConnectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties='Excel 12.0;HDR=YES;IMEX=1;'";
break;
}
excelConnectionString = String.Format(excelConnectionString, filePath);
OleDbConnection excelConnection = new OleDbConnection(excelConnectionString);
OleDbCommand cmdExcel = new OleDbCommand();
OleDbDataAdapter oleDA = new OleDbDataAdapter();
cmdExcel.Connection = excelConnection;
excelConnection.Open();
DataTable dtExcelSchema;
dtExcelSchema = excelConnection.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, null);
string SheetName = dtExcelSchema.Rows[0]["TABLE_NAME"].ToString();
excelConnection.Close();
excelConnection.Open();
cmdExcel.CommandText = "SELECT * From [" + SheetName + "]";
oleDA.SelectCommand = cmdExcel;
DataSet ds = new DataSet();
oleDA.Fill(ds);
excelConnection.Close();
// Delete saved file.
// Directory.Delete(HttpContext.Current.Server.MapPath("~/Files"), true);
return ds.GetXml();
}
}
My actual problem is it return in html form data but i want to in table form and another problem is
POST 500 (Internal Server Error)
Can anyone one help me?

Answers (1)