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?

Hi , Ajay, What was the exception you got ?Could you post it here? — Joe.wang
– Joe.wang, Commented Jan 17, 2013 at 5:49
Hello @Joe.wang I didn't get any exception. My script didn't call to c# method. — Ajay
– Ajay, Commented Jan 17, 2013 at 5:52
If I encounter this kind of problem, I will simplify the code. and Remove the code which doesn't matter with Asp.net Ajax. I think it will help to find out what is the reason of not working. — Joe.wang
– Joe.wang, Commented Jan 17, 2013 at 6:50
see, try to debug your ajax call, what browser are you using?? if Chrome then do "inspect element" and console, if ff then use firebug. there has to be prblm with your arguments, you sure abt the datatypes of the argument of Send method and those you are passing through jquery ajax call??.. — Manish Mishra
– Manish Mishra, Commented Jan 17, 2013 at 7:09

3 revs · Accepted Answer · 2013-01-17 07:01:00Z

2

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

edited Jan 17, 2013 at 7:01

community wiki

3 revs
Haresh Ambaliya

Sign up to request clarification or add additional context in comments.

8 Comments

Ajay Over a year ago

Thak you for reply I have tried it. but is gives error "Only one instance of a ScriptManager can be added to the page." I already added it in master page

Ajay Over a year ago

It is not working. I added your code in my code but not working. I am not able to call method.

Haresh Ambaliya Over a year ago

If you had already ScriptManager in Master page then just put EnablePageMethods="True" into your script manager of master page.

Haresh Ambaliya Over a year ago

You method should be static.

Haresh Ambaliya Over a year ago

You are posting subject:options.subject in your data field but I did not found subject in your method. Your signature should be match.

|

Collectives™ on Stack Overflow

Asp.net call C# method from Ajax

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related