javascript - 从 JavaScript 调用 ASP.NET 函数？

Question

我正在用 ASP.NET 编写网页。我有一些 JavaScript 代码，并且有一个带有点击事件的提交按钮。

是否可以使用 JavaScript 的点击事件调用我在 ASP 中创建的方法？

score 96 · Accepted Answer

好吧，如果您不想使用 Ajax 或任何其他方式来执行此操作，而只想进行正常的 ASP.NET 回发，那么您可以这样做（不使用任何其他库）：

虽然有点棘手...... :)

一世。在您的代码文件中（假设您使用 C# 和 .NET 2.0 或更高版本）将以下接口添加到您的 Page 类中，使其看起来像

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

ii. 这应该将（使用Tab- Tab）此函数添加到您的代码文件中：

public void RaisePostBackEvent(string eventArgument) { }

iii. 在 JavaScript 中的 onclick 事件中，编写以下代码：

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

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

PS：那是“下划线-下划线-doPostBack”……而且，该序列中不应该有空格……不知何故，WMD不允许我写下划线后跟一个字符！

score 60 · Accepted Answer

该__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();

score 18 · Accepted Answer

Microsoft 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 回调函数。

score 11 · Accepted Answer

11

您可以使用 .NET Ajax PageMethods 异步执行此操作。见这里或这里。

于 2008-08-06T17:23:53.027 回答

score 5 · Accepted Answer

我认为博客文章How to fetch & show SQL Server database data in ASP.NET page using Ajax (jQuery)将对您有所帮助。

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;
}

score 4 · Accepted Answer

静态的强类型编程对我来说一直很自然，所以一开始我拒绝学习 JavaScript（更不用说 HTML 和 CSS），因为我不得不为我的应用程序构建基于 Web 的前端。只要我可以编写纯 C# 代码，我会做任何事情来解决这个问题，比如重定向到一个页面只是为了对 OnLoad 事件执行和操作。

然而你会发现，如果你要与网站打交道，你必须有一个开放的心态，并开始思考更多面向网络的想法（也就是说，不要试图在服务器上做客户端的事情，反之亦然） . 我喜欢 ASP.NET 网络表单并且仍然使用它（以及MVC），但我会说，通过尝试使事情变得更简单并隐藏客户端和服务器的分离，它可能会使新手感到困惑，实际上有时会让事情变得更加困难.

我的建议是学习一些基本的 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 请求的服务，例如RESTful 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 的强大功能，为访问您网站的人们提供了更好的整体体验。在不牺牲任何东西的情况下，您可以两全其美。

参考

score 3 · Accepted Answer

Microsoft AJAX 库将完成此操作。您还可以创建自己的解决方案，包括使用 AJAX 调用您自己的 aspx（基本上）脚本文件来运行 .NET 函数。

这是一个名为 AjaxPro 的库，它是由一个名为Michael Schwarz的 MVP 编写的。这是库不是由 Microsoft 编写的。

我已经广泛使用了 AjaxPro，它是一个非常好的库，我推荐它用于简单的服务器回调。它在 Microsoft 版本的 Ajax 中运行良好，没有任何问题。但是，我要指出，由于 Microsoft 使 Ajax 变得如此简单，我只会在真正需要时才使用它。只需将其放入更新面板即可完成一些从 Microsoft 获得的非常复杂的功能，这需要大量 JavaScript。

score 2 · Accepted Answer

如果要触发服务器端事件处理程序，例如 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();
    }
}
//]]>

为您的控件编写服务器端事件处理程序

protected void btnSayHello_Click(object sender, EventArgs e) { Label1.Text = "Hello World..."; }
添加客户端函数以调用服务器端事件处理程序

函数 SayHello() { __doPostBack("btnSayHello", ""); }

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

通过这样做，如果您的控件位于更新面板内，则页面将不会刷新。那太容易了。

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

score 2 · Accepted Answer

我正在尝试实现这一点，但它无法正常工作。该页面正在回发，但我的代码没有被执行。当我调试页面时， 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();
}

score 1 · Accepted Answer

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

score 1 · Accepted Answer

如果页面上没有生成 __doPostBack 函数，则需要插入一个控件来强制它，如下所示：

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

score 1 · Accepted Answer

关于：

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

button.click();

它应该是这样的：

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

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

score 0 · Accepted Answer

感谢跨浏览器，这个回复对我来说就像轻而易举：

__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();

块引用

score 0 · Accepted Answer

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

ClientScript.GetPostBackEventReference(this, "");

score 0 · Accepted Answer

您可以使用PageMethods.Your C# method Name以便将 C# 方法或 VB.NET 方法访问到 JavaScript。

score 0 · Accepted Answer

试试这个：

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

或这个

Response.Write("<script>alert('Hello World');</script>");

使用按钮的 OnClientClick 属性调用 JavaScript 函数...

score 0 · Accepted Answer

您也可以通过在 JavaScript 代码中添加这一行来获取它：

document.getElementById('<%=btnName.ClientID%>').click()

我认为这个非常容易！

score 0 · Accepted Answer

请试试这个：

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

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

score 0 · Accepted Answer

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

这样，您将在单击后触发 JavaScript，并且它不会干扰 ASPOnClick()事件。

score 0 · Accepted Answer

我试试这个，所以我可以在使用 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
        }
    }
}

所以不需要运行额外的代码

javascript - 从 JavaScript 调用 ASP.NET 函数？

20 回答 20

Related

Reference