How do I insert a database record from an onclick event in JavaScript?

Reply

cms9651

Member

389 Points

965 Posts

How do I insert a database record from an onclick event in JavaScript?

Jun 22, 2017 11:42 AM|cms9651|LINK

Hi all, I need your appreciated help.

How do I insert database record (MySQL) in C# when JavaScript onclick event is triggered on the HTML link ?

My code below I don't have error but the record not inserted.

On the browser in HTML view of asp classic page the value of :

<a onclick="(<%=(rds.fields("foo").Value)%>)" href=".... >

is correct :

<a onclick="DataPrinted(CEF)" href=".... >

Thank you in advance for any help.

Asp classic and javascript page :

<script type="text/javascript">

    function DataPrinted(IDNumber) {

        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", "UpdateDataPrintStatus.aspx", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("ID=" + IDNumber);
    }

</script>

<a onclick="DataPrinted(<%=(rds.fields("foo").Value)%>)" 
   href="javascript:document.getElementById('loading').style.visibility = 'visible';
   location.href='<%=rds.fields("link")%>';" target="_top" >
<%=rds.fields("foo")%>
<span>Test</span></a>

UpdateDataPrintStatus.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
            string IDNumber = Request.Form["ID"].ToString();

            string query = String.Format(" INSERT INTO (IDNumber) ");
            query += String.Format(" VALUES ( ? ); ");

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

I would greatly appreciate any help you can give me in working this problem.

Cheers,
Chevy Mark Sunderland

Reply

bbcompent1

All-Star

35169 Points

9930 Posts

Moderator

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 22, 2017 01:54 PM|bbcompent1|LINK

Is the web control you are using have AutoPostback = "True" set? If not, that's why most likely.

Mark as answer posts that helped you.

Reply

Zhi Lv - MSF...

All-Star

45479 Points

7008 Posts

Microsoft

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 23, 2017 05:52 AM|Zhi Lv - MSFT|LINK

Hi cms9651,

I suggest you could try to use the following code to redirect to the UpdateDataPrintStatus page:

            <a href="UpdateDataPrintStatus.aspx?ID='<%=rds.fields("link")%>';" target="_top">
                <%=rds.fields("foo")%>
                <span>Test</span></a>

Then in the UpdateDataPrintStatus page, using the following code to get the parameter:

if (!IsPostBack)
            {
                string IDNumber = Request.QueryString["ID"].ToString();
                //insert data into database.
            }

Best regards,
Dillion

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

cms9651

Member

389 Points

965 Posts

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 28, 2017 09:17 AM|cms9651|LINK

Thank you for replies.

I have tried with Ajax and jquery without success.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
    $('name').click(function () {

        var book_id = $(this).parent().data('id');

        $.ajax
        ({
            url: 'UpdateDataPrintStatus.aspx',
            data: { "ID": book_id },
            type: 'post',
            success: function (result) {
                $('.modal-box').text(result).fadeIn(700, function () {
                    setTimeout(function () {
                        $('.modal-box').fadeOut();
                    }, 2000);
                });
            }
        });
    });					
</script>



<a id="name" data-id="<%=rds.fields.Item("foo").Value%>" 
   href="javascript:document.getElementById('loading').style.visibility = 'visible';
      location.href='<%=rds.fields("link")%>';" target="_top">
         <%=rds.fields("link")%>
            <span>test</span>
</a>

UpdateDataPrintStatus.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string IDNumber = Request.Form["ID"].ToString();

                string query = String.Format(" INSERT INTO tbl ");
                query += String.Format(" (name) VALUES (?); ");

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

        }
    }

I would greatly appreciate any help you can give me in working this problem.

Cheers,
Chevy Mark Sunderland

Reply

sakthivel053...

Member

260 Points

71 Posts

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 28, 2017 06:18 PM|sakthivel0531|LINK

You should NOT write the Post method code in Page Load event. You need to create a web method for this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
    $('name').click(function () {

        var book_id = $(this).parent().data('id');

        $.ajax
        ({
            url: 'UpdateDataPrintStatus.aspx/AddRecord',
            data: { "ID": book_id },
            type: 'post',
            success: function (result) {
                $('.modal-box').text(result).fadeIn(700, function () {
                    setTimeout(function () {
                        $('.modal-box').fadeOut();
                    }, 2000);
                });
            }
        });
    });					
