2013-01-17 37 views
0

我有一个javascript。我想从该脚本调用c#方法,但无法调用。 这里是我的脚本Asp.net从Ajax调用C#方法

(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); 

Default.aspx.cs

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

我设定的出发断点发送方法。但是那时我没有得到调试器。我怎样才能拨打从我的脚本发送方法?脚本中是否有任何更改?

+0

嗨,阿杰,你有什么例外吗?你可以在这里发布吗? –

+0

Hello @ Joe.wang我没有得到任何异常。我的脚本没有调用c#方法。 –

+0

如果我遇到这样的问题,我会简化代码。并删除与Asp.net Ajax无关的代码。我认为这将有助于找出不工作的原因。 –

回答

2

要从jQuery访问asp.net方法,必须将ScriptManager的EnablePageMethods属性设置为true。它只是为页面代码隐藏中的所有适当方法生成内嵌JavaScript代理。

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

现在访问使用jQuery的页面方法类似

(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'); 
      } 
     }); 
    }); 

你的方法应该是这样

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

} 

我得到这个工作正常,请参阅http://screencast.com/t/4VR0Gz2hOZye

+0

Thak你的答复我已经试过了。但出现错误“只能将一个ScriptManager的一个实例添加到页面中。”我已经将它添加到主页面 –

+0

它不起作用。我在代码中添加了您的代码,但无法正常工作。我无法调用方法。 –

+0

如果您在Master页面中已经有ScriptManager,那么只需将EnablePageMethods =“True”放入主页面的脚本管理器。 –