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

Question

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

提前致谢

Answer 1

这就是 jQuery 真正为 ASP.Net 开发人员带来光芒的地方。假设您有这个 ASP 按钮：

当它呈现时，你可以查看页面的来源，它的 id 不会是 btnAwesome，而是 $ctr001_btnAwesome 或类似的东西。这使得在 javascript 中查找变得很痛苦。输入 jQuery。

$(文档).ready(函数() { $("input[id$='btnAwesome']").click(function() { // 做客户端按钮点击这里的东西。 }); });

id$= 正在对以 btnAwesome 结尾的 id 进行正则表达式匹配。

编辑：

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

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

$.ajax({ 类型：“发布”， url: "PageName.aspx/MethodName", 数据： ”{}”， contentType: "应用程序/json; charset=utf-8", 数据类型：“json”， 成功：功能（味精）{ // 在这里做一些有趣的事情。 } });

我从 http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/ 学到了我的 WebMethod 东西

那里有很多非常好的 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 表单页面已经有一个名为“__doPostBack”的用于处理 PostBacks 的 JavaScript 方法。

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

Answer 4

在客户端处理按钮的点击事件，使用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();
  }
 }
}

Answer 5

我发现自己想要这样做，我查看了上述答案并采用了混合方法。这有点棘手，但这是我所做的：

我的按钮已经在服务器端发布。我想让它继续工作，所以我将“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;

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