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

时间:2009-05-13 02:10:12

标签: jquery asp.net ajax events

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

提前致谢

5 个答案:

答案 0 :(得分:64)

这是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的原因。

答案 1 :(得分:13)

我喜欢Gromer的答案,但它给我留下了一个问题:如果我在不同的控件中有多个'btnAwesome'会怎么样?

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

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

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

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

答案 2 :(得分:10)

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()”将按钮单击提交给服务器。

答案 3 :(得分:4)

在客户端处理按钮的click事件,使用ClientID属性获取按钮的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();
  }
 }
}

答案 4 :(得分:3)

我发现自己想要这样做,我回顾了上面的答案,并采用了混合方法。它有点棘手,但这就是我所做的:

我的按钮已经用于服务器端帖子。我想让它继续工作,所以我离开了“OnClick”,但添加了一个OnClientClick:

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

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

<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"/>

如果我在运行时检查HTML按钮的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;

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