insert data in database with jqueryajax

Question

i have a form with c#(.net4) code behind . in this form user fill his specification and submit.
i wanna use ajax or post method in jquery for prevention of blink.i write flowing code. "success" function execute but it does not work and any record insert in database;i execute executemember method separately.it works without problem but it does not work with jquery ajax.where is problem?

[WebMethod]
    public static string executeinsert(string name ,string family , string username,string password , string  email,string tel, string codemeli)
    {   string constring = "data source=.;database=site;integrated security=true;";

        SqlConnection con = new SqlConnection(constring);
        SqlCommand com = new SqlCommand("insertmember", con);
        com.CommandType = CommandType.StoredProcedure;
        com.Parameters.Add(new SqlParameter("@username", SqlDbType.NVarChar, 250));
        com.Parameters["@username"].Value = username;
        com.Parameters.Add(new SqlParameter("@name", SqlDbType.NVarChar, 150));
        com.Parameters["@name"].Value = name;
        com.Parameters.Add(new SqlParameter("@password", SqlDbType.NVarChar, 50));
        com.Parameters["@password"].Value = password;
        com.Parameters.Add(new SqlParameter("@family", SqlDbType.NVarChar, 250));
        com.Parameters["@family"].Value = family;
        com.Parameters.Add(new SqlParameter("@email", SqlDbType.NVarChar, 50));
        com.Parameters["@email"].Value = email;
        com.Parameters.Add(new SqlParameter("@codemeli", SqlDbType.NChar, 10));
        com.Parameters["@codemeli"].Value = codemeli;
        com.Parameters.Add(new SqlParameter("@tel", SqlDbType.NChar, 12));
        com.Parameters["@tel"].Value = tel;
        con.Open();
        com.ExecuteNonQuery();
        con.Close();
        return "success";
        }

and its my jquery code

 <script type="text/javascript">
    $(document).ready(
    function () {
        $("#Button1").click(
            function () {
                var username, family, name, email, tel, codemeli, password;
                username = $('#<%=TextBox1.ClientID%>').val();
                name = $('#<%=TextBox2.ClientID%>').val();
                family = $('#<%=TextBox3.ClientID%>').val();
                password = $('#<%=TextBox4.ClientID%>').val();
                email = $('#<%=TextBox5.ClientID%>').val();
                tel = $('#<%=TextBox6.ClientID%>').val();
                codemeli = $('#<%=TextBox7.ClientID%>').val();

                $.ajax(
                {
                    type: "POST",
                    url: "WebApplication20.aspx/executeinsert",
                    data: "{'username':'username','name':name,
                            'family':family,'password':password,
                            'email':email,'tel':tel,
                            'codemeli':codemeli}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: true,
                    cache: false,
                    success: function(msg) {
                        alert(msg);
                    },
                    error: function (x, e) {
                        alert("The call to the server side failed. " 
                              + x.responseText);
                    }
                }
            );
        }
     )
 })
</script>

thank

What are you trying to achieve with the `data:"{'user...` line? Is it to pass a json string or a set of key/value pairs? — Musa, Jul 06 '12 at 06:13
I'm not sure that it is the problem, but you pointed data type as JSON put provide string to the data attribute. — Samich, Jul 06 '12 at 06:21
I see now it is an attempt at json, but it doesn't look like the WebMethod consumes json — Musa, Jul 06 '12 at 06:32
Make sure your page method is being called and your json is correct. Please go through [this](http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/) — Nilesh Thakkar, Jul 11 '12 at 09:55

score 1 · Answer 1 · edited Jul 06 '12 at 07:59

1

I believe that your JSON doesn't have the correct format

Try validating your json here.

You can see that your json is not valid.

edited Jul 06 '12 at 07:59

Liquid

1,871
1
17
32

answered Jul 06 '12 at 06:26

Sllix

606
9
28

score 1 · Accepted Answer · answered Jul 06 '12 at 06:28

Check this out:

$(document).ready(function () {
    $("#Button1").click(function () {
        var userData = new Object();

        userData.username = $('#<%=TextBox1.ClientID%>').val();
        userData.name = $('#<%=TextBox2.ClientID%>').val();
        userData.family = $('#<%=TextBox3.ClientID%>').val();
        userData.password = $('#<%=TextBox4.ClientID%>').val();
        userData.email = $('#<%=TextBox5.ClientID%>').val();
        userData.tel = $('#<%=TextBox6.ClientID%>').val();
        userData.codemeli = $('#<%=TextBox7.ClientID%>').val();

        $.ajax({
            type: "POST",
            url: "WebApplication20.aspx/executeinsert",
            data: userData,
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (msg) {
                alert(msg);
            },
            error: function (x, e) {
                alert("The call to the server side failed. " + x.responseText);
            }
        });
    });
});

P.S. Try to debug and put breakpoint in the webmethod if it calls at all.

thank for reply .i do it .i put breakpoint and i find that webmethod dose not call .what is problem — quantum62, Jul 06 '12 at 06:46
Check this out: http://stackoverflow.com/questions/6928533/calling-a-webmethod-with-jquery-in-asp-net-webforms — Samich, Jul 06 '12 at 06:51

Asif Mushtaq · Answer 3 · 2012-07-06T06:26:06.950

0

The json is not in right format 'name':name is not enclosed in the ', which are string.

data: "{'username' : 'username',   'name':name,'family':family,'password':password,'email':email,'tel':tel,'codemeli':codemeli    }",

it should be

   data: "{'username' : 'username', 'name':'name', 'family':'family', 'password':'password', 'email':'email', 'tel':'tel', 'codemeli':'codemeli'}",

edited Jul 06 '12 at 06:26

answered Jul 06 '12 at 06:14

Asif Mushtaq

13,010
3
33
42

I'm not sure, but even in the first case it should add record to DB with dummy data like: username, name, etc.. Is I understood no data were added at all. I can be mistaken. – Samich Jul 06 '12 at 06:18
you are right any record add to DB.i change data section but remain problem still. i forgot to say alert(msg) return null – quantum62 Jul 06 '12 at 06:31
Regarding the alert message as null, you need to return something. – Raab Jul 06 '12 at 06:38

insert data in database with jqueryajax

3 Answers3