从JavaScript调用ASP.NET函数?


140

我正在用ASP.NET编写网页。我有一些JavaScript代码,并且有一个带有click事件的Submit按钮。

是否可以使用JavaScript的click事件调用我在ASP中创建的方法?


1
您应该使用一些Ajax库,例如:Anthem
jdecuyper,

Answers:


92

好吧,如果您不想使用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:那是'underscore-underscore-doPostBack'...而且,该顺序应该没有空格... WMD某种程度上不允许我写下划线,后跟一个字符!


1
我正在尝试实现此功能,但它无法正常工作。该页面正在回发,但我的代码未执行。当我调试页面时,从未触发RaisePostBackEvent。我做不同的一件事是我在用户控件而不是aspx页面中执行此操作。
默克2011年

它给我一个错误,说对象预期。我以这样的方式称呼它:window.onbeforeunload = confirmExit; //debugger; function confirmExit() { var pageId = '<%= Page.ClientID %>'; var argumentString = 'ReleaseLock'; __doPostBack(pageId, argumentString); }
Pavitar

无论出于什么原因,我都无法将其与onkeyup事件配合使用。得了JavaScript runtime error: '__doPostBack' is undefined。我正在使用C#和ASP.NET 2.0。
Andrew T.

58

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

3
如果我想使用参数怎么办?我可以从客户端获取它并与button.Click()一起使用吗?
库比2010年

@Kubi在服务器端有争论吗?我通常要做的是序列化需要发送到服务器端的参数,并将其放在隐藏字段中。
mbillard


Click方法是否存在?
Saher Ahwal

@saher是的,但实际上是.click(小写c)(comptechdoc.org/independent/web/cgi/javamanual/javabutton.html
mbillard

18

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



5

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

4

静态的,强类型的编程对我来说一直很自然,因此,当我不得不为我的应用程序构建基于Web的前端时,我一开始拒绝学习JavaScript(更不用说HTML和CSS了)。我将采取任何措施来解决此问题,例如重定向到页面以执行OnLoad事件并对其执行操作,只要我可以编写纯C#代码即可。

但是,您会发现,如果要使用网站,则必须具有开放的思维,并开始考虑面向更多的网络(也就是说,不要尝试在服务器上做客户端操作,反之亦然) 。我喜欢ASP.NET Web表单并且仍然使用它(以及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;
    }
}

Global.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的强大功能,使访问您网站的人们获得了更好的整体体验。在不牺牲任何东西的情况下,您将两全其美。

参考资料


3

Microsoft AJAX库将完成此任务。您还可以创建自己的解决方案,其中涉及使用AJAX调用自己的aspx(基本上是这样)脚本文件来运行.NET函数。

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

我已经广泛使用了AjaxPro,它是一个非常不错的库,建议对服务器进行简单的回调。它在Microsoft版本的Ajax上运行良好,没有任何问题。但是,我要指出的是,Microsoft使Ajax变得如此容易,我只会在确实需要时才使用它。只需将JavaScript放到更新面板中,它就需要很多JavaScript来完成一些真正复杂的功能。


1
我希望这篇文章更接近上面的内容...我花了几分钟试图找出为什么在MS文档中没有提到该方法的原因:/
Dave Swersky 09年

1
@Dave这就是为什么人们应该对答案发表评论,而不要自己将评论添加为其他答案的原因。
Charles Boyung 2010年

2

如果要触发服务器端事件处理程序(例如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(object sender,EventArgs e){Label1.Text =“ Hello World ...”; }

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

      函数SayHello(){__doPostBack(“ btnSayHello”,“”); }

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

这样,如果您的控件位于更新面板中,则该页面将不会刷新。那太简单了。

要说的另一件事是:请注意客户端ID,因为它取决于您使用ClientIDMode属性定义的ID生成策略。


2

我正在尝试实现此功能,但它无法正常工作。该页面正在回发,但是我的代码未执行。当我调试页面时,RaisePostBackEvent永远不会被解雇。我做不同的一件事是我在用户控件而不是aspx页面中执行此操作。

如果还有其他人像默克,并且对此难以解决,我有一个解决方案:

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

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

其中,UserControlID是您将其嵌套在标记中时在父页面上赋予用户控件的ID。

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

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

请打开一个新问题。您发布的问题已经超过5年了。
Nico

抱歉。只要有机会,我就会这样做。
davrob01

1

您可能想为常用方法创建一个Web服务。
只需在要调用的函数上添加WebMethodAttribute即可。
具有所有常用内容的Web服务也使系统更易于维护。


1

如果未在页面上生成__doPostBack函数,则需要插入一个控件以强制执行此操作:

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

1

关于:

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

button.click();

应该是这样的:

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

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


0

如果遇到对象预期错误,请将此行添加到页面加载中。

ClientScript.GetPostBackEventReference(this, "");

0

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


0

试试这个:

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

或这个

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

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


0

您还可以通过在JavaScript代码中添加以下行来获得它:

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

我认为这很容易!


0

请尝试以下方法:

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

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


0

实现此目的的最简单,最好的方法是使用onmouseup()JavaScript事件,而不是onclick()

这样,您将在单击后触发JavaScript,并且不会干扰ASP OnClick()事件。


0

我尝试这样做,因此可以在使用jQuery时运行Asp.Net方法。

  1. 在您的jQuery代码中进行页面重定向

    window.location = "Page.aspx?key=1";
  2. 然后在页面加载中使用查询字符串

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

因此,无需运行额外的代码


0

感谢跨浏览器,此回复对我来说像是轻轻松松:

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

块引用

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.