How to save data into database using jquery and json in asp.net

Question

I am working on an application to store data into database using jquery & json.

My Script function:

<script type="text/javascript">
    function test() {
        $(document).ready(function () {
            var Email = document.getElementById('<%= txtEmail.ClientID %>').value;
            var Message = document.getElementById('<%= txtMessage.ClientID %>').value;
            var Name = document.getElementById('<%= txtMessage.ClientID %>').value;
            var ID=32;
            $.ajax({
                type: "POST",
                url: "Detail.aspx/InsertMethod",
                data: "{'Name':'" + Name + "'Email:'" + Email + "'Message:'" + Message + "'ID:'"+ID+"'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var returnedstring = data.d;

                }
            });

        });
    }
</script>

My design is:-

<table>
                                    <tr>
                                        <td>
                                            <label>Name</label>
                                        </td>
                                        <td>input type="text" id="txtName" runat="server" class="form-control">
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtName"
                                            Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Name." ValidationGroup="Comment">
                                        </asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>Email</label>
                                        </td>
                                        <td>asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail"
                                            Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Email." ValidationGroup="Comment">
                                        </asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"
                                                SetFocusOnError="true" ValidationExpression="^[a-z0-9_\+-]+(\.[a-z0-9_\+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,4})$"
                                                ErrorMessage="Invalid Email-Id"></asp:RegularExpressionValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>Message</label>
                                        </td>
                                        <td>
                                            <textarea class="form-control" rows="8" id="Textarea1" runat="server"></textarea>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtMessage"
                                                Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Message." ValidationGroup="Comment">
                                            </asp:RequiredFieldValidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <button class="btn-ps" type="submit" id="btnSave" validationgroup="Comment" onclick="test()">Send Message</button>
                                        </td>
                                    </tr>
                                </table>

My Web Method is:-

  [System.Web.Script.Services.ScriptMethod()]
  [System.Web.Services.WebMethod(enableSession: true)]
    public static string InsertMethod(string Name, string Email,string Message,sting ID)
    {
        int retval = 0;
        try
        {
            Entity_NewsComments objComment = new Entity_NewsComments();

            objComment.ID= ID;    
            objComment.Comment = Message;
            objComment.Email = Email;
            objComment.Name = Name;

            if ((!string.IsNullOrEmpty(objComment.Email)) && (!string.IsNullOrEmpty(objComment.Name)) && (!string.IsNullOrEmpty(objComment.Comment)))
            {
                objComment.QFlag = "I";
                objComment.Date = Convert.ToDateTime(DateTime.Now.ToString());
                objComment.Status = 0;
                //retval = new Process_NewsComments().insert(objComment);
                if (retval > 0)
                {                        

                }

            }

            return "true";
        }
        catch (Exception ex)
        {
            throw (ex);
        }
    }

But it is not working.I have put a debugger on web-method, But it is not going there.It is not showing any error also.Please help me

Answer 1

Here's another nice way to insert data into the database rather then sending string parameters. Am sending Javascript Object and on server-side receiving as a Class Object.

Server-side:

public class newComment
{
   public string ID;
   public string Comment;
   public string Email;
   public string Name;
}

---

Now add ASMX file and create webmethod as written below:

[WebMethod]
public string InsertMethod(newComment newComment)
{
  // logic here
}

Client-Side:

 function test() {
   var newComment = {};

        newComment.Comment = "comment txt";
        newComment.Email = "Email id";
        newComment.Name = "your name";
        newComment.ID = "32";

        var jsonData = JSON.stringify({
            newComment: newComment
        });
   
        $.ajax({
            type: "POST",
            url: "ajax_update.asmx/InsertMethod",
            data: jsonData,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnErrorCall
        });

        function OnSuccess(response){
         var result=response.d;
         console.log("success")
        }

        function OnErrorCall(response){
            console.lof(response);
        }

}

Answer 2

document.ready is not used by this way.. and anyway you can directly call that function. There are multiple things, I observed in your question

1. Document.ready is not required in your Test() method
2. Your controls ID and parameter which you are retrieving are not in sync.

Correct above things and try once.

Your javascript method should like below

<script type="text/javascript">
    function test() {
            var Email = $('Your Email field client ID').val();
            var Message = $('Your message field client ID %>').val();
            var Name = $('Your Name field client ID').val();
            var ID=32;
            $.ajax({
                type: "POST",
                url: "Detail.aspx/InsertMethod", //URL should be fully qualified
                data: "{'Name':'" + Name + "'Email:'" + Email + "'Message:'" + Message + "'ID:'"+ID+"'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var returnedstring = data.d;

                },
               error: function(a)
               { alert(a.responseText);}
            });
    }
</script>