从 JavaScript 调用 ASP.NET 函数? ？

我在用 ASP.NET 写一个网页。我有一些 JavaScript 代码，还有一个带有 click 事件的提交按钮。

有没有可能通过 JavaScript 的 click 事件调用我在 ASP 中创建的方法？

302304 次浏览
小开

可以使用.NET Ajax PageMethod 异步完成。

小开

微软 AJAX 库将完成这一任务。您还可以创建自己的解决方案，包括使用 AJAX 调用您自己的 aspx (基本上)脚本文件来运行。NET 函数。

我建议使用 Microsoft AJAX 库。安装并引用之后，只需在页面加载或 init 中添加一行:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

然后你可以这样做:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
Return 5
End Function

然后，你可以在你的页面上调用它:

PageClassName.Get5(javascriptCallbackFunction);

函数调用的最后一个参数必须是返回 AJAX 请求时将执行的 javascript 回调函数。

小开
最佳答案

好吧，如果你不想用 Ajax 或者其他任何方式来做，只是想要一个普通的 ASP.NET 回发，这里是你如何做到这一点(不使用任何其他库) :

不过有点棘手... :)

我。在您的代码文件中(假设您正在使用 C # 和。NET 2.0或更高版本)将下面的 Interface 添加到 Page 类中，使其看起来像

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

这应该添加(使用 Tab-Tab)这个函数到您的代码文件:

public void RaisePostBackEvent(string eventArgument) { }

在 JavaScript 中的 onclick 事件中，编写以下代码:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

这将调用代码文件中的“ RaisePostBackEvent”方法，并将“ eventArgument”作为从 JavaScript 传递过来的“ argumentString”。现在，你可以调用任何其他事件，你喜欢。

附注: 这是“下划线-下划线-doPostBack”... ... 而且，在这个序列中应该没有空格... ... 不知怎么的，大规模杀伤性武器不允许我写下划线后跟一个字符！

小开

您可能希望为您的常用方法创建一个 Web 服务。
只需在要调用的函数上添加一个 WebMethodAttribute，就可以了。
拥有一个包含所有常见内容的 Web 服务也使得系统更容易维护。

小开

__doPostBack()方法工作得很好。

另一种解决方案(非常骇客)是简单地在标记中添加一个不可见的 ASP 按钮，然后用 JavaScript 方法单击它。

<div style="display: none;">
<asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

从 JavaScript 中，使用按钮的 客户名检索对该按钮的引用，然后在其上调用 。点击()方法。

var button = document.getElementById(/* button client id */);


button.click();
小开

MicrosoftAJAX 库将实现这一点。您还可以创建自己的解决方案，包括使用 AJAX 调用您自己的 aspx (基本上)脚本文件来运行。NET 函数。

这是一个名为 AjaxPro 的库，它编写了一个名为 Michael Schwarz的 MVP。这个库不是微软写的。

我已经广泛使用了 AjaxPro，它是一个非常好的库，我建议对服务器进行简单的回调。它在使用微软版本的 Ajax 时运行良好，没有任何问题。然而，我要指出的是，由于微软让 Ajax 变得如此简单，我只会在真正需要的时候才使用它。需要大量的 JavaScript 来完成一些非常复杂的功能，这些功能是通过将其放入更新面板而从微软获得的。

小开

这个回复对我来说就像一阵微风，感谢跨浏览器:

_ _ doPostBack ()方法工作得很好。

另一种解决方案(非常骇客)是简单地在标记中添加一个不可见的 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();

引用原文

小开

如果页面上没有生成 _ _ doPostBack 函数，则需要插入一个控件来强制执行如下操作:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />
小开

如果得到对象预期错误，请将此行添加到页面加载。

ClientScript.GetPostBackEventReference(this, "");
小开

您可以使用 PageMethods.Your C# method Name来访问 JavaScript 中的 C # 方法或 VB.NET 方法。

小开

如果您希望触发服务器端事件处理程序(例如 Button 的 click 事件) ，那么对于这两种情况(即同步/异步)都非常容易。

用于触发控件的事件处理程序: 如果已经在页面上添加了 ScriptManager，则跳过步骤1。

  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();
}
}
//]]>

    1. 为控件编写服务器端事件处理程序

      Protected void btnSayHello _ Click (对象发送器，EventArgs e) { 文字 = “ Hello World...”; }

    2. 添加客户端函数以调用服务器端事件处理程序

      函数 SayHello (){ _ _ doPostBack (“ btnSayHello”，“”) ; }

