回答:
まあ、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では、アンダースコアとそれに続く文字に書き込むことができません!
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を使用しています。
この__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();
マイクロソフト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コールバック関数でなければなりません。
ブログ投稿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;
}
静的で厳密に型指定されたプログラミングは常に自然に感じられるものでした。そのため、アプリケーション用に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の機能の両方が提供され、サイトにアクセスするユーザーの全体的なエクスペリエンスが向上します。何も犠牲にすることなく、両方の世界の最高のものを手に入れます。
参考文献
Microsoft AJAXライブラリがこれを実現します。AJAXを使用して独自のaspx(基本的に)スクリプトファイルを呼び出して.NET関数を実行することを含む独自のソリューションを作成することもできます。
これは、Michael Schwarzという名前のMVPで記述されたAjaxProと呼ばれるライブラリです。これはマイクロソフトによって作成されたライブラリではありませんでした。
私はAjaxProを広範に使用しており、サーバーへの単純なコールバックに推奨する非常に素晴らしいライブラリです。MicrosoftバージョンのAjaxでも問題なく機能します。ただし、MicrosoftがAjaxをどれほど簡単に作成できるかについては、本当に必要な場合にのみ使用します。更新パネルにドロップするだけでMicrosoftから得られる非常に複雑な機能を実行するには、多くのJavaScriptが必要です。
たとえば、Buttonのクリックイベントなど、サーバー側のイベントハンドラーをトリガーする場合は、どちらのシナリオ(同期/非同期)でも非常に簡単です。
コントロールのイベントハンドラーをトリガーする場合:ページに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();
}
}
//]]>
コントロールのサーバー側イベントハンドラーを作成する
protected void btnSayHello_Click(object sender、EventArgs e){Label1.Text = "Hello World ..."; }
サーバー側のイベントハンドラーを呼び出すクライアント関数を追加する
function SayHello(){__doPostBack( "btnSayHello"、 ""); }
上記のコードの「btnSayHello」をコントロールのクライアントIDに置き換えます。
これにより、コントロールが更新パネル内にある場合、ページは更新されません。とても簡単です。
もう1つ言っておくべきことは、ClientIDModeプロパティで定義されたID生成ポリシーに依存するため、クライアントIDに注意することです。
これを実装しようとしていますが、正しく機能していません。ページはポストバックしていますが、コードが実行されていません。ページをデバッグすると、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();
}
これを試してください:
<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;
ddlVoucherTypeは、選択されたインデックスの変更が呼び出すコントロールです...そして、このコントロールの選択されたインデックスの変更に任意の関数を配置できます。
私はこれを試し、jQueryを使用しながらAsp.Netメソッドを実行できるようにしました。
jQueryコードでページリダイレクトを行う
window.location = "Page.aspx?key=1";
次に、ページ読み込みでクエリ文字列を使用します
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["key"] != null)
{
string key= Request.QueryString["key"];
if (key=="1")
{
// Some code
}
}
}
追加のコードを実行する必要はありません
この返信は、クロスブラウザーのおかげで私にとって簡単に機能します。
__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();
ブロッククォート