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

Last Reply 8 months ago By dharmendr

Posted 8 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 8 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