我想知道是否有人能够指导我方向。 我有一个带有点击事件（运行一些服务器端代码）的asp.net按钮。 我想通过ajax和jquery调用此事件。 是否有任何方法可以做到这一点？如果是，请提供一些示例。
提前感谢。
5个回答
66
这也是jQuery在ASP.Net开发人员中的优势所在。比如说您有一个ASP按钮：
当它渲染出来时，您可以查看页面源代码，它的id不会是btnAwesome，而是$ctr001_btnAwesome或类似的东西。这使得在JavaScript中寻找它非常麻烦。于是jQuery应运而生。
$(document).ready(function() {
$("input[id$='btnAwesome']").click(function() {
// 在此执行客户端按钮单击操作。
});
});
id$= 是在进行以btnAwesome结尾的id的正则匹配。
编辑：
您是否希望在客户端从按钮单击事件调用ajax呼叫？您想呼叫什么？关于使用jQuery调用ASP.Net代码后台方法进行ajax呼叫，有许多很好的文章。
大意是创建一个标有WebMethod属性的 静态 方法。然后，您可以通过使用$.ajax来调用它。
$.ajax({
type: "POST",
url: "PageName.aspx/MethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// 在此执行一些有趣的操作。
}
});
我从这里学到了我的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
5
+1，与ASP相关的答案可能是他正在寻找的。 :) - cgp
可能有人在使用经典的ASP，但我希望相信没有人再使用它了 ;) - Gromer
我想传播使用正则表达式匹配ASP.Net控件的好消息！ - Gromer
您知道如果按钮在主页面上，这将如何工作吗？
有没有办法确定内容页的名称，比如ContentPage1.aspx？ - zSynopsis
如果在使用母版页的每个页面上都加载了JavaScript，则应该可以正常工作。 - Gromer
15
我喜欢Gromer的答案，但是它让我有一个问题：如果我在不同的控件中有多个“btnAwesome”该怎么办？
为满足这种可能性，我会采取以下步骤：
$(document).ready(function() {
$('#<%=myButton.ClientID %>').click(function() {
// Do client side button click stuff here.
});
});
在我看来，这不是一个正则表达式匹配，而是需要精确匹配文本内容。如果您正在引用特定按钮，则需要进行精确文本匹配。
但是，如果您想为每个btnAwesome执行相同的操作，请使用Gromer的答案。
- Lucas Wilson-Richter
3
1为什么不像我在答案中所做的那样直接使用id选择器：
$('#<%=myButton.ClientID %>') - user434917
好观点。我从未遇到过按钮方面的问题，但是你的观点非常有道理。 - Gromer
1Marwan：没有特别的原因。看起来你的JQuery技能比我好。已编辑。 - Lucas Wilson-Richter
10
ASP.NET Web Forms页面已经有一个处理PostBack的JavaScript方法，名为"__doPostBack"。
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
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()"来提交按钮点击到服务器。
- jacksonakj
1
由于某些原因，这个不起作用。
以下是我目前的代码：
后台代码
protected string GetLoginPostBack()
{return Page.ClientScript.GetPostBackEventReference(btnLogin,string.Empty);
}
public void lnkbtnNew_Click(object sender, EventArgs e){ // do stuff }
我的HTML<script type="text/javascript">
$(document).ready(function() {
function btnLogin_Click() {
<%= GetLoginPostBack() %>;
}
$("#<%= btnLogin.ClientID %>").click(function() {
btnLogin_Click();
});
});
</script>
<asp:Button ID="btnLogin" runat="server" Text="登录" /> - zSynopsis
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();
}
}
}
- user434917
1
谢谢。
如果我有多个按钮，有没有一种方法可以指定事件？
例如 btnSave、btnNew，然后服务器端代码后面有 btnSave_Click 和 btnNew_Click 事件。 - zSynopsis
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;
最后，我可以根据是否有消息以及该消息的值提供基于逻辑的操作。
- Kirk Liemohn
1
回顾一下，如果我将按钮从System.Web.UI.WebControls.Button更改为System.Web.UI.HtmlControls.HtmlButton，可能可以简化这个过程，但是因为它目前运行良好，所以我仍然坚持使用它。 - Kirk Liemohn
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接