最近いくつかの Web サイト プログラムを作成しており、複数のドロップダウン メニュー オプションを使用することがよくあります。この概要を読んだ後、AjaxPro コントロールを使用し始めましたが、その効果は良好であると感じています。 MagicAjax は以前使ったことがあるのですが、長いこと使っていなかったので忘れていました。一番面倒なのは、仮想ディレクトリを扱うときの方が面倒なことです。笑、インターネット上にはたくさんありますが、初心者はそうでないことが多いです。私も重要な点を思い出しましたので、専門家は無視してください。今回はAjaxProが比較的使いやすそうだったので、最新のものは7.xのほうが便利かなと思い、これを選択しました。
要所要所にヒントがあり、わかりやすいと思います。
まず、次のように、このコンタクト ポイントを web.config の <system.web> と </system.web> の間に追加します。
<システム.ウェブ>
<!--Ajaxnet の場合-->
<httpハンドラー>
<addverb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpハンドラー>
<!--その他の設定-->
</system.web>
次に、AjaxPro.2.dll を bin フォルダーに放り込んで参照します。
面倒なのでコードを送った方が良いです。 以下のコードは Default.aspx.cs からのものです。
システムを使用する;
System.Data を使用します。
System.Configuration を使用します。
System.Data.OleDb を使用します。
System.Web を使用します。
System.Web.UI を使用します。
System.Web.UI.WebControls を使用します。
System.Web.UI.WebControls.WebParts を使用します。
System.Web.UI.HtmlControls を使用して
パブリック部分クラス _Default : System.Web.UI.Page
{
protected void Page_Load(オブジェクト送信者, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); //必要
if(!IsPostBack)BindDc();
}
/**//// <概要>
/// データベース接続http://www.downcodes.com
/// </概要>
/// <戻り値></戻り値>
パブリック OleDbConnection myConn()
{
string ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = 新しい OleDbConnection(ConnStr);
試す
{
conn.Open();
コンを返します。
}
キャッチ
{
投げる;
}
}
/**//// <概要>
/// 下位レベルのカテゴリを取得する
/// </概要>
[AjaxPro.AjaxMethod]
public DataSet getNextClass(string cid)
{
//ページにフィールド名を知られたくないので、sql serの場合は、txt、idをvolとします。
//ページによって取得される列名はこれと同じである必要があり、大文字と小文字が区別されます。これは通常見落としやすい場所です。
//つまり、二次分類は変更されていません
string sql = @"select cname as txt,id as vol from webclass whereparentid=" + cid;
試す
{
getDs(sql) を返します。
}
キャッチ
{
//投げる;
null を返します。
}
}
/**//// <概要>
/// DataSet を返す
/// </概要>
/// <param name="SQL"></param>
/// <戻り値></戻り値>
public DataSet getDs(string SQL)
{
OleDbConnection conn = myConn();
DataSet Ds = 新しい DataSet();
OleDbDataAdapter Da = 新しい OleDbDataAdapter(SQL, conn);
試す
{
Da.Fill(Ds);
D を返します。
}
キャッチ
{
null を返します。
//投げる;
}
}
/**//// <概要>
/// //データバインディング
/// </概要>
プライベート void BindDc()
{
//最初のもの
string sql = @"select * from webclass where Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.DataBind();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//最初に DropDownList.SelectedItem.Value を決定できます
// 2 番目
sql = @"select * from webclass whereparentid=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.DataBind();
// 3 番目のもの
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * from webclass whereparentid=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.DataBind();
}
default.aspx
の内容:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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="サーバー">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxPro はリフレッシュなしで 3 階層連携を実現</title>
</head>
<script language="javascript" type="text/javascript">
<!--
//ACLOUD の一般的な JS 関数
関数 getBid(s){
document.getElementById(s) を返します。
}
関数 getBmc(s){
document.getElementByName(s) を返します。
}
//カテゴリ一覧を表示
関数 showNext(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
var slt =getBid(obj);
var v = _Default.getNextClass(sid).value; // クラスの名前
//アラート(v);
//戻る;
if (v != null){
if(v != null && typeof(v) == "オブジェクト" && v.Tables != null)
{
slt.length = 0;
slt.options.add(new Option("選択してください",0));
//主に onchange イベントをトリガーするために「選択してください」を追加しました
if(obj=="ddl2"){
getBid("ddl3").options.length=0;
getBid("ddl3").options.add(new Option("選択してください",0));
}
for(var i=0; i<v.Tables[0].Rows.length; i++)
{
var txt = v.Tables[0].Rows[i].txt; //ここでは大文字と小文字を区別する必要があります var vol = v.Tables[0].Rows[i].vol; //次の列に従いますデータセット テーブル 名前は一貫している必要があります slt.options.add(new Option(txt,vol));
}
}
}
戻る;
}
-->
</script>
<本文>
<form id="form1" runat="server">
<div>
<table width="500" border="0" align="center" cellpadding="0" cellpacing="0">
<tr>
<td width="99"> </td>
<td width="401">
都市<asp:DropDownList ID="ddl1" runat="server">
</asp:ドロップダウンリスト>
リージョン<asp:DropDownList ID="ddl2" runat="server">
</asp:ドロップダウンリスト>
ガーデン<asp:DropDownList ID="ddl3" runat="server">
</asp:ドロップダウンリスト></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</テーブル>
</div>
</form>
</body>
</html>
関連資料