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

Question

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

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

score 96 · Accepted Answer

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ではアンダースコアの後に文字を書き込むことができません！

score 60 · Accepted Answer

この__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();

score 18 · Accepted Answer

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

MicrosoftAJAXライブラリをお勧めします。インストールして参照したら、ページの読み込みまたは初期化に行を追加するだけです。

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

次に、次のようなことができます。

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

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

PageClassName.Get5(javascriptCallbackFunction);

関数呼び出しの最後のパラメーターは、AJAXリクエストが返されたときに実行されるjavascriptコールバック関数である必要があります。

score 11 · Accepted Answer

.NETAjaxPageMethodsを使用して非同期で実行できます。ここまたはここを参照してください。

score 5 · Accepted Answer

ブログ投稿How to fetch & show SQL Server database data in ASP.NET page using Ajax (jQuery)が役立つと思います。

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

score 4 · Accepted Answer

静的で厳密に型指定されたプログラミングは、私にとって常に非常に自然なことだと感じていたので、アプリケーション用に Web ベースのフロントエンドを構築しなければならないとき、最初は (HTML と CSS は言うまでもなく) JavaScript を学ぶことに抵抗を感じていました。純粋な 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 サービスを設定して要求を簡単に処理することもできます。しかし、多くの人は Web フォームプロジェクトに API コントローラーを追加し、それらを使用してこのような 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 のパワーの両方が提供され、サイトにアクセスするユーザーの全体的なエクスペリエンスが向上します。何も犠牲にすることなく、両方の長所を活用できます。

参考文献

score 3 · Accepted Answer

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

これは、 MichaelSchwarzという名前のMVPで作成されたAjaxProというライブラリです。これは、Microsoftによって作成されたライブラリではありませんでした。

私はAjaxProを幅広く使用してきましたが、これは非常に優れたライブラリであり、サーバーへの単純なコールバックに推奨します。Microsoft版のAjaxでも問題なく機能します。ただし、MicrosoftがAjaxをいかに簡単に作成したかを考えると、本当に必要な場合にのみ使用することに注意してください。更新パネルにドロップするだけでMicrosoftから得られる非常に複雑な機能を実行するには、多くのJavaScriptが必要です。

score 2 · Accepted Answer

ボタンのクリックイベントなど、サーバー側のイベントハンドラーをトリガーする場合は、両方のシナリオ (つまり、同期/非同期) で非常に簡単です。

コントロールのイベントハンドラーをトリガーする場合: ページに ScriptManager を既に追加している場合は、手順 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(オブジェクト送信者, EventArgs e) { Label1.Text = "Hello World..."; }
2. サーバー側のイベントハンドラーを呼び出すクライアント関数を追加します。
  
  function SayHello() { __doPostBack("btnSayHello", ""); }

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

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

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

score 2 · Accepted Answer

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

他の誰かが Merk のようで、これに問題がある場合、私には解決策があります。

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

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

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

一般的なメソッド用のWebサービスを作成することをお勧めします。
呼び出したい関数にWebMethodAttributeを追加するだけで、それだけです。
すべての一般的なものを含むWebサービスを使用すると、システムの保守も容易になります。

score 0 · Accepted Answer

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

__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();

ブロッククォート

score 0 · Accepted Answer

これを試して：

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

またはこれ

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

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

score 0 · Accepted Answer

これを試してください：

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

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

score 0 · Accepted Answer

PageMethods.Your C# method NameC# メソッドまたは VB.NET メソッドを JavaScript にアクセスするために使用できます。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

ClientScript.GetPostBackEventReference(this, "");

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

20 に答える 20

Related

Reference