JavaScriptからASP.NET関数を呼び出しますか?


140

ASP.NETでWebページを作成しています。JavaScriptコードがいくつかあり、クリックイベントを含む送信ボタンがあります。

ASPで作成したメソッドをJavaScriptのクリックイベントで呼び出すことはできますか?


1
あなたは、いくつかのようなAjaxライブラリを使用する必要があります:アンセム
jdecuyper

回答:


92

まあ、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);

これにより、JavaScriptから渡した「argumentString」として「eventArgument」を使用して、コードファイルの「RaisePostBackEvent」メソッドが呼び出されます。これで、好きな他のイベントを呼び出すことができます。

PS:それは 'underscore-underscore-doPostBack'です...そして、そのシーケンスにはスペースがあってはなりません...どういうわけかWMDでは、アンダースコアとそれに続く文字に書き込むことができません!


1
私はこれを実装しようとしていますが、正しく機能していません。ページはポストバックしていますが、コードが実行されていません。ページをデバッグすると、RaisePostBackEventが発生しません。私が別の方法で行ったことの1つは、aspxページではなくユーザーコントロールでこれを実行していることです。
11

エラーが発生し、オブジェクトが期待されていると言われます。私はそれをそのような方法で呼びました:window.onbeforeunload = confirmExit; //debugger; function confirmExit() { var pageId = '<%= Page.ClientID %>'; var argumentString = 'ReleaseLock'; __doPostBack(pageId, argumentString); }
パビタール

どういうわけか、私はonkeyupイベントでそれを動作させることができませんでした。もらっJavaScript runtime error: '__doPostBack' is undefinedた C#とASP.NET 2.0を使用しています。
Andrew T.

58

この__doPostBack()方法はうまくいきます。

別の解決策(非常にハック)は、マークアップに非表示の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();

3
引数を使用したい場合はどうなりますか?クライアント側から取得してbutton.Click()で使用できますか?
Kubi

@クビはサーバー側の議論ですか?私が通常行うことは、サーバー側に送信する必要がある引数をシリアル化し、それらを非表示フィールドに配置することです。
mbillard

ここを見てください。stackoverflow.com/questions/2536106/...
Kubi

Clickメソッドは存在しますか?
Saher Ahwal、2010

