web-dev-qa-db-ja.com

JavaScriptを使用してASP.NET c＃メソッドを呼び出す方法

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>");   
}
c#javascriptasp.net
32
mikespiteri

PageMethod Asp.Netのより簡単で高速なアプローチAJAX AJAXのパワーを解き放つことで、Webアプリケーションのユーザーエクスペリエンスとパフォーマンスを簡単に改善できます。 AJAXで私が気に入っている最高のものの1つは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"_が変更されたことにも注意してください。
これは、クライアント側からPageMethodsを呼び出すことをScriptManagerに通知します。

次のステップは、サーバー側の関数を作成することです。
これは私が作成した関数です。この関数はユーザーの入力を検証します。

_[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を介してアクセス可能であることをスクリプトマネージャーに伝えるには、2つのことを確認する必要があります。
最初：このメソッドは 'public static'でなければなりません。
2番目：上記のコードで記述されているように、メソッドの上に[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ユーザーを呼び出すために、ScriptManagerはPageMethodsで使用可能なプロキシ関数を生成します。
サーバー側の関数には2つのパラメーター、つまり電子メールとパスワードがあります。パラメーターの後に、メソッドが正常に実行された場合（最初のパラメーター、つまりonSucess）またはメソッドが失敗した場合（2番目のパラメーターすなわち結果）。

これですべての準備が整いました。今、[サインアップ]ボタンに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>
_
67
Fahad Hussain

疑わしい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;
    }
}
6
WraithNath

私は先に進み、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呼び出しを管理するのではなく、ページ、メソッド名、引数を渡すだけで済みます。このメソッドに。

3
Grant Thomas

Jayrock RPCライブラリ は、C＃開発者にとってこれを素敵なファミリアな方法で実行するための優れたツールです。必要なメソッドを使用して.NETクラスを作成し、このクラスをスクリプトとして（ラウンドアバウト方式で）ページに追加できます。その後、自分のタイプのjsオブジェクトを作成し、他のオブジェクトと同様にメソッドを呼び出すことができます。

それは本質的にajax実装を隠し、RPCを使いやすい形式で提示します。本当に最適なオプションは、ASP.NET MVCを使用し、アクションメソッドへのjQuery ajax呼び出しを使用することです。

1
jcvandan

いくつかのオプションがあります。目的に合わせて WebMethod 属性を使用できます。

0
danyloid