从 JavaScript 调用 ASP.NET 函数?
-
08-06-2019 - |
题
我正在 ASP.NET 中编写网页。我有一些 JavaScript 代码,并且有一个带有单击事件的提交按钮。
是否可以使用 JavaScript 的单击事件调用我在 ASP 中创建的方法?
解决方案
好吧,如果您不想使用 Ajax 或任何其他方式来执行此操作,而只想进行正常的 ASP.NET 回发,那么您可以按以下方式执行此操作(不使用任何其他库):
虽然这有点棘手......:)
我。在您的代码文件中(假设您使用的是 C# 和 .NET 2.0 或更高版本),将以下 Interface 添加到您的 Page 类中,使其看起来像
public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}
二.这应该添加(使用 标签-标签) 将此函数添加到您的代码文件中:
public void RaisePostBackEvent(string eventArgument) { }
三.在 JavaScript 的 onclick 事件中,编写以下代码:
var pageId = '<%= Page.ClientID %>';
__doPostBack(pageId, argumentString);
这将调用代码文件中的“RaisePostBackEvent”方法,并将“eventArgument”作为从 JavaScript 传递的“argumentString”。现在,您可以调用您喜欢的任何其他事件。
附:那是“下划线-下划线-doPostBack”...而且,该序列中不应该有空格......不知何故,WMD 不允许我写入下划线后跟一个字符!
其他提示
这 __doPostBack()
方法效果很好。
另一个解决方案(非常 hackish)是简单地在标记中添加一个不可见的 ASP 按钮,然后使用 JavaScript 方法单击它。
<div style="display: none;">
<asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>
从您的 JavaScript 中,使用其检索按钮的引用 客户端ID 然后调用 。点击() 方法就可以了。
var button = document.getElementById(/* button client id */);
button.click();
这 微软 AJAX 库 将实现这一点。您还可以创建自己的解决方案,其中涉及使用 AJAX 调用您自己的 aspx(基本上)脚本文件来运行 .NET 函数。
我建议使用 Microsoft AJAX 库。安装并引用后,您只需在页面加载或初始化中添加一行:
Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))
然后你可以做这样的事情:
<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
Return 5
End Function
然后,您可以在页面上调用它:
PageClassName.Get5(javascriptCallbackFunction);
函数调用的最后一个参数必须是返回 AJAX 请求时将执行的 javascript 回调函数。
静态、强类型编程对我来说一直感觉很自然,所以一开始当我必须为我的应用程序构建基于 Web 的前端时,我拒绝学习 JavaScript(更不用说 HTML 和 CSS)。只要我可以编写纯 C# 代码,我会采取任何措施来解决此问题,例如重定向到页面以对 OnLoad 事件执行操作。
然而,您会发现,如果您要使用网站,则必须有开放的心态并开始更多地面向网络进行思考(也就是说,不要尝试在服务器上执行客户端操作,反之亦然) 。我喜欢 ASP.NET Webforms 并且仍在使用它(以及 多维控制器),但我会说,通过尝试使事情变得更简单并隐藏客户端和服务器的分离,它可能会让新手感到困惑,并且实际上有时会让事情变得更加困难。
我的建议是学习一些基本的 JavaScript(如何注册事件、检索 DOM 对象、操作 CSS 等),您会发现 Web 编程更加有趣(更不用说更容易了)。很多人提到了不同的 Ajax 库,但我没有看到任何实际的 Ajax 示例,所以就这样吧。(如果您不熟悉 Ajax,那么它只是发出异步 HTTP 请求来刷新内容(或者可能在您的场景中执行服务器端操作),而无需重新加载整个页面或执行完整的回发。
客户端:
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request
xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
document.getElementById("resultText").innerHTML = xmlhttp.responseText;
}
};
</script>
就是这样。尽管名称可能会产生误导,但结果也可以是纯文本或 JSON,但不限于 XML。 jQuery 提供了一个更简单的界面来进行 Ajax 调用(以及简化其他 JavaScript 任务)。
该请求可以是 HTTP-POST 或 HTTP-GET,并且不必发送到网页,但您可以发布到侦听 HTTP 请求的任何服务,例如 宁静的 API。ASP.NET MVC 4 Web API 还可以轻松设置服务器端 Web 服务来处理请求。但很多人不知道您还可以将 API 控制器添加到 Web 表单项目中并使用它们来处理 Ajax 调用,如下所示。
服务器端:
public class DataController : ApiController
{
public HttpResponseMessage<string[]> Get()
{
HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
Repository.Get(true),
new MediaTypeHeaderValue("application/json")
);
return response;
}
}
全局.asax
然后只需在 Global.asax 文件中注册 HTTP 路由,以便 ASP.NET 知道如何定向请求。
void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}
使用 AJAX 和控制器,您可以随时异步回发到服务器以执行任何服务器端操作。这种一打二打既提供了 JavaScript 的灵活性,又提供了 C# / ASP.NET 的强大功能,为访问您网站的人们提供了更好的整体体验。无需牺牲任何东西,您就能两全其美。
参考
我认为博客文章 如何使用 Ajax (jQuery) 在 ASP.NET 页面中获取和显示 SQL Server 数据库数据 会帮助你。
JavaScript 代码
<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">
function GetCompanies() {
$("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
$.ajax({
type: "POST",
url: "Default.aspx/GetCompanies",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
});
}
function OnSuccess(data) {
var TableContent = "<table border='0'>" +
"<tr>" +
"<td>Rank</td>" +
"<td>Company Name</td>" +
"<td>Revenue</td>" +
"<td>Industry</td>" +
"</tr>";
for (var i = 0; i < data.d.length; i++) {
TableContent += "<tr>" +
"<td>"+ data.d[i].Rank +"</td>" +
"<td>"+data.d[i].CompanyName+"</td>" +
"<td>"+data.d[i].Revenue+"</td>" +
"<td>"+data.d[i].Industry+"</td>" +
"</tr>";
}
TableContent += "</table>";
$("#UpdatePanel").html(TableContent);
}
function OnError(data) {
}
</script>
ASP.NET 服务器端功能
[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
System.Threading.Thread.Sleep(5000);
List<TopCompany> allCompany = new List<TopCompany>();
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
allCompany = dc.TopCompanies.ToList();
}
return allCompany;
}
Microsoft AJAX 库将完成此任务。您还可以创建自己的解决方案,其中涉及使用 AJAX 调用您自己的 aspx(基本上)脚本文件来运行 .NET 函数。
这是一个名为 AjaxPro 的库,它是由名为 MVP 编写的 迈克尔·施瓦茨. 。该库不是由 Microsoft 编写的。
我广泛使用了 AjaxPro,它是一个非常好的库,我推荐它用于对服务器的简单回调。它与 Microsoft 版本的 Ajax 一起运行良好,没有任何问题。不过,我要指出的是,由于 Microsoft 使 Ajax 变得非常简单,我只会在真正必要时才使用它。需要大量 JavaScript 来完成一些非常复杂的功能,而这些功能只需将其放入更新面板即可从 Microsoft 获得。
如果要触发服务器端事件处理程序,例如 Button 的单击事件,这两种场景(即同步/异步)都很容易。
用于触发控件的事件处理程序:如果您已在页面上添加了 ScriptManager,则跳过步骤 1。
在页面客户端脚本部分添加以下内容
//<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]>
为您的控件编写服务器端事件处理程序
受保护的void btnsayhello_click(对象发送者,eventargs e){label1.text =“ hello world ...”;}
添加客户端函数来调用服务器端事件处理程序
函数sayhello(){__dopostback(“ btnsayhello”,“”);}
将上面代码中的“btnSayHello”替换为您的控件的客户端 ID。
通过这样做,如果您的控件位于更新面板内,则页面将不会刷新。那太容易了。
还有一点要说的是:请小心客户端 ID,因为它取决于使用 ClientIDMode 属性定义的 ID 生成策略。
我正在尝试实现这一点,但效果不佳。该页面正在发布,但我的代码没有被执行。当我调试页面时,raisepostbackevent从未被解雇。我所做的一件事是,我正在用用户控件而不是ASPX页面进行此操作。
如果其他人像默克一样,并且遇到困难,我有一个解决方案:
当您有用户控件时,似乎您还必须在父页面中创建 PostBackEventHandler。然后您可以通过直接调用用户控件的PostBackEventHandler来调用它。见下文:
public void RaisePostBackEvent(string _arg)
{
UserControlID.RaisePostBackEvent(_arg);
}
其中 UserControlID 是您在将用户控件嵌套在标记中时在父页面上为该用户控件提供的 ID。
笔记:您也可以直接调用属于该用户控件的方法(在这种情况下,您只需要父页面中的 RaisePostBackEvent 处理程序):
public void RaisePostBackEvent(string _arg)
{
UserControlID.method1();
UserControlID.method2();
}
您可能想为常用方法创建一个 Web 服务。
只需在要调用的函数上添加 WebMethodAttribute 即可。
拥有包含所有常用内容的 Web 服务也使系统更易于维护。
如果页面上没有生成 __doPostBack 函数,您需要插入一个控件来强制它,如下所示:
<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />
关于:
var button = document.getElementById(/* Button client id */);
button.click();
它应该是这样的:
var button = document.getElementById('<%=formID.ClientID%>');
其中 formID 是 .aspx 文件中的 ASP.NET 控件 ID。
如果您收到对象预期错误,请将此行添加到页面加载中。
ClientScript.GetPostBackEventReference(this, "");
您可以使用 PageMethods.Your C# method Name
为了将 C# 方法或 VB.NET 方法访问到 JavaScript 中。
尝试这个:
if(!ClientScript.IsStartupScriptRegistered("window"))
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}
或这个
Response.Write("<script>alert('Hello World');</script>");
使用按钮的 OnClientClick 属性调用 JavaScript 函数...
您还可以通过在 JavaScript 代码中添加这一行来获取它:
document.getElementById('<%=btnName.ClientID%>').click()
我觉得这个非常简单!
请尝试这个:
<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;
ddlVoucherType 是选定索引更改将调用的控件...并且您可以将任何功能放在该控件的选定索引更改上。
实现这一目标的最简单且最好的方法是使用 onmouseup()
JavaScript 事件而不是 onclick()
这样,您将在单击后触发 JavaScript,并且不会干扰 ASP OnClick()
事件。
我尝试了这个,这样我就可以在使用 jQuery 时运行 Asp.Net 方法。
在 jQuery 代码中进行页面重定向
window.location = "Page.aspx?key=1";
然后在页面加载中使用查询字符串
protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["key"] != null) { string key= Request.QueryString["key"]; if (key=="1") { // Some code } } }
所以不需要运行额外的代码
这个回复对我来说轻而易举,感谢跨浏览器:
__doPostBack() 方法效果很好。
另一个解决方案(非常 hackish)是简单地在标记中添加一个不可见的 ASP 按钮,然后使用 JavaScript 方法单击它。
<div style="display: none;">
<asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>
从 JavaScript 中,使用按钮的 ClientID 检索对按钮的引用,然后对其调用 .Click() 方法:
var button = document.getElementByID(/* button client id */);
button.Click();
块引用