jquery asp.netbutton通过ajax点击事件

我想知道是否有人可以指引我正确的方向。 我有一个单击事件(运行一些服务器端代码)的asp.netbutton。 我想要做的就是通过ajax和jQuery来调用这个事件。 有没有办法做到这一点? 如果是这样,我会喜欢一些例子。

提前致谢

这是jQuery真正为ASP.Net开发者所照耀的地方。 比方说,你有这个ASPbutton:

当呈现,你可以看看页面的来源,其上的ID不会是btnAwesome,但$ ctr001_btnAwesome或类似的东西。 这使得在JavaScript中find一个痛苦的屁股。 inputjQuery。

 $(document).ready(function(){
   $(“input [id $ ='btnAwesome']”)。click(function(){
     / /客户端button点击这里的东西。
   });
 });

该id $ =正在做一个正则expression式匹配与btnAwesome一个id结束。

编辑:

你是否想要从客户端的button点击事件调用ajax调用? 你想打甚么? 有很多关于使用jQuery来调用ASP.Net代码后面的方法的很好的文章。

它的要点是你创build一个标有WebMethod属性的静态方法。 然后您可以使用$ .ajax使用jQuery来调用它。

 $就({
  键入:“POST”,
   url:“PageName.aspx / MethodName”,
  数据:“{}”,
   contentType:“application / json; charset = utf-8”,
   dataType:“json”,
  成功:function(味精){
     //在这里做一些有趣的事情
   }
 });

我从以下地址学习了我的WebMethod: http : //encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

有很多非常好的ASP.Net/jQuery的东西。 确保你阅读了为什么你必须在.net 3.5(也许从3.0)东西的回报中使用msg.d。

我喜欢Gromer的答案,但是这留下了一个问题:如果我在不同的控件中有多个“btnAwesome”呢?

为了迎合这种可能性,我会做以下事情:

$(document).ready(function() { $('#<%=myButton.ClientID %>').click(function() { // Do client side button click stuff here. }); }); 

这不是一个正则expression式匹配,但在我看来,正则expression式匹配不是这里所需要的。 如果你正在引用一个特定的button,你需要一个精确的文本匹配,如这样。

但是,如果你想为每一个btnAwesome做同样的动作,那么就和Gromer的回答一起吧。

ASP.NET Web表单页面已经有一个JavaScript方法来处理PostBacks,称为“__doPostBack”。

 function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } 

在您的代码文件中使用以下内容来生成执行回发的JavaScript。 使用此方法将确保使用适当的控件的ClientID。

 protected string GetLoginPostBack() { return Page.ClientScript.GetPostBackEventReference(btnLogin, string.Empty); } 

然后在ASPX页面中添加一个javascript块。

 <script language="javascript"> function btnLogin_Click() { <%= GetLoginPostBack() %>; } </script> 

最终的JavaScript将会像这样呈现。

 <script language="javascript"> function btnLogin_Click() { __doPostBack('btnLogin',''); } </script> 

现在,您可以使用JavaScript中的“btnLogin_Click()”将button点击提交给服务器。

在客户端处理button的单击事件,使用ClientID属性来获取button的ID:

 $(document).ready(function() { $("#<%=myButton.ClientID %>,#<%=muSecondButton.ClientID%>").click( function() { $.get("/myPage.aspx",{id:$(this).attr('id')},function(data) { // do something with the data return false; } }); }); 

在您的服务器页面上:

 protected void Page_Load(object sender,EventArgs e) { // check if it is an ajax request if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") { if (Request.QueryString["id"]==myButton.ClientID) { // call the click event handler of the myButton here Response.End(); } if (Request.QueryString["id"]==mySecondButton.ClientID) { // call the click event handler of the mySecondButton here Response.End(); } } } 

我发现自己想要做到这一点,我回顾了上述的答案,并采取了混合的方法。 它有点棘手,但这是我做的:

我的button已经与一个服务器端的post。 我想让它继续工作,所以我离开了“OnClick”,但添加了一个OnClientClick:

 OnClientClick="if (!OnClick_Submit()) return false;" 

以下是我的完整button元素,以防万一:

 <asp:Button UseSubmitBehavior="false" runat="server" Class="ms-ButtonHeightWidth jiveSiteSettingsSubmit" OnClientClick="if (!OnClick_Submit()) return false;" OnClick="BtnSave_Click" Text="<%$Resources:wss,multipages_okbutton_text%>" id="BtnOK" accesskey="<%$Resources:wss,okbutton_accesskey%>" Enabled="true"/> 

如果我在运行时检查HTMLbutton的onclick属性,它实际上看起来像这样:

 if (!OnClick_Submit()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$PlaceHolderMain$ctl03$RptControls$BtnOK", "", true, "", "", false, true)) 

然后在我的Javascript中,我添加了OnClick_Submit方法。 在我的情况下,我需要做一个检查,看看我是否需要显示一个对话框给用户。 如果我显示对话框,则返回false,导致事件停止处理。 如果我不显示对话框,则返回true,导致该事件继续处理,而我的回发逻辑按照以前的方式运行。

 function OnClick_Submit() { var initiallyActive = initialState.socialized && initialState.activityEnabled; var socialized = IsSocialized(); var enabled = ActivityStreamsEnabled(); var displayDialog; // Omitted the setting of displayDialog for clarity if (displayDialog) { $("#myDialog").dialog('open'); return false; } else { return true; } } 

然后在接受对话框时运行的Javascript代码中,根据用户与对话框的交互方式,执行以下操作:

 $("#myDialog").dialog('close'); __doPostBack('message', ''); 

上面的“消息”实际上根据我想发送的消息而不同。

但是等等,还有更多!

回到我的服务器端代码,我改变了OnLoad:

 protected override void OnLoad(EventArgs e) { base.OnLoad(e) if (IsPostBack) { return; } // OnLoad logic removed for clarity } 

至:

 protected override void OnLoad(EventArgs e) { base.OnLoad(e) if (IsPostBack) { switch (Request.Form["__EVENTTARGET"]) { case "message1": // We did a __doPostBack with the "message1" command provided Page.Validate(); BtnSave_Click(this, new CommandEventArgs("message1", null)); break; case "message2": // We did a __doPostBack with the "message2" command provided Page.Validate(); BtnSave_Click(this, new CommandEventArgs("message2", null)); break; } return; } // OnLoad logic removed for clarity } 

然后在BtnSave_Click方法中,我执行以下操作:

 CommandEventArgs commandEventArgs = e as CommandEventArgs; string message = (commandEventArgs == null) ? null : commandEventArgs.CommandName; 

最后,我可以根据是否有消息并基于消息的价值来提供逻辑。