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

IT技术 c# javascript asp.net
2021-02-11 14:29:48

有谁知道如何使用 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>");   
}
5个回答

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 访问,我们需要确保两件事:
第一:此方法应为“公共静态”。
第二:上面的方法应该有一个[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>
谢谢,不知道。就我而言,由于“静态”WebMethod,我无法访问我的类函数。使用 UpdatePanel (UpdateMode="Conditional") 解决了这个问题,一个 css 隐藏的 asp:Button 是 onClick 函数可以访问我的类函数。通过 JavaScript 点击按钮。为我工作。希望这是其他人的替代品:-)。
2021-03-15 14:29:48
[WebMethod] 是简称 [System.Web.Services.WebMethod]
2021-03-28 14:29:48
谢谢@Fahad,但是我收到错误:Microsoft JScript runtime error: 'PageMethods' is undefined...对我来说问题似乎是在母版页中实现。
2021-04-04 14:29:48

我怀疑您需要进行 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;
    }
}

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

在页面标记中导入 jQuery 库:

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

然后创建另一个 *.js 脚本文件(我称之为 mine 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);

显然,您将需要实现OnSuccessOnFailure方法。

要使用结果,例如在OnSuccess方法中,您可以使用 parseJSON 方法,如果结果变得更复杂(例如或返回类型数组),此方法会将其解析为对象:

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

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

是否需要页面上的ScriptManager工具来使用这个方法?使用上面选择的答案时,我的所有脚本加载似乎都有问题。
2021-03-21 14:29:48

Jayrock RPC库是在一个不错的方式familliar为C#开发人员这样一个伟大的工具。它允许您使用所需的方法创建 .NET 类,并将此类作为脚本(以迂回方式)添加到您的页面。然后,您可以创建您类型的 js 对象并像调用任何其他对象一样调用方法。

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

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