ホームページ > 記事 > ウェブフロントエンド > AjaxToolKit で評価コントロールを使用する方法
AjaxToolKit で評価コントロールを使用する方法
- php中世界最好的语言オリジナル
- 2018-04-04 11:43:261403ブラウズ
今回は、AjaxToolKit で Rating コントロールを使用する方法を説明します。AjaxToolKit で Rating コントロールを使用する際の 注意事項 について、実際のケースを見てみましょう。
AjaxToolKit の Rating コントロールは、Web ページの評価 (または投票) 機能を処理するために特別に使用される Microsoft Ajax コントロール ライブラリのコントロールです。Web ページの非更新機能をサポートしています。UpdatePanel に配置する必要はありません。コントロールを使用する場合は、AutoPostBack プロパティを False に設定するだけです。このコントロールの使い方は非常に簡単で、さまざまなエフェクトやカスタム関数コールバックなどを設定することもできます。以下は使用時のスクリーンショットです
ID:当然のことですが、すべてのコントロールがサーバー側のIDを持つことは誰もが理解しています。 。
BehaviorID: Ajax クライアントを通じてコントロール オブジェクトを取得するときに使用される ID。これは、コールバック関数 を設定するときに $Find メソッドを通じて見つかります。
MaxRating: コントロールの現在の最大値。この値は、UI 上の「スター」アイコンの数を直接反映します。
CurrentRating: 現在の値、つまりコントロールによって現在表示されている値。この値は、UI 上で点灯している「星」アイコンの数を直接反映します。この値の範囲は 0 ～ MaxRating (両端の値を含む) であることに注意してください。
runat: 登録されたコントロールはサーバー側の動作であり、この値を設定する必要があります。
StarCssClass: 「スター」アイコンのスタイル。必須。
WaitingStarCssClass: クライアントの応答を処理する際に、コントロールがサーバーと対話中に待機状態にあるときの「スター」アイコンのスタイル。必須。
FilledStarCssClass: 「星」アイコンが点灯しているときのスタイル。必須。
EmptyStarCssClass: 「星」アイコンが点灯していない場合のスタイル。必須。
CssClass: 評価コントロールの全体的なスタイル。必要に応じて指定します。
OnChanged: は、ユーザーが「スター」アイコンをクリックした後の応答イベントを処理するために使用されます。このイベントはサーバー側で処理されます。
AutoPostBack: コントロールが自動的にポストバックするかどうかを設定します。通常、この値は False に設定します。
ReadOnly: コントロールの読み取り専用状態。読み取り専用状態の評価は、ユーザーがクリックできません。読み取り専用の評価には別のスタイルを設定できます。 使い方を見てみましょう。
準備作業:
1. AjaxControlToolkit.dll アセンブリがプロジェクト内で正しく参照されていることを確認します。このアセンブリは Visual Studio 2005 のベータ版です。Microsoft の公式 Web サイトにアクセスしてインストール パッケージをダウンロードする必要があります。Visual Studio 2008 は IDE とともに自動的にインストールされ、直接使用できます。 2. Visual Studio2008 では、このコントロールはツールボックスに自動的に追加されず、手動でツールボックスに追加してからページにドラッグ アンド ドロップする必要があります。 Visual Studio でツールボックスのフローティング パネルを開き、空のタブ ([全般] タブなど) を選択し、右クリックして [選択...] を選択すると、ポップアップ ダイアログ ボックスの AjaxControlToolkit アセンブリで対応するコントロールを見つけることができます。 、次の写真のように。
AjaxControlToolkit.dll 4. コントロールを追加した後、標準の ASP.NET コントロールと同様にツールボックスの Rating コントロールを使用できます。
準備が完了したら、プロジェクトに新しい Web ページを作成し、そのページにコントロールを配置します。すべての Ajax コントロールは、クライアントに必要なスクリプトを登録する役割を担う ScriptManager コントロールのサポートを必要とすることに注意してください。したがって、Rating コントロールを追加する前に、ページ上に ScriptManager コントロールが 1 つだけあることを確認してください。以下は、aspx ファイルのコード例です。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="iFrameUpload.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit, Version=3.0.20820.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>Untitled Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:Rating ID="RatingRate" BehaviorID="RatingRate1" MaxRating="5" CurrentRating="3"
runat="server" StarCssClass="ratingStar" WaitingStarCssClass="waitingRatingStar"
FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingRate_Changed" AutoPostBack="false">
</ajaxToolkit:Rating>
<script type="text/javascript">
Sys.Application.add_load(
function() {
$find("RatingRate1").add_EndClientCallback(
function(sender, e) {
var result = e.get_CallbackResult();
alert(result);
}
);
}
);
</script>
</p>
</form>
</body>
</html>
評価コントロールの関連プロパティとイベントが追加されました。スクリプトの意味は次のとおりです。ページが完全に読み込まれた後、Sys.Application.add_load メソッドを通じて Rating コントロールのコールバック メソッドを登録し、$find("RatingRate1").add_EndClientCallback メソッドを通じて登録して、サーバーから返された値を受け取ります。これらのスクリプトは標準の Ajax フレームワークによって提供されているため、ここではあまり説明しません。Microsoft の MSDN で詳細な紹介を参照してください。
次のステップは、cs ファイルのコードです。
protected void RatingRate_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
System.Threading.Thread.Sleep(300);
//TODO: Save e.Value to database.
e.CallbackResult = "success";
}
それは非常に簡単です。まずスレッドを 300 ミリ秒停止させて、待機状態の Rating コントロールのスタイルを確認する時間を確保します。その後、データの保存を処理できます (評価の現在の値をデータベースに保存するなど)。ユーザーが選択した値は文字列型の e.Value 属性を通じて取得されることに注意してください。次に、e.CallbackResult 属性を通じてコールバック値をクライアントに渡します。クライアントは値を取得した後、それに応じて処理します。
CSS スタイルとサンプル画像を以下に示しますので、読者は自分で試してみることができます。ユーザーは、Rating の現在の値をクリックできないことに注意してください。初期化中に、Rating の CurrentRating 値が 3 の場合、ユーザーが 3 番目の「星」アイコンをクリックしても、クリック イベントはトリガーされません。ユーザーが繰り返しクリックした後、コントロールを読み取り専用状態に設定するなど、サーバー側で処理できます。
.ratingStar
{
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.waitingRatingStar /*normal mode empty style*/
{
background-image: url(Rating_default.gif);
}
.filledRatingStar /*normal mode filled style*/
{
background-image: url(Rating_normal.gif);
}
.emptyRatingStar /*readonly mode empty style*/
{
background-image: url(Rating_empty.gif);
}
以下は実行時の効果です:
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
Ajax が XML ファイルを追加、削除、および変更する方法
以上がAjaxToolKit で評価コントロールを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。