如何使用 javascript 调用 ASP.NET c# 方法

Posted 2023-03-31

技术标签:

【中文标题】如何使用 javascript 调用 ASP.NET c# 方法【英文标题】：how to call an ASP.NET c# method using javascript 【发布时间】：2011-10-28 17:16:24 【问题描述】：

有谁知道如何使用 javascript 调用服务器端 c# 方法？我需要做的是如果选择取消则停止导入，或者如果选择确定则继续导入。我使用 Visual Studio 2010 和 C# 作为我的编程语言

这是我的代码：

private void AlertWithConfirmation()            
                 
    Response.Write(
        "<script type=\"text/javascript\">" +     
            "if (window.confirm('Import is currently in progress. Do you want to continue with importation? If yes choose OK, If no choose CANCEL')) " +     
                "window.alert('Imports have been cancelled!');" +     
            " else " +   
                "window.alert('Imports are still in progress');" +     
            "" +      
        "</script>");

【问题讨论】：

最简单的方法可能是使用 jQuery 或相关框架将 AJAX 请求发送回服务器：api.jquery.com/jQuery.ajax 所以在您的取消块中，创建请求并发送到服务器。如果您需要更多信息，请询问。 【参考方案1】：

PageMethod 一种更简单、更快速的 Asp.Net AJAX 方法通过释放 AJAX 的力量，我们可以轻松地提高 Web 应用程序的用户体验和性能。我喜欢 AJAX 中最好的东西之一是 PageMethod。

PageMethod 是一种我们可以在 java 脚本中公开服务器端页面方法的方法。这带来了很多机会，我们可以在不使用缓慢而烦人的回传的情况下执行大量操作。

在这篇文章中，我将展示 ScriptManager 和 PageMethod 的基本用法。在这个例子中，我正在创建一个用户注册表单，用户可以在其中使用他的电子邮件地址和密码进行注册。这是我要开发的页面的标记：

<body>
    <form id="form1" runat="server">
    <div>
        <fieldset style="width: 200px;">
            <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
        </fieldset>
        <div>
        </div>
        <asp:Button ID="btnCreateAccount" runat="server" Text="Signup"  />
    </div>
    </form>
</body>
</html>

要设置页面方法，首先你必须在你的页面上拖一个脚本管理器。

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

另外请注意我已更改EnablePageMethods="true"。这将告诉 ScriptManager 我将从客户端调用 PageMethods。

现在下一步是创建一个服务器端函数。这是我创建的函数，该函数验证用户的输入：

[WebMethod]
public static string RegisterUser(string email, string password)

    string result = "Congratulations!!! your account has been created.";
    if (email.Length == 0)//Zero length check
    
        result = "Email Address cannot be blank";
    
    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
    
        result = "Not a valid email address";
    
    else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
    
        result = "Not a valid email address";
    

    else if (password.Length == 0)
    
        result = "Password cannot be blank";
    
    else if (password.Length < 5)
    
        result = "Password cannot be less than 5 chars";
    

    return result;

要告诉脚本管理器这个方法可以通过 javascript 访问，我们需要确保两件事：首先：这个方法应该是“public static”。第二：方法上面应该有一个[WebMethod]标签，如上代码所写。

现在我已经创建了创建帐户的服务器端函数。现在我们必须从客户端调用它。以下是我们如何从客户端调用该函数：

<script type="text/javascript">
    function Signup() 
        var email = document.getElementById('<%=txtEmail.ClientID %>').value;
        var password = document.getElementById('<%=txtPassword.ClientID %>').value;

        PageMethods.RegisterUser(email, password, onSucess, onError);

        function onSucess(result) 
            alert(result);
        

        function onError(result) 
            alert('Cannot process your request at the moment, please try later.');
        
    
</script>

要调用我的服务器端方法注册用户，ScriptManager 会生成一个代理功能，该功能在 PageMethods 中可用。我的服务器端函数有两个参数，即电子邮件和密码，在这些参数之后，我们必须再提供两个函数名称，如果方法成功执行（第一个参数即 onSucess）或方法失败（第二个参数即结果）将运行它们)。

现在一切似乎都准备好了，现在我在我的注册按钮上添加了OnClientClick="Signup();return false;"。所以这里是我的aspx页面的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <fieldset style="width: 200px;">
            <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
            <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
        </fieldset>
        <div>
        </div>
        <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="Signup();return false;" />
    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    function Signup() 
        var email = document.getElementById('<%=txtEmail.ClientID %>').value;
        var password = document.getElementById('<%=txtPassword.ClientID %>').value;

        PageMethods.RegisterUser(email, password, onSucess, onError);

        function onSucess(result) 
            alert(result);
        

        function onError(result) 
            alert('Cannot process your request at the moment, please try later.');
        
    
</script>

【讨论】：

感谢@Fahad，但我收到错误：Microsoft JScript runtime error: 'PageMethods' is undefined... 对我来说，问题似乎是在母版页中实现这一点。 [WebMethod] 是 [System.Web.Services.WebMethod] 的缩写谢谢，不知道。就我而言，由于“静态”WebMethod，我无法访问我的类函数。通过 UpdatePanel (UpdateMode="Conditional") 解决了这个问题，一个 css-hidden asp:Button 是 onClick 函数可以访问我的类函数。通过 JavaScript 点击按钮。为我工作。希望这是其他人的替代品:-)。【参考方案2】：

