Getting string data returned from asmx webservice with AJAX

Question

I have an .asmx webservice that gets some data from my database and builds HTML using a stringbuilder (VB.net). When I get back and alert the data value of the ajax return I get the following:

{"d":"\u003cdiv class=\"col-md-6\"\u003e\u003cform id=\"frmShoppingCart\"\u003e\u003ctable class=\"table\"\u003e\u003ctr\u003e\u003ctd width=\"25%\"\u003e\u003cimg src=\"/images/productImages/BBO/B1021TRA-GRN-1.jpg\u003c/td\u003e\u003ctd width=\"75%\"\u003e\u003cselect id=\"seaCombo\" class=\"form-control\"\u003e\u003coption value=\"2\"\u003e2\u003c/option\u003e\u003coption value=\"1\"\u003e1\u003c/option\u003e\u003c/select\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch4\u003eB1021TRA\u003c/h4\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ch5\u003e\u003csmall\u003ePrice: $26.00 MSRP: $55.00\u003c/small\u003e\u003c/h5\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003c!-- End Header Table --\u003e\u003c/div\u003e\u003c!-- col-md-6 --\u003e"}

Here is the code that built the HTML:

 <WebMethod()> _
    Public Function GetProductForPopup(strStyleID As String) As String
        Dim sbHTML As New StringBuilder
        Dim sbSeasons As New StringBuilder
        Dim params As New Hashtable
        Dim tProductList As New ProductList
        Dim tSeasonProductList As New ProductList
        Dim strLastSeason As String = ""
        Dim strLastColor As String = ""
        Dim blnFirstTime As Boolean = True
        Dim blnSeasonsBuilt As Boolean = False
        Dim strCboSeasons As String = ""
        Dim strPopupHTML As String = ""
        params.Add("product_code", strStyleID)
        tProductList = CatalogManager.getProducts(params)
        tSeasonProductList = CatalogManager.getProducts(params)

        ' Get all seasons in the product list we are going to work with
        If Not blnSeasonsBuilt Then
            sbSeasons.Append("<select id=""seaCombo"" class=""form-control"">")
            For Each tSeaProd As Product In tSeasonProductList
                If Trim(tSeaProd.season) <> strLastSeason Then
                    sbSeasons.Append("<option value=""" & Trim(tSeaProd.season) & """>" & Trim(tSeaProd.season) & "</option>")
                    strLastSeason = Trim(tSeaProd.season)
                End If
            Next
            sbSeasons.Append("</select>")
            blnSeasonsBuilt = True
            strLastSeason = ""
            strCboSeasons = sbSeasons.ToString()
        End If

        sbHTML.Append("<div class=""col-md-6"">")

        sbHTML.Append("<form id=""frmShoppingCart"">")
        For Each tProd As Product In tProductList
            If blnFirstTime Then ' on first time through add the image and product information to the table
                sbHTML.Append("<table class=""table"">")
                sbHTML.Append("<tr><td width=""25%"">")
                sbHTML.Append("<img src=""/images/productImages/BBO/" & tProd.code & "-" & tProd.color & "-1.jpg")
                sbHTML.Append("</td><td width=""75%"">")
                sbHTML.Append(strCboSeasons)
                sbHTML.Append("<br /><br />")
                sbHTML.Append("<h4>" & tProd.code & "</h4>")
                sbHTML.Append("<br /><br />")
                sbHTML.Append("<h5><small>")
                sbHTML.Append("Price: " & FormatCurrency(tProd.price, 2) & "  MSRP: " & FormatCurrency(tProd.msrp))
                sbHTML.Append("</small></h5>")
                sbHTML.Append("</td></tr></table><!-- End Header Table -->")
                blnFirstTime = False
            End If
            If (strLastColor <> Trim(tProd.color)) Then ' Check to see if color matches -- if so then check for season match
                If (strLastSeason <> Trim(tProd.season)) Then ' Season and color are different

                Else ' Color is different but season is the same so add to the original table


                End If
            End If

            strLastSeason = Trim(tProd.season)
            strLastColor = Trim(tProd.color)
        Next
        sbHTML.Append("</div><!-- col-md-6 -->")
        strPopupHTML = sbHTML.ToString()
        Return strPopupHTML
    End Function

Here is the Javascript call:

function productPopup(sProductTitle, sStyleID) {
    $('#productModalLabel').html(sProductTitle);
    $.ajax({
        type: "POST",
        url: "/webservices/ProductServer.asmx/GetProductForPopup",
        data: "{ 'strStyleID':'"  + sStyleID + "' }",
        contentType: "application/json; character=utf-8",
        dataType: "text",
        success: function (data) {
            $("#contentDiv").html(data);
            alert("Success:" + data); },
        failure: function (xhr, ajaxoptions, thrownError) {
            alert("Error1:" + xhr.status);
            alert("Error2:" + thrownError);
        }
    });
    $('#productModal').modal();
}

How to I turn that mess of stuff into HTML?

Answer 1

Change your javascript to request 'json' dataType and use the .d property on your data like this:

function productPopup(sProductTitle, sStyleID) {
    $('#productModalLabel').html(sProductTitle);
    $.ajax({
        type: "POST",
        url: "/webservices/ProductServer.asmx/GetProductForPopup",
        data: "{ 'strStyleID':'"  + sStyleID + "' }",
        contentType: "application/json; character=utf-8",
        dataType: "json",
        success: function (data) {
            $("#contentDiv").html(data.d);
            alert("Success:" + data.d); },
        failure: function (xhr, ajaxoptions, thrownError) {
            alert("Error1:" + xhr.status);
            alert("Error2:" + thrownError);
        }
    });
    $('#productModal').modal();
}

You can see an explanation of why it is data.d here: http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/