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

Last Reply 11 months ago By dharmendr

Posted 11 months ago

response is showing plain text not html. my code is below.

   [WebMethod]
    public  string RealTimeData()
    {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        System.Data.DataTable dt = new System.Data.DataTable();
        using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(conStr))
        {
            using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand("get_DataUPRVUNL_Service", con))
            {
                using (System.Data.SqlClient.SqlDataAdapter sda = new System.Data.SqlClient.SqlDataAdapter())
                {
                    cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);
                    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();
    }

 

    <script>
        $(document).ready(function () {
            ShowTestMessage();
        });
        function ShowTestMessage() {
            $.ajax({
                url: "SaubhagyaWebService.asmx/RealTimeData",
                type: "GET",
                contentType: "application/html; charset=utf-8",
                dataType: "html",
                success: OnSuccess,
                failure: function (response) {
                }
            });
        }
        function OnSuccess(response) {
            //console.log(response)  
            debugger;
           
            var theHtml = $(response).filter('#mytbl').children('table:first').html();
            alert(theHtml);
            document.getElementById("divData").innerHTML = response;
        }
    </script>
Posted 11 months ago

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