我怀疑您需要进行 Ajax 调用。这是一个由 jQuery 创建的 Ajax 示例，可帮助您入门。该代码将用户登录到我的系统，但返回一个关于它是否成功的布尔值。请注意方法背后的代码中的 ScriptMethod 和 WebMethod 属性。

在标记中：

 var $Username = $("#txtUsername").val();
            var $Password = $("#txtPassword").val();

            //Call the approve method on the code behind
            $.ajax(
                type: "POST",
                url: "Pages/Mobile/Login.aspx/LoginUser",
                data: "'Username':'" + $Username + "', 'Password':'" + $Password + "' ", //Pass the parameter names and values
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                error: function (jqXHR, textStatus, errorThrown) 
                    alert("Error- Status: " + textStatus + " jqXHR Status: " + jqXHR.status + " jqXHR Response Text:" + jqXHR.responseText) ,
                success: function (msg) 
                    if (msg.d == true) 
                        window.location.href = "Pages/Mobile/Basic/Index.aspx";
                    
                    else 
                        //show error
                        alert('login failed');
                    
                
            );

在代码后面：

/// <summary>
/// Logs in the user
/// </summary>
/// <param name="Username">The username</param>
/// <param name="Password">The password</param>
/// <returns>true if login successful</returns>
[WebMethod, ScriptMethod]
public static bool LoginUser( string Username, string Password )

    try
    
        StaticStore.CurrentUser = new User( Username, Password );

        //check the login details were correct
        if ( StaticStore.CurrentUser.IsAuthentiacted )
        
            //change the status to logged in
            StaticStore.CurrentUser.LoginStatus = Objects.Enums.LoginStatus.LoggedIn;

            //Store the user ID in the list of active users
            ( HttpContext.Current.Application[ SessionKeys.ActiveUsers ] as Dictionary<string, int> )[ HttpContext.Current.Session.SessionID ] = StaticStore.CurrentUser.UserID;

            return true;
        
        else
        
            return false;
        
    
    catch ( Exception ex )
    
        return false;

【讨论】：

【参考方案3】：

我将继续提供一个使用 jQuery 的解决方案，这意味着如果您还没有导入该库，您将需要...

在页面标记中导入 jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

然后创建另一个 *.js 脚本文件（我称之为 ExecutePageMethod，因为这是它要公开的唯一方法）并导入它：

<script type="text/javascript" src="/ExecutePageMethod.js" ></script>

在新添加的文件中，添加以下代码（我记得是从其他地方提取的，所以其他人确实值得称赞）：

function ExecutePageMethod(page, fn, paramArray, successFn, errorFn) 
    var paramList = '';
    if (paramArray.length > 0) 
        for (var i = 0; i < paramArray.length; i += 2) 
            if (paramList.length > 0) paramList += ',';
            paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
        
    
    paramList = '' + paramList + '';
    $.ajax(
        type: "POST",
        url: page + "/" + fn,
        contentType: "application/json; charset=utf-8",
        data: paramList,
        dataType: "json",
        success: successFn,
        error: errorFn
    );

然后您需要使用适当的属性来扩充您的 .NET 页面方法，例如：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string MyMethod()

    return "Yay!";

现在，在您的页面标记内、script 块内或从另一个脚本文件中，您可以调用该方法，如下所示：

ExecutePageMethod("PageName.aspx", "MyMethod", [], OnSuccess, OnFailure);

显然您需要实现OnSuccess 和OnFailure 方法。

要使用结果，比如在OnSuccess 方法中，您可以使用 parseJSON 方法，如果结果变得更复杂（例如，在这种情况下或返回类型数组），此方法将解析它进入对象：

function OnSuccess(result) 
    var parsedResult = jQuery.parseJSON(result.d);

这个ExecutePageMethod 代码特别有用，因为它可重复使用，因此不必为您可能要执行的每个页面方法管理$.ajax 调用，您只需将页面、方法名称和参数传递给这个方法。

【讨论】：

是否需要页面上的ScriptManager工具才能使用此方法？使用上面选择的答案时，我的所有脚本加载似乎都有问题。【参考方案4】：

Jayrock RPC library 是一个很好的工具，可以以 C# 开发人员非常熟悉的方式执行此操作。它允许您使用所需的方法创建一个 .NET 类，并将该类作为脚本（以一种迂回的方式）添加到您的页面中。然后，您可以创建一个您的类型的 js 对象并像调用任何其他对象一样调用方法。

它本质上隐藏了 ajax 实现并以熟悉的格式呈现 RPC。请注意，最好的选择确实是使用 ASP.NET MVC 并使用 jQuery ajax 调用操作方法 - 更简洁，更少混乱！

【讨论】：

【参考方案5】：

有多种选择。您可以根据自己的目的使用WebMethod 属性。

【讨论】：

以上是关于如何使用 javascript 调用 ASP.NET c# 方法的主要内容，如果未能解决你的问题，请参考以下文章

win7+iis7.5+asp.net下 CS0016: 未能写入输出文件“c:WindowsMicrosoft.NETFrameworkv2.0.50727Temporary ASP.NE

短信接口调用——阿里大于API开发心得

在 asp.net 和 Join 语句中连接到 Access 数据库

如何有效地将巨大的 sql 表加载到 asp.net 应用程序内存中以进一步迭代它？

ASP.NET 核心标识。使用 ApplicationDbContext 和 UserManager。他们是不是共享上下文？

如何使用 QT/python 从 Javascript 调用 C++ 函数？