Jquery asp.net按钮单击事件通过ajax

Question

我想知道是否有人能指出我正确的方向.我有一个带有点击事件的asp.net按钮(运行一些服务器端代码).我想做的是通过ajax和jquery调用此事件.有没有办法做到这一点？如果是这样,我会喜欢一些例子.

提前致谢

Answer 1

这是jQuery真正为ASP.Net开发人员所瞩目的地方.让我们说你有这个ASP按钮:

当渲染时,你可以查看页面的来源,它上面的id不会是btnAwesome,而是$ ctr001_btnAwesome或类似的东西.这使得在javascript中找到屁股很痛苦.输入jQuery.

$(document).ready(function() {
  $("input[id$='btnAwesome']").click(function() {
    // Do client side button click stuff here.
  });
});

id $ =正在使用btnAwesome进行id ENDING的正则表达式匹配.

编辑:

您是否希望从客户端的按钮单击事件调用ajax调用？你想叫什么？关于使用jQuery对方法后面的ASP.Net代码进行ajax调用,有很多非常好的文章.

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

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

我从以下网站学到了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的原因.

Answer 2

我喜欢Gromer的答案,但它给我一个问题:如果我在不同的控件中有多个'btnAwesome'怎么办？

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

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

这不是正则表达式匹配,但在我看来,正则表达式匹配不是这里需要的.如果您引用特定按钮,则需要精确的文本匹配,例如此类.

但是,如果您想为每个btnAwesome执行相同的操作,那么请使用Gromer的答案.

Answer 3

ASP.NET Web表单页面已经有一个JavaScript方法来处理名为"__doPostBack"的PostBacks.

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

在代码文件中使用以下代码生成执行PostBack的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()"将按钮单击提交给服务器.