将上面代码中的“ btnSayHello”替换为控件的客户端 ID。

这样，如果控件位于更新面板中，页面将不会刷新。

另一件要说的事情是: 小心使用客户端 id，因为它取决于使用 ClientIDMode 属性定义的 ID 生成策略。

小开

静态的、强类型的编程对我来说总是感觉很自然，所以一开始当我必须为我的应用程序构建基于 web 的前端时，我拒绝学习 JavaScript (更不用说 HTML 和 CSS)。只要能够编写纯 C # 代码，我愿意做任何事情来解决这个问题，比如重定向到一个页面，只是为了在 OnLoad 事件上执行和操作。

然而，你会发现，如果你要与网站工作，你必须有一个开放的头脑，并开始思考更多的网络导向(也就是说，不要试图做客户端的事情在服务器上，反之亦然)。我喜欢 ASP.NET 网络表单，并且仍然在使用它(以及 车祸) ，但是我要说的是，通过试图让事情变得更简单，并且隐藏客户端和服务器的分离，这可能会让新手感到困惑，并且实际上有时会让事情变得更加困难。

我的建议是学习一些基本的 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。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;
}
}

Global.asax

然后在 Global.asax 文件中注册 HTTP 路由，这样 ASP.NET 就会知道如何定向请求。

void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

使用 AJAX 和 Controller，您可以在任何时候异步回发到服务器以执行任何服务器端操作。这种双重打击既提供了 JavaScript 的灵活性，又提供了 C #/ASP.NET 的强大功能，让访问您的站点的人们获得了更好的整体体验。在不牺牲任何东西的情况下，你得到了两个世界的最好结果。

参考文献

小开

试试这个:

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 RaisePostBackEvent 永远不会被激活，我只做了一件事 不同的是，我在用户控件而不是 aspx 中做这件事 呼叫。

如果其他人像 Merk 一样，在面对这个问题时遇到麻烦，我有个解决办法:

当您拥有用户控件时，似乎还必须在父页中创建 PostBackEventHandler。然后可以通过直接调用用户控件的 PostBackEventHandler 来调用它。见下文:

public void RaisePostBackEvent(string _arg)
{
UserControlID.RaisePostBackEvent(_arg);
}

其中 UserControlID 是在将用户控件嵌套到标记中时在父页上给出的 ID。

注意: 您也可以直接调用属于该用户控件的方法(在这种情况下，您只需要父页面中的 RaisePostBackEvent 处理程序) :

public void RaisePostBackEvent(string _arg)
{
UserControlID.method1();
UserControlID.method2();
}
小开

我认为博客文章 如何使用 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;
}
小开

关于:

var button = document.getElementById(/* Button client id */);


button.click();

应该是这样的:

var button = document.getElementById('<%=formID.ClientID%>');

其中 formID 是. aspx 文件中的 ASP.NET 控件 ID。

小开

请试试这个:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

DdlVoucherType 是所选索引更改将调用的控件... 并且您可以将任何函数放置在此控件的所选索引更改上。

小开

实现这一点的最简单和最好的方法是使用 onmouseup() JavaScript 事件而不是 onclick()

这样，在单击后将触发 JavaScript，而且它不会干扰 ASP.OnClick()事件。

小开

我尝试这样做，以便在使用 jQuery 时运行 Asp.Net 方法。

  1. 在 jQuery 代码中执行页面重定向

    window.location = "Page.aspx?key=1";

  2. Then use a Query String in Page Load

    protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["key"] != null)
{
string key= Request.QueryString["key"];
if (key=="1")
{
// Some code
}
}
}

So no need to run an extra code


提交答案