How to use javascript call C# function without refresh page?

See more:

C#

ASP.NET

Javascript

HTML

Ajax

I need to read the image from the database and replace the original image on CANVAS.

The original way, the code is to read the coordinate value of the mouse click arbitrarily on CANVAS.

According to the coordinate value, it is converted into the ID of the image to be read, and the postback is triggered, so that C# can run the SQL code, and then the image is returned to HTML.

//Storing coordinate values return to C# and converted into ID value
<asp:HiddenField ID="x_value" runat="server" Value="0"  />


//C# received image from the SQL and return to HTML
<asp:Image ID="Hidden_Coronal" runat="server" />


//After image processing, displayed on CANVAS
var Coronal_coor = document.getElementById("Image_Coronal_Coordinates").getContext("2d");

img_Coronal_coor = document.getElementById("Hidden_Coronal");
pixel_remove(Coronal_coor, img_Coronal_coor, 600, 600, 132, 0, 186, 600);
Coordinates(Coronal_coor, G_str, x_coor, 0);
Coordinates(Coronal_coor, R_hor, 0, y_coor);

But in this way, every time I change the image, I need to refresh the web page.
I hope I don’t need to refresh the webpage, I know AJAX can handle it, but after reading some articles, I’m still not sure how to use it.

The code I tried is as follows:
Can someone help me?

What I have tried:

I first try to read the image with a fixed ID value, and call the function directly

function changeIMG() {
    $.ajax({
        type: "POST",
        url: 'WebForm1.aspx/imagechange',
        data: "",
        //contentType: "application/json; charset=utf-8",
        //dataType: "json",
        success: function (msg) {
            $("#divResult").html("success");
        },
        error: function (e) {
            $("#divResult").html("Something Wrong.");
        }
    });

    var Coronal_bk = document.getElementById("ImageID").getContext("2d");
    img_Coronal_bk = document.getElementById("Hidden_Coronal_Background");
    Coronal_bk.drawImage(img_Coronal_bk, 0, 0, 186, 150);

}

public void imagechange()
 {
     SqlConnection conn = new SqlConnection(con_database);

     SqlCommand Cor_command = conn.CreateCommand();
     conn.Open();
     Cor_command.Parameters.AddWithValue("@id", 5);
     Cor_command.CommandText = CorBack;
     using (SqlDataReader drCor = Cor_command.ExecuteReader())
     {
         if (drCor.HasRows)
         {
             while (drCor.Read())//嘗試讀取一筆資料列，並且回傳是否成功
             {

                 byte[] imagedata = (byte[])drCor["image"];
                 string img = Convert.ToBase64String(imagedata, 0, imagedata.Length);
                 Hidden_Coronal_Background.ImageUrl = "data:images/bmp;base64," + img;

             }

         }
         Cor_command.Parameters.Clear();
     }
     conn.Close();
 }