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

how to call an ASP.NET c# method using javascript

本文关键字：方法 javascript NET ASP 何调用 调用      更新时间：2023-09-26

有人知道如何使用javascript调用服务器端c#方法吗?我需要做的是停止导入，如果选择取消或继续导入，如果选择ok。我使用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>");   
}

PageMethod是一种更简单、更快速的Asp。净AJAX通过释放AJAX的强大功能，我们可以轻松地改善用户体验和web应用程序的性能。我最喜欢的AJAX特性之一是PageMethod。

PageMethod是一种可以在java脚本中公开服务器端页面方法的方法。这带来了很多机会，我们可以执行很多操作，而不用使用缓慢和讨厌的回发。

在这篇文章中，我展示了ScriptManager和PageMethod的基本用法。在这个例子中，我创建了一个User Registration表单，用户可以在其中注册他的电子邮件地址和密码。下面是我要开发的页面的标记: 
<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>

要调用我的服务器端方法Register user, ScriptManager生成一个代理函数，该函数在PageMethods中可用。
我的服务器端函数有两个参数，即电子邮件和密码，在这些参数之后，我们必须给出两个函数名，如果方法成功执行(第一个参数即onsuccess)或方法失败(第二个参数即result)，它们将运行。

现在一切似乎都准备好了，现在我已经在我的注册按钮上添加了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>

我认为您需要执行一个Ajax调用。下面是一个由jQuery调用的Ajax示例。代码将用户登录到我的系统，但返回一个bool值，以确定是否成功。注意方法后面代码中的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');
                    }
                }
            });

In Code Behind:

/// <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脚本文件(我叫我的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 page方法，如:

[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调用，你只需要将页面、方法名和参数传递给这个方法。

对于c#开发人员来说，Jayrock RPC库是一个很好的工具，可以以一种熟悉的方式完成此工作。它允许您使用所需的方法创建一个. net类，并将该类作为脚本(以一种迂回的方式)添加到页面中。然后，你可以创建一个你自己的类型的js对象，并像调用其他对象一样调用方法。

它实质上隐藏了ajax实现，并以一种熟悉的格式呈现RPC。请注意，最好的选择确实是使用ASP。. NET MVC和使用jQuery ajax调用动作方法-更简洁，更省事!

有几个选项。你可以使用WebMethod属性。

相关文章：