Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 439
  • Last Modified:

c# datatable to webpage through AJAX call Error

Hi, I am trying to do this for the first time based on modifying a code snippet I found online.  I am building an html data table in my code behind embedding sql data from a c# datatable.  I am then trying to pass it to an .aspx page using an AJAX call and passing the html table string to a <div> tag.  The problem I am having is that when I breakpoint on the htmlTable string it looks good but the page is coming up with a javascript alert box saying 'error', not sure how to troubleshoot from this point or what is wrong with the code, I have pasted below, any assistance is appreciated!!!
Code Behind:
namespace WebApplication3
{
    public partial class Page_MF : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        
        private static string connTotalOrdersCalls = ConfigurationManager.ConnectionStrings["connTotalOrdersCalls"].ConnectionString;
       
        public static DataTable reportDT()
        {
            try
            {            
            String sp_Name = "USP_TOTAL_ORDERCALLS";
            using (DataTable OrdersCalls = new DataTable())
            {
                OrdersCalls.Columns.Add("Week_Ending");
                OrdersCalls.Columns.Add("Mth");
                OrdersCalls.Columns.Add("Product_Suite");
                OrdersCalls.Columns.Add("Site");
                OrdersCalls.Columns.Add("SalesAction");
                OrdersCalls.Columns.Add("Orders");
                OrdersCalls.Columns.Add("TotalCalls");
                using (SqlConnection SQLConn = new SqlConnection(connTotalOrdersCalls))
                {
                    using(SqlCommand SQLComm = new SqlCommand(sp_Name, SQLConn))
                    {
                        SQLComm.CommandType = CommandType.StoredProcedure;
                        //SQLComm.Parameters.Add(new SqlParameter("@Site", null);
                        SQLConn.Open();

                        SqlDataReader sql_Reader = SQLComm.ExecuteReader();
                        while (sql_Reader.Read())
                        {
                            Object[] row = {
                                               sql_Reader["Week_Ending"].ToString(),
                                               sql_Reader["MTH"].ToString(),
                                               sql_Reader["PRODUCT_SUITE"].ToString(),
                                               sql_Reader["SITE"].ToString(),
                                               sql_Reader["Orders"].ToString(),
                                           };
                            OrdersCalls.Rows.Add(row);
                        }
                    }
               
                return OrdersCalls;
            }
        }
            }
            catch (Exception)
            {
                throw;
            }
        }
        
        [WebMethod]
        public static String SendToDiv()
        {
            String htmlTable = "<table>";
            DataTable newTable = reportDT();

            for (int i = 0; i < newTable.Rows.Count; i++)
            {
                htmlTable += "<tr>";
                for (int x = 0; x < newTable.Columns.Count; x++)
                {
                    htmlTable += "<td>" + newTable.Rows[i][x] + "</td>";
                }
                htmlTable += "</tr>";
            }
            return htmlTable;
        }
    }
}

Open in new window


.ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
 
<script type="text/javascript">
    //on document ready event (when the dom is ready)
    $(document).ready(function () {
        appendToDiv();
    });

    function appendToDiv() {
        $.ajax({
            type: "POST",
            async: false,  
            contentType: "application/json; charset=utf-8",
            url: "Page_MF.aspx/SendToDiv",
            data: JSON.stringify({}), 
            dataType: "json",
            success: function (data) {
               
                $('#div-for-upload').append(data.d)
            },
            error: function (result) {
                alert("Error");
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div-for-upload">
   </div>
    </form>
</body>
</html>

Open in new window

0
Scarlett72
Asked:
Scarlett72
2 Solutions
 
Julian HansenCommented:
And if you change
$('#div-for-upload').append(data.d)

Open in new window


To

$('#div-for-upload').append(data)

Open in new window


Does it work?

Your SendToDiv function is returning a string - and you are expecting an object in your AJAX success function

Otherwise:

What error are you getting?
Do you have a link?

Other Considerations
Are you sure you want to be appending the response - this will add a new table to the div for each call (keeping the table(s) that are already there) - if you want to update (replace) the table consider

$('#div-for-upload').html(data)

Open in new window

0
 
leakim971PluritechnicianCommented:
replace :
            dataType: "json",
by :
            dataType: "html",

because it look like you're receiving HTML not JSON data
0
 
Scarlett72Author Commented:
Hi what actually resolved this for me was adding the following to my web.config, I think the amount of test data I was using was too large.  

  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="50000000">
        </jsonSerialization>
      </webServices>
    </scripting>
  </system.web.extensions>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now