ASP.NET JavaScript - Invalid JSON primitive

Question

I am trying to use "contentTools" with ASP.NET C# Website. I am trying to send the modified json to server side to store within database.

I have validated the JSON though external web but here is my code. For test purpose, I am trying to invoke an alert with a string sent back from my ASP.NET method.

window.onload = function () {
        //ShowCurrentTime();
        var FIXTURE_TOOLS, IMAGE_FIXTURE_TOOLS, LINK_FIXTURE_TOOLS, editor;
        ContentTools.IMAGE_UPLOADER = ImageUploader.createImageUploader;
        ContentTools.StylePalette.add([new ContentTools.Style('By-line', 'article__by-line', ['p']), new ContentTools.Style('Caption', 'article__caption', ['p']), new ContentTools.Style('Example', 'example', ['pre']), new ContentTools.Style('Example + Good', 'example--good', ['pre']), new ContentTools.Style('Example + Bad', 'example--bad', ['pre'])]);
        editor = ContentTools.EditorApp.get();
        editor.init('[data-editable], [data-fixture]', 'data-name');
        editor.addEventListener('saved', function (ev) {
            var name, payload, regions, xhr;

            // Check that something changed
            regions = ev.detail().regions;
            if (Object.keys(regions).length == 0) {
                return;
            }

            // Set the editor as busy while we save our changes
            this.busy(true);

            // Collect the contents of each region into a FormData instance
            payload = new FormData();
            payload.append('regions', JSON.stringify(regions));

            xhr = new XMLHttpRequest();
            xhr.open('POST', 'Default.aspx/getJSONHTMLResponse');
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            };            
            xhr.send(payload);


        });

Here is my server-side:

    [System.Web.Services.WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string getJSONHTMLResponse(string name)
    {
        return "Success";
    }

And here is what I see in Developers tool in chrome as Request Payload:

------WebKitFormBoundaryilrxnMxm7ANdiYMp
Content-Disposition: form-data; name="regions"

{"para-1":"<p>\n testestest\n</p>","para-2":"<p>\n testestestestest.\n</p>"}
------WebKitFormBoundaryilrxnMxm7ANdiYMp--

And the error:

{"Message":"Invalid JSON primitive: ------WebKitFormBoundaryilrxnMxm7ANdiYMp.","StackTrace":"   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n   at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n   at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n   at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

Hi, i need more informations to help you. Why do you not use ASP.Net Web Api with Angular or React or Vuejs ? You declared the variable "regions" what's the content fot this ? It's possible you show the example for your code in Github ? Sorry not help you more. — Govinda Mendes Souza
– Govinda Mendes Souza, Commented Apr 18, 2020 at 2:29
regions has the id for a html element along with its content. This is what I am doing exactly: getcontenttools.com/getting-started#prepare-html — 1291
– 1291, Commented Apr 18, 2020 at 3:17

Lasanga Guruge · Accepted Answer · 2020-04-18 11:10:22Z

1

Just because you are accepting a string as a parameter from you api endpoint, send it as a string. No need to append into a FormData. That will send your payload as an object.

xhr.send(JSON.stringify(regions));

answered Apr 18, 2020 at 11:10

Lasanga Guruge

8741 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

1291 Over a year ago

Thanks! How can I send é accept an object? It still doest work if I change my method to this: public static object getJSONHTMLResponse(object name) { return "Success"; }

Lasanga Guruge Over a year ago

1. Create a class called: [Serializable] public class Region { public string paraNo {get; set; } public string paraText {get; set;} } 2. Change method to: public static string methodName(Region region){ return "success"; } 3.Create object sent from ajax according to region class properties.

1291 · Accepted Answer · 2020-04-20 00:55:08Z

0

So I want to report back on how I resolved this issue.

Apparently I found out the hard way, form-data is tricky to be read. What I did instead:

Create a proper Web-service controller to accept a JToken response.
Parse the response in Key, Value pair.
Add it to a Session object and database as required.

Thanks!!

answered Apr 20, 2020 at 0:55

1291

1171 gold badge2 silver badges6 bronze badges

Collectives™ on Stack Overflow

ASP.NET JavaScript - Invalid JSON primitive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related