Asp.net call C# method from Ajax

Question

I have a javascript. I want to call c# method from that script but not able to call. Here is my script

(function($){

//define the new for the plugin ans how to call it  
$.fn.contactable = function(options) {
    //set default options  
    var defaults = {
        url: 'Default.aspx/Send',
        name: 'Name',
        email: 'Email',
        message : 'Message',
        subject : 'A contactable message',
        submit : 'SEND',
        recievedMsg : 'Thank you for your message',
        notRecievedMsg : 'Sorry but your message could not be sent, try again later',
        disclaimer: 'Please feel free to get in touch, we value your feedback',
        hideOnSubmit: false

    };

    //call in the default otions
    var options = $.extend(defaults, options);
    //act upon the element that is passed into the design    
    return this.each(function() {
        //construct the form
        var this_id_prefix = '#'+this.id+' ';
        $(this).html('<div id="contactable_inner"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder"><p><label for="name">'+options.name+'<span class="red"> * </span></label><br /><input id="name" class="contact" name="name"/></p><p><label for="email">'+options.email+' <span class="red"> * </span></label><br /><input id="email" class="contact" name="email" /></p><p><label for="message">'+options.message+' <span class="red"> * </span></label><br /><textarea id="message" name="message" class="message" rows="4" cols="30" ></textarea></p><p><input class="submit" type="submit" value="'+options.submit+'"/></p><p class="disclaimer">'+options.disclaimer+'</p></div></form>');
        //show / hide function
        $(this_id_prefix+'div#contactable_inner').toggle(function() {
            $(this_id_prefix+'#overlay').css({display: 'block'});
            $(this).animate({"marginLeft": "-=5px"}, "fast"); 
            $(this_id_prefix+'#contactForm').animate({"marginLeft": "-=0px"}, "fast");
            $(this).animate({"marginLeft": "+=387px"}, "slow"); 
            $(this_id_prefix+'#contactForm').animate({"marginLeft": "+=390px"}, "slow"); 
        }, 
        function() {
            $(this_id_prefix+'#contactForm').animate({"marginLeft": "-=390px"}, "slow");
            $(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast"); 
            $(this_id_prefix+'#overlay').css({display: 'none'});
        });

        //validate the form 
        $(this_id_prefix+"#contactForm").validate({
            //set the rules for the fild names
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                message: {
                    required: true
                }
            },
            //set messages to appear inline
                messages: {
                    name: "",
                    email: "",
                    message: ""
                },          

            submitHandler: function() {
                $(this_id_prefix+'.holder').hide();
                $(this_id_prefix+'#loading').show();
$.ajax({
  type: 'POST',
  url: options.url,
  data: {subject:options.subject, name:$(this_id_prefix+'#name').val(),      email:$(this_id_prefix+'#email').val(), message:$(this_id_prefix+'#message').val()},
  success: function(data){
                    $(this_id_prefix+'#loading').css({display:'none'}); 
                    if( data == 'success') {
                        $(this_id_prefix+'#callback').show().append(options.recievedMsg);
                        if(options.hideOnSubmit == true) {
                            //hide the tab after successful submition if requested
                            $(this_id_prefix+'#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
                            $(this_id_prefix+'div#contactable_inner').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast"); 
                            $(this_id_prefix+'#overlay').css({display: 'none'});    
                        }
                    } else {
                        $(this_id_prefix+'#callback').show().append(options.notRecievedMsg);
                        setTimeout(function(){
                            $(this_id_prefix+'.holder').show();
                            $(this_id_prefix+'#callback').hide().html('');
                        },2000);
                    }
                },
error:function(){
                    $(this_id_prefix+'#loading').css({display:'none'}); 
                    $(this_id_prefix+'#callback').show().append(options.notRecievedMsg);
                                    }
});     
            }
        });
      });
    };

 })(jQuery);

My Default.aspx.cs

    [WebMethod]
    public static void Send(string subject, string name, string email, string message)        
    { 
     ..... 
     ......
    }

I set break point at starting of Send method. But I didn't get debugger at that point. How can I call Send method from my script? Is there any change in script?

Answer 1

To access asp.net method from jQuery, you have to set the EnablePageMethods property of ScriptManager to true. It's simply generates an inline JavaScript proxy for all of the appropriate methods in your page's code-behind.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"
      EnablePartialRendering="True" ScriptMode="Release">
</asp:ScriptManager>

Now access the page method using jQuery like

(function($) {
        $.ajax({
            type: "POST",
            url: "test.aspx/Send",
            data: "{subject: 'hi',name:'abc',email:'def',message:'msg'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert('success');
            }
        });
    });

Your method should be like

[WebMethod]
public static void Send(string subject, string name, string email, string message)
{

}

I get this working properly, please refer http://screencast.com/t/4VR0Gz2hOZye