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

Posted 2023-05-08

【中文标题】Jquery asp.net 按钮单击事件通过 ajax

【英文标题】：Jquery asp.net Button Click Event via ajax

【发布时间】：2010-10-25 17:45:18

【问题描述】：

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

提前致谢

【参考方案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。

【讨论】：

+1，ASP 相关的答案可能就是他要找的答案。 :)

可以，但我想相信没有人使用经典的 ASP ;)

我想传播关于使用正则表达式匹配 ASP.Net 控件的好消息！

如果按钮位于母版页上，您知道这将如何工作吗？有没有办法确定ContentPage1.aspx等内容页名？

如果在使用母版页的每个页面上都加载了 javascript，它应该可以正常工作。

【参考方案2】：

我喜欢 Gromer 的回答，但它给我留下了一个问题：如果我在不同的控件中有多个 'btnAwesome' 怎么办？

为了满足这种可能性，我会做以下事情：

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

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

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

【讨论】：

为什么不像我在回答中那样直接使用 id 选择器：$('#')

好点。我从来没有遇到过按钮，但你的观点非常有效。

Marwan：没有特别的原因。看起来你的 JQuery-fu 比我的好。已编辑。

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

【讨论】：

由于某种原因这不起作用。到目前为止，这是我所拥有的：受保护字符串 GetLoginPostBack() return Page.ClientScript.GetPostBackEventReference(btnLogin,string.Empty); 背后的代码 public void lnkbtnNew_Click(object sender, EventArgs e) // 做事 我的 html

【参考方案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();
  
 

【讨论】：

谢谢。如果我有多个按钮，有没有办法指定事件？即 btnSave、btnNew 和后面的服务器端代码有 btnSave_Click 和 btnNew_Click 事件。

【参考方案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;

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

【讨论】：

回想起来，如果我将按钮从 System.Web.UI.WebControls.Button 更改为 System.Web.UI.HtmlControls.HtmlButton，我可能会简化一些，但我坚持暂时使用它，因为它工作正常。