@saherはい、しかし実際には.click(小文字c)(comptechdoc.org/independent/web/cgi/javamanual/javabutton.html
mbillard

18

マイクロソフトAJAXライブラリは、これを実現します。AJAXを使用して独自のaspx(基本的に)スクリプトファイルを呼び出して.NET関数を実行することを含む独自のソリューションを作成することもできます。

Microsoft AJAXライブラリをお勧めします。インストールして参照したら、ページのloadまたはinitに1行追加するだけです。

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

その後、次のようなことができます:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

次に、ページで次のように呼び出すことができます。

PageClassName.Get5(javascriptCallbackFunction);

関数呼び出しの最後のパラメーターは、AJAX要求が返されたときに実行されるJavaScriptコールバック関数でなければなりません。



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

4

静的で厳密に型指定されたプログラミングは常に自然に感じられるものでした。そのため、アプリケーション用にWebベースのフロントエンドを構築する必要があったとき、最初はJavaScript(HTMLとCSSは言うまでもありません)の学習に抵抗しました。純粋なC#をコーディングできる限り、OnLoadイベントで実行してアクションを実行するためだけにページにリダイレクトするなど、これを回避するために何でもします。

ただし、Webサイトで作業する場合は、心を開いて、よりWeb指向の考え方を始める必要があることがわかります(つまり、サーバーでクライアント側のことを行わないでください(逆も同様))。 。私はASP.NET Webフォームが大好きですが、それでも(MVCと同様に)使用しますが、物事をよりシンプルにしてクライアントとサーバーの分離を隠すことにより、新規参入者を混乱させ、実際に物事をより困難にする場合があると言います。

私のアドバイスは、いくつかの基本的なJavaScript(イベントの登録、DOMオブジェクトの取得、CSSの操作など)を学ぶことです。Webプログラミングははるかに楽しくなります(簡単なことは言うまでもありません)。多くの人がさまざまなAjaxライブラリーについて言及しましたが、実際のAjaxサンプルは見たことがなかったので、ここで説明します。(Ajaxに慣れていない場合は、ページ全体を再読み込みしたり、完全なポストバックを実行したりせずに、コンテンツを更新する(またはシナリオでサーバー側のアクションを実行する)ための非同期HTTPリクエストを作成するだけです。

クライアント側:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

それでおしまい。名前は誤解を招く可能性がありますが、結果はプレーンテキストまたはJSONである場合もありますが、XMLに限定されません。jQueryは、Ajax呼び出しを行うためのさらに単純なインターフェースを提供します(他のJavaScriptタスクを単純化する中でも)。

リクエストはHTTP-POSTまたはHTTP-GETにすることができ、Webページに送信する必要はありませんが、RESTful API などのHTTPリクエストをリッスンする任意のサービスに投稿できます。ASP.NET MVC 4 Web APIは、サーバー側のWebサービスを簡単にリクエストを処理するように設定します。しかし、多くの人々は、APIコントローラーをWebフォームプロジェクトに追加して、このようなAjax呼び出しを処理するために使用できることを知りません。

サーバ側:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

次に、HTTPルートをGlobal.asaxファイルに登録するだけで、ASP.NETはリクエストの転送方法を認識します。

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

AJAXとコントローラーを使用すると、いつでも非同期的にサーバーにポストバックして、サーバー側の操作を実行できます。この1対2のパンチにより、JavaScriptの柔軟性とC#/ ASP.NETの機能の両方が提供され、サイトにアクセスするユーザーの全体的なエクスペリエンスが向上します。何も犠牲にすることなく、両方の世界の最高のものを手に入れます。

参考文献


3

Microsoft AJAXライブラリがこれを実現します。AJAXを使用して独自のaspx(基本的に)スクリプトファイルを呼び出して.NET関数を実行することを含む独自のソリューションを作成することもできます。

これは、Michael Schwarzという名前のMVPで記述されたAjaxProと呼ばれるライブラリです。これはマイクロソフトによって作成されたライブラリではありませんでした。

私はAjaxProを広範に使用しており、サーバーへの単純なコールバックに推奨する非常に素晴らしいライブラリです。MicrosoftバージョンのAjaxでも問題なく機能します。ただし、MicrosoftがAjaxをどれほど簡単に作成できるかについては、本当に必要な場合にのみ使用します。更新パネルにドロップするだけでMicrosoftから得られる非常に複雑な機能を実行するには、多くのJavaScriptが必要です。


1
この投稿が上記の投稿に近づいていたらいいのに...その方法がMSのドキュメントのどこにも記載されていない理由を理解しようとして数分を吹き飛ばしました:/
Dave Swersky 09/07/16

1
@Daveだから人々は答えにコメントし、他の答えにコメントを独自の答えとして追加するべきではありません。
Charles Boyung、2010年

2

たとえば、Buttonのクリックイベントなど、サーバー側のイベントハンドラーをトリガーする場合は、どちらのシナリオ(同期/非同期)でも非常に簡単です。

コントロールのイベントハンドラーをトリガーする場合:ページにScriptManagerを既に追加している場合は、手順1をスキップします。

  1. ページのクライアントスクリプトセクションに以下を追加します

    //<![CDATA[
    var theForm = document.forms['form1'];
    if (!theForm) {
        theForm = document.form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    1. コントロールのサーバー側イベントハンドラーを作成する

      protected void btnSayHello_Click(object sender、EventArgs e){Label1.Text = "Hello World ..."; }

    2. サーバー側のイベントハンドラーを呼び出すクライアント関数を追加する

      function SayHello(){__doPostBack( "btnSayHello"、 ""); }

上記のコードの「btnSayHello」をコントロールのクライアントIDに置き換えます。

これにより、コントロールが更新パネル内にある場合、ページは更新されません。とても簡単です。

もう1つ言っておくべきことは、ClientIDModeプロパティで定義されたID生成ポリシーに依存するため、クライアントIDに注意することです。


2

これを実装しようとしていますが、正しく機能していません。ページはポストバックしていますが、コードが実行されていません。ページをデバッグすると、RaisePostBackEventが発生しません。私が別の方法で行ったことの1つは、aspxページではなくユーザーコントロールでこれを実行していることです。

他の誰かがメルクのような人で、これに来るのに問題がある場合、私は解決策を持っています:

ユーザーコントロールがある場合、親ページにもPostBackEventHandlerを作成する必要があるようです。そして、直接呼び出すことにより、ユーザーコントロールのPostBackEventHandlerを呼び出すことができます。下記参照:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

UserControlIDは、親ページをマークアップでネストしたときに親ページでユーザーコントロールに与えたIDです。

注:そのユーザーコントロールに直接属するメソッドを直接呼び出すこともできます(この場合、親ページで必要なのはRaisePostBackEventハンドラーだけです)。

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

新しい質問を開いてください。あなたが投稿している質問は5年以上前のものです。
ニコ

ごめんなさい。機会があればやります。
davrob01 2013年

1

一般的なメソッド用のWebサービスを作成したい場合があります。
呼び出す関数にWebMethodAttributeを追加するだけで、あとはそれだけです。
一般的なものをすべて備えたWebサービスを使用すると、システムのメンテナンスも容易になります。


1

__doPostBack関数がページに生成されない場合は、次のように強制するためのコントロールを挿入する必要があります。

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

1

について:

var button = document.getElementById(/* Button client id */);

button.click();

それは次のようになります:

var button = document.getElementById('<%=formID.ClientID%>');

ここで、formIDは.aspxファイル内のASP.NETコントロールIDです。


0

オブジェクトの予期されるエラーが発生している場合は、この行をページの読み込みに追加します。

ClientScript.GetPostBackEventReference(this, "");


0

これを試して:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

またはこれ

Response.Write("<script>alert('Hello World');</script>");

ボタンのOnClientClickプロパティを使用してJavaScript関数を呼び出します...


0

JavaScriptコードに次の行を追加するだけでも取得できます。

document.getElementById('<%=btnName.ClientID%>').click()

これはとても簡単だと思います!


0

これを試してください:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherTypeは、選択されたインデックスの変更が呼び出すコントロールです...そして、このコントロールの選択されたインデックスの変更に任意の関数を配置できます。


0

これを実現する最も簡単で最良の方法は、 onmouseup() JavaScriptイベントではなくJavaScriptイベントです。onclick()

これにより、クリック後にJavaScriptを起動し、ASP OnClick()イベントに干渉しなくなります。


0

私はこれを試し、jQueryを使用しながらAsp.Netメソッドを実行できるようにしました。

  1. jQueryコードでページリダイレクトを行う

    window.location = "Page.aspx?key=1";
  2. 次に、ページ読み込みでクエリ文字列を使用します

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["key"] != null)
        {
            string key= Request.QueryString["key"];
            if (key=="1")
            {
                // Some code
            }
        }
    }

追加のコードを実行する必要はありません


0

この返信は、クロスブラウザーのおかげで私にとって簡単に機能します。

__doPostBack()メソッドはうまく機能します。

別の解決策(非常にハック)は、マークアップに非表示の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(); 

ブロッククォート

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.