•  14-07-2023
  •  | 
  •  

Question

I have CKEditor & i save that as a Html in my database.Then i'm going to get that saved html stream & show it inside div But it shows the html codes.

My webmethod return below line

<p> <strong>Test Heading </strong></p> <p> <img alt="" src="http://s7.postimg.org/511xwse93/mazda_familia_photo_large.jpg" style="width: 150px; height: 112px;" /></p> <p> test description goes here</p>

Div 

<div id="usrnewsdesc"></div>

My Ajax Call

     function LoadNewsToUsers() {
       debugger;

       var newurl = '<%= ResolveUrl("/WebMethods.aspx/GetIndividualUserNews") %>';

        $.ajax({
            url: newurl,
            type: "POST",
            data: JSON.stringify({ ToUser: "<%=GetUserID()%>" }),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (Result) {
                $.each(Result.d, function (key, value) {

                    var html ="<body>"+value.News+"</body>";
                    $("#usrnewsdesc").append(html);

                });

            },


            error: function (e, x) {
                alert(x.ResponseText);
            }
        });
    }

My div looks like this mydiv

My WebMethod 

 [WebMethod, ScriptMethod]
public static List<UserNews> GetIndividualUserNews(Guid ToUser)
{
    List<UserNews> UserNewsDetails = new List<UserNews>();
    try
    {
        SqlCommand comGetAllFiles = new SqlCommand("SP_GetNewsToUser", conDB);
        comGetAllFiles.CommandType = CommandType.StoredProcedure;
        if (conDB.State == ConnectionState.Closed)
            conDB.Open();
        comGetAllFiles.Parameters.Add("@ToUser", SqlDbType.UniqueIdentifier);
        comGetAllFiles.Parameters["@ToUser"].Value = ToUser;

        SqlDataReader rdr = comGetAllFiles.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(rdr);
        foreach (DataRow r in dt.Rows)
        {
            UserNewsDetails.Add(new UserNews
            {
                Id = (int)r["Id"],
                News = r["News"].ToString(),
                DateTime =(DateTime) r["DateTime"],
                ToUser = (Guid)r["ToUser"]

            });
        }

    }
    catch (Exception ee)
    {
    }
    finally
    {
        conDB.Close();
    }
    return UserNewsDetails;
}

Console.log is below

  &lt;p&gt;
    &lt;strong&gt;Test Heading &lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;
    &lt;img alt=&quot;&quot; src=&quot;http://s7.postimg.org/511xwse93/mazda_familia_photo_large.jpg&quot; style=&quot;width: 150px; height: 112px;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;
    test description goes here&lt;/p&gt;
Was it helpful?

Solution

You need to decode your html content before you can use it as html.

success: function (Result) {
    $.each(Result.d, function (key, value) {

        var html = $("<div/>")        // temp container
                    .html(value.News) // "render" encoded content to text
                    .text();          // retrieve text (actual html string now)

        // body tags are a bad idea here but whatever.
        html = "<body>" + html + "</body>"; 

        $("#usrnewsdesc").append(html);

    });

},

With credit to this post for the decoding instruction: How to decode HTML entities using jQuery?

OTHER TIPS

You are seeing the correct output. No wrong is there. It is HTML Encoded, you have to decode it. You can use NewtonSoft json serializer to Decode it. Convert it and then return it from server side. Better if you could replace on the javascript side before applying it with append, because if the server return sometimes, your client js will be broken Other than this all codes are okay

Try replacing quotes with js - 

var s = value.News.replace('&lt;','<').replace('&gt;','>').replace('&squote','\'').replace('&quote','"');
$("#usrnewsdesc").html(s);

may be this will help or use NewtonSoft JSON serializer-

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top