Jquery ajax with passing data into handler not working (Asp.net, C#, Jquery)

Question

I have used ajax call to passing some form data into handler with json format but the ajax is not working. I have passes data from form Data with using $('form').serializeArray() and passing data using ajax call. In this scenario I have passed static data and the ajax call is still not working.

This is the jQuery code.

function SessionLogAutoSave() {
    var sendInfo =
    {
        "ctl00$Header1$cbo_Practice": "ea2aae16-a7f9-4e75-82b5-d2c231c97cf6",
        "ctl00$cph_MainContent$OFTAddRecord$hdnUrl": "",
        "ctl00$cph_MainContent$hdnSessionId": "yyuicdueevmdeynp2q12mrb1",
        "ctl00$cph_MainContent$hdnPracticeId": "870ee142-eb27-4d37-bba2-061fa5f801e3",
        "ctl00$cph_MainContent$hdnRecordId": "",
        "ctl00$cph_MainContent$hdnUserId": "d220da1a-d855-4f90-b8db-a84bc5ba8f51",
        "ctl00$cph_MainContent$txt_Name": "",
        "ctl00$cph_MainContent$txt_Address": "",
        "ctl00$cph_MainContent$txt_ContactNumber": "",
        "ctl00$cph_MainContent$cbo_ComplaintBy": "1",
        "ctl00$cph_MainContent$cbo_ComplaintReceivedBy": "83beebf4-e6ea-49b3-a64f-ed20f755afdd",
        "ctl00$cph_MainContent$cbo_PersonHandlingComplaint": "83beebf4-e6ea-49b3-a64f-ed20f755afdd",
        "ctl00$cph_MainContent$cbo_Type": "1",
        "ctl00$cph_MainContent$txt_ComplaintReceivedOn": "",
        "ctl00$cph_MainContent$txt_ComplaintReceivedOn$dateInput": "",
        "ctl00_cph_MainContent_txt_ComplaintReceivedOn_calendar_SD": "[]",
        "ctl00_cph_MainContent_txt_ComplaintReceivedOn_calendar_AD": "[[1980,1,1],[2099,12,30],[2021,4,22]]",
        "ctl00_cph_MainContent_txt_ComplaintReceivedOn_dateInput_ClientState": "{\"enabled\":true,\"emptyMessage\":\"\",\"validationText\":\"\",\"valueAsString\":\"\",\"minDateStr\":\"1980-01-01-00-00-00\",\"maxDateStr\":\"2099-12-31-00-00-00\",\"lastSetTextBoxValue\":\"\"}",
        "ctl00_cph_MainContent_txt_ComplaintReceivedOn_ClientState": "",
        "ctl00$cph_MainContent$txt_DateFollowup": "",
        "ctl00$cph_MainContent$txt_DateFollowup$dateInput": "",
        "ctl00_cph_MainContent_txt_DateFollowup_calendar_SD": "[]",
        "ctl00_cph_MainContent_txt_DateFollowup_calendar_AD": "[[1980,1,1],[2099,12,30],[2021,4,22]]",
        "ctl00_cph_MainContent_txt_DateFollowup_dateInput_ClientState": "{\"enabled\":true,\"emptyMessage\":\"\",\"validationText\":\"\",\"valueAsString\":\"\",\"minDateStr\":\"1980-01-01-00-00-00\",\"maxDateStr\":\"2099-12-31-00-00-00\",\"lastSetTextBoxValue\":\"\"}",
        "ctl00_cph_MainContent_txt_DateFollowup_ClientState": "",
        "ctl00$cph_MainContent$txt_DetailsComplaint": "",
        "ctl00$cph_MainContent$txt_Followup": "",
        "ctl00$cph_MainContent$txt_DateActionTaken": "",
        "ctl00$cph_MainContent$txt_DateActionTaken$dateInput": "",
        "ctl00_cph_MainContent_txt_DateActionTaken_calendar_SD": "[]",
        "ctl00_cph_MainContent_txt_DateActionTaken_calendar_AD": "[[1980,1,1],[2099,12,30],[2021,4,22]]",
        "ctl00_cph_MainContent_txt_DateActionTaken_dateInput_ClientState": "{\"enabled\":true,\"emptyMessage\":\"\",\"validationText\":\"\",\"valueAsString\":\"\",\"minDateStr\":\"1980-01-01-00-00-00\",\"maxDateStr\":\"2099-12-31-00-00-00\",\"lastSetTextBoxValue\":\"\"}",
        "ctl00_cph_MainContent_txt_DateActionTaken_ClientState": "",
        "ctl00$cph_MainContent$txt_DateOutcome": "",
        "ctl00$cph_MainContent$txt_DateOutcome$dateInput": "",
        "ctl00_cph_MainContent_txt_DateOutcome_calendar_SD": "[]",
        "ctl00_cph_MainContent_txt_DateOutcome_calendar_AD": "[[1980,1,1],[2099,12,30],[2021,4,22]]",
        "ctl00_cph_MainContent_txt_DateOutcome_dateInput_ClientState": "{\"enabled\":true,\"emptyMessage\":\"\",\"validationText\":\"\",\"valueAsString\":\"\",\"minDateStr\":\"1980-01-01-00-00-00\",\"maxDateStr\":\"2099-12-31-00-00-00\",\"lastSetTextBoxValue\":\"\"}",
        "ctl00_cph_MainContent_txt_DateOutcome_ClientState": "",
        "ctl00$cph_MainContent$txt_ActionTaken": "",
        "ctl00$cph_MainContent$txt_Outcome": "",
        "ctl00$cph_MainContent$rbtnDiscussed": "0",
        "ctl00$cph_MainContent$cbo_Status": "1",
        "ctl00$cph_MainContent$hid_Id": "",
        "ctl00$cph_MainContent$hdnAttachments": "",
        "ctl00$cph_MainContent$hdnFileNames": "",
        "ctl00$cph_MainContent$cbo_Months": "4",
        "ctl00$cph_MainContent$cbo_Years": "2021"
    };
    jQuery.ajax({
        url: 'Handlers/SaveSessionLogAutoSave.ashx',
        data: 'FormData=' + JSON.stringify(sendInfo) + '',
        contentType: 'application/json;utf-8',
        dataType: 'json',
        type: 'GET',
        cache: false,
        success: function (data) {
            // you can make a tiny notification here
            return;
        },
        error: function (responseText, textStatus, XMLHttpRequest) {
            return;
        }
    });
}

I have used handler for retrieve the data. My handler code is

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DentalCompliance.Handlers
{
    /// <summary>
    /// Summary description for SaveSessionLogAutoSave
    /// </summary>
    public class SaveSessionLogAutoSave : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string method = context.Request["FormData"];
            
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
            //}
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

I searched on the internet and I have not been able to find any solutions after an 1 day of searching.

Answer 1

Change your code to this:

 $.ajax({
            url: 'Handlers/SaveSessionLogAutoSave.ashx',
            data: 'FormData=' + JSON.stringify(sendInfo) + '',
            dataType: 'json',
            type: 'POST',
            cache: false,
            success: function (data) {
                // you can make a tiny notification here
                return;
            },
            error: function (responseText, textStatus, XMLHttpRequest) {
                return;
            }
        });

Changed two things: 1. Type of request from GET to POST because when we use GET , the data you're sending appended to the URL and you're sending too much data which is exceeding the length of the URL allowed in your application. 2. Removed contentType because you're not sending JSON.