call server side method using ajax in asp.net

Question

I am trying to insert data into database by using jquery dialog form.

Here's my jquery:

    $(function () {
    $("#dialogregister").dialog({
    autoOpen: false,
    width: 800,
    height: 450,
    modal: true,
    show: 'blind',
    buttons: {
        'Register': function (event) {
            var fname = $("#txt_firstName").val();
            var midname = $("#txt_middleName").val();
            var lname = $("#txt_lastName").val();
            var gender = $('input:radio[name=gender]:checked').val();
            var address = $("#txt_Address").val();
            var ph = $("#txt_Phone").val();
            var email = $("#txt_Email").val();

            $.ajax({
                type: 'POST',
                url: '../Main.aspx/AddNewItem',
                data: '{"fname":"' + fname + '", "midname":"' + midname + '", "lname":"' + lname + '", "gender":"' + gender + '", "address":"' + address + '", "phone":"' + ph + '", "email":"' + email + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d) {
                        alert("Successfully added new item");
                    }
                },
                error: function () {
                    alert("Error! Try again...");
                }
            });
            $(this).dialog('close');
        },

        'Cancel': function () {
            $(this).dialog('close');
        }
    },
});

$("#signup").click(function (event) {
    event.preventDefault();
    $("#dialogregister").dialog("open");

});
});

This should be called when I click 'Register' button but I am getting the error message.

     public static void AddNewItem(string fname, string midname, string lname, string gender, string address, string phone, string email)
         {
            Person person = new Person() { Fname=fname, Mname=midname, Lname=lname, Gender=gender, Address=address, Phone=phone, Email=email };

    //add your logic to insert item into database
         Utility ut = new Utility();
         SqlConnection con = ut.openConnection();
         string sqlStatement = "insert into tbl_Users values('" + fname + "','" + midname + "','" + lname + "','" + 
                                                            gender + "','" + address + "','" + phone + "','" + email + "');";
         SqlCommand cmd = new SqlCommand(sqlStatement, con);
         cmd.ExecuteNonQuery();
    }
    }

    public class Person
    {
        public string Fname{ get; set; }
        public string Mname { get; set; }
        public string Lname { get; set; } 
        public string Gender { get; set; }
        public string Address { get; set; }
        public string Phone{ get; set; }
        public string Email { get; set; }
    }

Am I doing it wrong? How can I pass values from dialog to the server side method?

Answer 1

you can pass the data to the server as JSON

var fname = $("#txt_firstName").val();
var midname = $("#txt_middleName").val();
var lname = $("#txt_lastName").val();
var gender = $('input:radio[name=gender]:checked').val();
var address = $("#txt_Address").val();
var ph = $("#txt_Phone").val();
var email = $("#txt_Email").val();

var postData = {
     Fname:fname,
      Mname : midname,
     Lname :lname ,
      Gender :gender ,
     Address :address ,
     Phone:ph ,
     Email :email 

};

$.ajax({
  type: 'POST',
  url: '../Main.aspx/AddNewItem',
  contentType:'application/json',
  data: JSON.stringify(postData),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg) {
       if (msg.d) {
                alert("Successfully added new item");
             }
   },

Answer 2

It could be lots of things, but 2 things that jump out:

1. Mark your AddNewItem() method with the [WebMethod] attribute (using System.Web.Services).

2. Perhaps your url is bad? Try "Main.aspx/...". Of course, this depends on your directory structure, but I'm assuming that your web method code was in the same file as the code behind for the page serving the javascript.