从JavaScript调用ASP.NET函数？

Question

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

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

Answer 1

好吧,如果您不想使用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不允许我写入下划线后跟一个角色!

Answer 2

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

Answer 3

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

Answer 4

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

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