在Asp.net C＃中使用jQuery Ajax插入数据[数据库MySQL]

Question

I need insert new record in MySql Database Using jQuery Ajax in Asp.net C#.

I have tried this tutorial when use the WebService method : https://codepedia.info/insert-data-using-jquery-ajax-in-asp-net-csharp-database-ms-sql-server/

I don't have error but the data is not inserted.

I have tried insert simple query sql, without success.

Can you help me?

Thank you in advance.

My code simplified below.

WebService.cs

using System;
using System.Configuration;
using System.Data.Odbc;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService
{
    public WebService()
    {

    }

    public class userDetails
    {
        public string firstName;
    }

    [WebMethod]
    public void AddRecord(userDetails userDetails)
    {
        //SIMPLE SQL QUERY INSERT INTO
        string query = String.Format(" INSERT INTO doTable ");
        query += String.Format(" (name) ");
        query += String.Format(" VALUES ('foo'); ");

        using (OdbcConnection conn =
            new OdbcConnection(ConfigurationManager.ConnectionStrings["ConnMySQL"].ConnectionString))
        {
            using (OdbcCommand cmd =
                new OdbcCommand(query, conn))
            {
                try
                {
                    cmd.Connection.Open();
                    cmd.ExecuteNonQuery();
                }
                catch (Exception ex)
                {
                    throw new ApplicationException("operation failed!", ex);
                }
                finally
                {
                    cmd.Connection.Close();
                }
            }
        }
    }
}

HMTL page :

<script src="3.2.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#activatedLink").on('click', function (e) {

            e.preventDefault();
            var userDetails = {};

            userDetails.firstName = $("#randomdirectory").val();

            var jsonData = JSON.stringify({
                userDetails: userDetails
            });

            $.ajax({
                type: "POST",
                url: "WebService.asmx/AddRecord",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnErrorCall
            });

            function OnSuccess(response) {
                var result = response.d;
                if (result == "success") {
                    $("#msg").html("New record addded successfully  :)").css("color", "green");
                }
                $("#randomdirectory").val("");
            }

            function OnErrorCall(response) {
                $("#msg").html("Error occurs  :(").css("color", "red");
            }

        });

    });

</script>



<form id="form1">
    <div id="Tree">
       <input type="hidden" id="randomdirectory" name="randomdirectory" value="CEF">
          <a id="activatedLink" data-id="CEF" 
           href="javascript:document.getElementById('loading').style.visibility = 'visible';
           location.href='http://...';" target="_top">
          <span>CEF</span></a>
    </div>
</form>

Answer 1

You need know the difference between REST Service and SOAP Service .NET asmx web service is a SOAP Service that is why normal ajax post with stringified json won't work. The SOAP Request spesifications are written in the page you created like in here https://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit

For example if you want to request to that service you need to create your body like:

var data = '<?xml version="1.0" encoding="utf-8"?>
<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
  <soap12:Body>
    <CelsiusToFahrenheit xmlns="https://www.w3schools.com/xml/">
      <Celsius>{Your Value}</Celsius>
    </CelsiusToFahrenheit>
  </soap12:Body>
</soap12:Envelope>';

This should be the body of your request and the you need to set the fields of request headers like:

 $.ajax({
                type: "POST",
                url: "https://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit",
                data: data,
                contentType: "application/soap+xml; charset=utf-8",
                dataType: "text/xml",
                success: function(data) {
                    console.log('success'); 
                },
                error: function(data) {
                    console.log('failure');
                },
            });

After that you can make successful SOAP requests.

Answer 2

you can also create a static web method at back end of aspx page and can call back end method and insert data
use below code :

write web method at back end in aspx.cs file:
[WebMethod]

public static void AddRecord(userDetails userDetails)
{
    //SIMPLE SQL QUERY INSERT INTO
    string query = String.Format(" INSERT INTO doTable ");
    query += String.Format(" (name) ");
    query += String.Format(" VALUES ('foo'); ");

    using (OdbcConnection conn =
        new OdbcConnection(ConfigurationManager.ConnectionStrings["ConnMySQL"].ConnectionString))
    {
        using (OdbcCommand cmd =
            new OdbcCommand(query, conn))
        {
            try
            {
                cmd.Connection.Open();
                cmd.ExecuteNonQuery();
            }
            catch (Exception ex)
            {
                throw new ApplicationException("operation failed!", ex);
            }
            finally
            {
                cmd.Connection.Close();
            }
        }
    }
}




    <script src="3.2.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#activatedLink").on('click', function (e) {

                e.preventDefault();
                var userDetails = {};

                userDetails.firstName = $("#randomdirectory").val();

                var jsonData = JSON.stringify({
                    userDetails: userDetails
                });

                $.ajax({
                    type: "POST",
                    url: "pagename.aspx/AddRecord",     //here specify the name of our page where the method is present
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    error: OnErrorCall
                });

                function OnSuccess(response) {
                    var result = response.d;
                    if (result == "success") {
                        $("#msg").html("New record addded successfully  :)").css("color", "green");
                    }
                    $("#randomdirectory").val("");
                }

                function OnErrorCall(response) {
                    $("#msg").html("Error occurs  :(").css("color", "red");
                }

            });

        });

    </script>



    <form id="form1">
        <div id="Tree">
           <input type="hidden" id="randomdirectory" name="randomdirectory" value="CEF">
              <a id="activatedLink" data-id="CEF" 
               href="javascript:document.getElementById('loading').style.visibility = 'visible';
               location.href='http://...';" target="_top">
              <span>CEF</span></a>
        </div>
    </form>