Display HTML Table string in DIV returned by WebMethod using jQuery AJAX

Hi iammann,

You need to change the type to POST and contentType to application/json and dataType to json in the ajax call.

And make sure that you have uncomment the below line of codet o allow this Web Service to be called from script using ASP.NET AJAX.

[System.Web.Script.Services.ScriptService]

Check the below example.

HTML

<div id="divData">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        ShowTestMessage();
    });
    function ShowTestMessage() {
        $.ajax({
            url: "SaubhagyaWebService.asmx/RealTimeData",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) { },
            error: function (response) { alert(response.responseText); }
        });
    }
    function OnSuccess(response) {
        document.getElementById("divData").innerHTML = response.d;
    }
</script>

WebService

using System;
using System.Data;
using System.Text;
using System.Web.Services;

/// <summary>
/// Summary description for SaubhagyaWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class SaubhagyaWebService : System.Web.Services.WebService
{
    [WebMethod]
    public string RealTimeData()
    {
        StringBuilder sb = new StringBuilder();
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { 
                            new DataColumn("GeneratorName", typeof(string)),
                            new DataColumn("DCData", typeof(int)),
                            new DataColumn("SGData",typeof(int)),
                            new DataColumn("POINT_VAL",typeof(int)),
                            new DataColumn("diff",typeof(int))});
        dt.Rows.Add("G-1", 10, 15, 1, 5);
        dt.Rows.Add("G-2", 12, 18, 2, 6);
        dt.Rows.Add("G-3", 15, 10, 3, 5);
        dt.Rows.Add("G-4", 20, 10, 4, 10);
        if (dt.Rows.Count > 0)
        {
            sb.AppendLine("<table  id='mytbl' class='table table-striped table-bordered power-table' width='96%' cellspacing='0' cellpadding='0'><thead>");
            sb.AppendLine("<tr class='power-table-header'><th valign='top' align='center'>Name of<br>Generator</th><th valign='top' align='center'>DC<br>");
            sb.AppendLine("(MW)</th><th valign='top' align='center'>Schedule<br>(MW)</th><th valign='top' align='center'>Actual<br>(MW)</th><th valign='top' align='center'>(+) OI/<br>(-)UI<br>(MW)</th>");
            sb.AppendLine("</tr></thead><tbody>");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                sb.AppendLine("<tr><td>" + dt.Rows[i]["GeneratorName"] + "</td><td align='center'>" + dt.Rows[i]["DCData"] + "</td><td align='center'>" + dt.Rows[i]["SGData"] + "</td>  <td align='center'>" + dt.Rows[i]["POINT_VAL"] + "</td><td align='center'>" + dt.Rows[i]["diff"] + "</td></tr>");
            }
            sb.AppendLine("</tbody><thead><tr class='power-table-header'><th>TOTAL</th><th>" + Convert.ToDouble(dt.Compute("Sum(DCData)", string.Empty)) + "</th><th>" + Convert.ToDouble(dt.Compute("Sum(SGData)", string.Empty)) + "</th><th>" + Convert.ToDouble(dt.Compute("Sum(POINT_VAL)", string.Empty)) + "</th><th>" + Convert.ToDouble(dt.Compute("Sum(diff)", string.Empty)) + "</th></tr></thead></table>");
        }

        return sb.ToString();
    }
}

Screenshot