AjaxToolKit で評価コントロールを使用する方法-jsチュートリアル-php.cn

今回は、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 アセンブリで対応するコントロールを見つけることができます。、次の写真のように。

3. 上記のダイアログボックスに AjaxControlToolkit に関連するコントロールが見つからない場合は、AjaxControlToolkit.dll アセンブリへのパスを自分で指定する必要があることに注意してください。リーダーがファイルを見つけられない場合は、ここから便利なダウンロードを行ってください。

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

ログイン後にコピー

以下は実行時の効果です: