JavaScriptを呼び出すASP.NETの実装について

この記事では、例を組み合わせて、ASP.net アプリケーションでクライアント側の Javascript スクリプトを使用して、プログラムの実行効率を向上させ、より多くの機能を実現する方法を説明します。

1. ASP.Net と Javascript

.Net は Microsoft の次世代戦略の中核であり、ASP.Net は Web 開発における .Net 戦略の具体的な実装です。 ASP のシンプルさと使いやすさを継承しながら、構造が不十分で読みにくく理解しにくいという ASP プログラムの欠点を克服します。特に、サーバー側コントロールとイベント駆動型モデルの導入により、Web アプリケーションの開発はこれまでのデスクトップ プログラムの開発に近づいてきました。

ASP.Net を紹介するさまざまな記事や書籍では、サーバー コントロールと .Net Framework SDK に重点が置かれています。これは、これらが ASP.Net の最新かつ最も革新的な改良点であるためです。対照的に、クライアント側のスクリプト Javascript (VBScript も含む) は、かつては Web 開発で重要な役割を果たしていましたが、サーバー側のプログラムではクライアント側のスクリプトは不要になったようです。ただし、サーバー側プログラムでは、ブラウザーと Web サーバー間の対話が必要であり、ASP.Net では、大量のデータを送受信する必要があります。入力確認や削除確認などはJavaScriptで実装すれば大丈夫です。したがって、ASP.Net で Javascript を使用する方法を検討する必要があります。

2. Javascript 応用例

1.ページ上のサーバー コントロールに Javascript イベントを追加すると、

サーバー コントロールは最終的に、入力テキストを生成する などの通常の HTML を生成します。フォーム内の各 HTML コントロールには独自の Javascript イベントがあります。たとえば、Textbox には onchange イベント、Button には onclick イベント、Listbox には onchange イベントなどがあります。クライアント側のイベントをサーバー コントロールに追加するには、Attributes プロパティを使用する必要があります。 Attributes 属性は、すべてのサーバー コントロールが持つ属性で、最終的に生成される HTML にカスタム タグを追加するために使用されます。 Web フォームに保存ボタン btnSave があり、このボタンをクリックしたときに本当に保存するかどうかをユーザーに確認したいとします (たとえば、一度保存すると復元できないなど)。次のコードは次のようになります。 Page_Load イベントに追加されます:

if not page.isPostBack() then

btnSave.Attributes.Add("onclick","Javascript:returnconfirm('Are you 本当に保存しますか?');")

end

if 「return」を省略しないと、ユーザーが「キャンセル」をクリックしてもデータは保存されます。

2. Datagrid の各行に Javascript イベントを追加します

。Datagrid の各行に削除ボタンがあるとします。ユーザーがこのボタンをクリックすると、場合に備えて、このレコードを本当に削除するかどうかを確認するメッセージが表示されることが望ましいとします。ユーザーが間違った行をクリックしたか、誤って「削除」ボタンをクリックしただけです。

この削除ボタンの名前が何であっても、各行にそのようなボタンがあり、それらは Datagrid の子コントロールであるため、前の例のように直接参照することはできません。この場合、Datagrid の OnItemDataBound イベントを使用する必要があります。 OnItemDataBound イベントは、Datagrid 内のデータの各行が Datagrid にバインドされた後に発生します (つまり、行ごとに 1 回発生します)。まず、次のコードを Datagrid 宣言に追加します。

...ここで列の定義

ここでは、ItemDataBound がOnItemDataBound イベントが発生するとメソッドが呼び出されます。コードビハインド ファイルにこのメソッドの定義を追加します。

Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)

e.Item.ItemType <> ListItemType.Header および e.Item.ItemType <> ListItemType.Footer の場合、

Dim oDeleteButton As LinkBut​​ton = e.Item.Cells(5)。 Controls(0)

oDeleteButton.Attributes("onclick") = "javascript:return 確認 ('削除してもよろしいですか" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"

End If

End Sub

Datagrid のタイトル行やフッター行もこのイベントをトリガーするため、まずこのイベントをトリガーする行がタイトル行やフッター行ではないと判断します。ここでは、[削除] ボタンが Datagrid の列 6 (最初の列は 0) にあり、Datagrid のデータソースには「m_sName」という名前の列が含まれていると仮定します。

3．編集状態の Datagrid 内のコントロールの参照

Datagrid の組み込み編集機能は、レコード内のフィールドの数が少ない場合の編​​集方法です。ユーザーはレコードを編集するために別のページに入る必要はなく、編集ボタンを直接クリックして現在の行を編集モードにすることができます。一方、JavaScript プログラムの中には、コントロールの名前を参照する必要があるものもあります。たとえば、多くのプログラムでは、日付形式の正当性を確認するためにユーザーが日付を入力する必要がある場合に、日付コントロールを提供します。ユーザーがコントロール アイコンをクリックすると、日付を選択するための新しいウィンドウが表示されます。このとき、ユーザーが日付を選択したときに値をテキスト ボックスにバックフィルできるように、日付を表示するテキスト ボックスの ID を新しいウィンドウに提供する必要があります。

通常のサーバー テキスト ボックス コントロールの場合、その ID は生成された HTML 入力ボックスの ID と同じですが、Datagrid の編集状態では、2 つの ID は同じではありません (理由は上記の例と同じです)。 )、これにはコントロールの ClientID プロパティを使用する必要があります。

Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

Dim sDateCtrl as string

sDateCtrl = grd1.Items (e.Item.ItemIndex) ("txtDate") 。 ClientID

End Sub

ここでは、ItemEdit メソッドが Dategrid の OnItemEdit イベント ハンドラーであり、Datagrid の 3 列目に txtDate という名前のサーバー テキスト ボックス コントロールが含まれていると仮定します。

4. ASP.Net によって自動的に生成される Javascript プログラムを指す

は開発者向けであり、生成される HTML ソース プログラムにはサーバーとクライアントの区別はありません。これらはすべて標準の HTML、DHTML です。ジャバスクリプト。ユーザー入力に応答できる理由は、各コントロールのイベント ハンドラーが最終的にスクリプトを生成し、Web サーバーが応答して再度処理できるようにするためです。通常、このスクリプトが何であるかを知る必要も、このスクリプトを直接呼び出す必要もありませんが、場合によっては、このスクリプトを適切に呼び出すことで多くの作業が簡素化されることがあります。次の 2 つの例を見てください。

● Datagrid 上の任意の場所をクリックして行を選択すると、

Datagrid には組み込みの選択ボタンが表示され、このボタンをクリックすると、現在の行が選択されます (SelectedItemStyle プロパティを設定して、現在の行に異なる外観を与えることができます)。ただし、ユーザーはどこかをクリックして行を選択することに慣れている可能性があります。この機能をすべて自分で実装するのは非常に面倒です。選択ボタンを追加して列を非表示にし、行がクリックされたときにこのボタンによって生成された Javascript を呼び出すことをお勧めします。

Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )

Dim itemType As ListItemType

itemType = CType(e.Item.ItemType, ListItemType)

If (itemType <> ListItemType.Header) And _

(itemType <> ListItemType.Footer) And _

(itemType <> ListItemType.Separator) 次に、

Dim oSelect As LinkBut​​ton = CType(e.Item.Cells(5).Controls(0), LinkBut​​ton)

e.Item.Attributes("onclick") = Page.GetPostBackClientHyperlink (oSelect, " ")

End Sub

これは、選択ボタンが列 6 にあることを前提としています。 e.Item は行を表します。生成された HTML から判断すると、各 に onclick イベントが追加されます。 Page.GetPostBackClientHyperLink メソッドは、ページ内の LinkBut​​ton コントロールによって生成されたクライアント スクリプトを返します。最初のパラメーターは Linkbutton コントロールで、2 番目のパラメーターはこのコントロールに渡されるパラメーターであり、通常は空です。 LinkBut​​ton コントロールではない場合は、同様の関数 GetPostBackClientEvent が存在します。MSDN を参照してください。

● サーバーによって生成されたスクリプトは、手動で追加されたスクリプトと競合します。

サーバー コントロールのサーバー イベントは、通常、クライアント コントロールの対応するイベントに対応します。たとえば、Dropdownlist の SelectedIndexChanged イベントは、HTML の onchange イベントに対応します。 onchange イベントを手動で追加する場合、クライアント側で 2 つの onchange が生成され、ブラウザーは 1 つを無視します。たとえば、ユーザーはドロップダウンリストのオプションを変更するたびにデータベースに保存したいと考えています (それほど一般的ではありませんが、このニーズは存在します)。同時に、ユーザーに変更を行ったかどうかを思い出させたいとも考えています。本当に節約したいのです。明らかに、保存したコードは SelectedIndexChanged イベントに配置する必要があり、リマインダーは onchange イベントを使用して手動で追加する必要があります。その結果、2 つの onchange のうち 1 つだけを実行できます。正しい方法は、非表示の保存ボタンを追加し、手動で追加された onchange イベントでこのボタンによって生成されたプログラムを呼び出すことです。

Page_Load メソッドは次のとおりです。

Dim sCmd as string

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")

if not page.isPostback then

Dropdownlist1.Attributes.add("onchange","confirmUpdate(""" & sCmd & """) )")

次の場合に終了

confirmUpdate 関数は次のとおりです。

ここ

では Javascript eval 関数を使用します。に含まれる文字列コマンドを呼び出します。自動生成されるスクリプトには一重引用符が含まれるため、コマンドを含む文字列を一重引用符で囲むことはできないことに注意してください。そのため、ここでは 2 つの二重引用符を使用して文字列自体の二重引用符を表しています。

3. 結論

上記では、ASP.Net に Javascript を挿入するいくつかの状況について簡単に説明しました。クライアント側の Javascript スクリプトをサーバー プログラムに適切に挿入すると、プログラムの実行効率が向上し、より使いやすいユーザー インターフェイスが提供されます。