</script>



<a id="name" data-id="<%=rds.fields.Item("foo").Value%>" 
   href="javascript:document.getElementById('loading').style.visibility = 'visible';
      location.href='<%=rds.fields("link")%>';" target="_top">
         <%=rds.fields("link")%>
            <span>test</span>
</a>

UpdateDataPrintStatus.aspx.cs

using System.Web.Services;
  
 protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public void AddRecord(string ID)
    {
            string IDNumber = Request.Form["ID"].ToString();

                string query = String.Format(" INSERT INTO tbl ");
                query += String.Format(" (name) VALUES (?); ");

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


    }

Reply

cms9651

Member

389 Points

965 Posts

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 29, 2017 10:42 AM|cms9651|LINK

Hi, thank ou for reply really appreciated.

Unfortunately, the records are not added, but on HTML webpage index.asp the value of data-id is correct :

           <a id="name" data-id="CEF" 
              href="javascript:document.getElementById('loading').style.visibility = 'visible';
             location.href='http://...';" target="_top">
             http://...
            <span>test</span>
           </a>

And if try with this vaue in Ajax the record is not added :

data: { "ID": 'foo' },

index.asp

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

    $('name').click(function () {

        var book_id = $(this).parent().data('id');

        $.ajax
        ({
            url: 'UpdateDataPrintStatus.aspx/AddRecord',
            data: { "ID": book_id },
            type: 'POST',
            success: function (result) {
                $('.modal-box').text(result).fadeIn(700, function () {
                    setTimeout(function () {
                        $('.modal-box').fadeOut();
                    }, 2000);
                });
            }
        });
    });

</script>

<form id="form1">
    <div id="Tree" style="margin-left: 100px; display: none;">

        <div class="example">
           <a id="name" data-id="<%=rds.fields.Item("foo").Value%>" 
              href="javascript:document.getElementById('loading').style.visibility = 'visible';
             location.href='<%=rds.fields("link")%>';" target="_top">
             <%=rds.fields("link")%>
            <span>test</span>
         </a> 
    </div>

UpdateDataPrintStatus.aspx.cs

using System.Web.Services;
  
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public void AddRecord(string ID)
    {
            string IDNumber = Request.Form["ID"].ToString();

                string query = String.Format(" INSERT INTO tbl ");
                query += String.Format(" (name) VALUES (?); ");

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

I would greatly appreciate any help you can give me in working this problem.

Cheers,
Chevy Mark Sunderland

Reply

Zhi Lv - MSF...

All-Star

45479 Points

7008 Posts

Microsoft

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 30, 2017 06:12 AM|Zhi Lv - MSFT|LINK

Hi cms9651,

cms9651
[WebMethod] public void AddRecord(string ID)

Please check your code, as far as I know, when we use JQuery Ajax to call the WebMethod, the method should be static.

You could refer to the following code:

            $("#btnCallWP").click(function () {
                $.ajax({
                    type: "POST",
                    url: "JQueryWebMethod.aspx/MyTestMethod",
                    data: '{name: "' + "AAA" + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });
                return false;
            });

Code in WebMethod:

        [System.Web.Services.WebMethod]
        public static string MyTestMethod(string name)
        {          
            string str = string.Format("{0} button is click!", name);
            return str;
        }

Note, if the WebMethod is static, we cannot use Request.Form method, we could transfer data via the parameters.

Best regards,
Dillion

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

Reply

cms9651

Member

389 Points

965 Posts

Re: How do I insert a database record from an onclick event in JavaScript?

Jun 30, 2017 08:46 AM|cms9651|LINK

Thank you, I have try your code but I don't have change in aspx,cs page, I'm sorry.

I would greatly appreciate any help you can give me in working this problem.

Cheers,
Chevy Mark Sunderland

How do I insert a database record from an onclick event in JavaScript? [Answered]RSS

7 replies

Shortcuts

Related Links

How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

Re: How do I insert a database record from an onclick event in JavaScript?

cms9651

Re: How do I insert a database record from an onclick event in JavaScript?