Недавно я работал над некоторыми программами для веб-сайтов и часто использую несколько вариантов раскрывающегося меню. Прочитав введение, я начал использовать элемент управления AjaxPro и чувствую, что эффект хороший. Я раньше пользовался MagicAjax, но забыл о нем после того, как долго им не пользовался. Самое хлопотное, что с виртуальными каталогами сложнее, хаха, их много в интернете, но новичкам часто нет. Мне тоже напомнили о важных моментах, поэтому эксперты прошу игнорировать это. Я увидел, что AjaxPro относительно прост в использовании. На этот раз я использовал версию 6.x, а последняя версия — 7.x. Мне показалось, что серия 6.0 более удобна, поэтому я выбрал ее.
В важных местах есть подсказки, думаю, их легко понять.
Сначала добавьте эту точку контакта между <system.web> и </system.web> в web.config следующим образом:
<система.веб>
<!--для Аякснета-->
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
<!--Другие настройки-->
</система.веб>
Потом кидаем 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)); //Необходимо
если(!IsPostBack)BindDc();
}
/**//// <сводка>
/// Подключение к базе данных http://www.downcodes.com
/// </сводка>
/// <возвращается></возвращается>
общедоступное соединение OleDbConnection myConn()
{
строка ConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Источник данных=" + System.Web.HttpContext.Current.Server.MapPath(ConfigurationManager.AppSettings["dbpath"]);
OleDbConnection conn = новый OleDbConnection(ConnStr);
пытаться
{
конн.Открыть();
возврат соединения;
}
ловить
{
бросать;
}
}
/**//// <сводка>
/// Получаем категории нижнего уровня
/// </сводка>
[AjaxPro.AjaxMethod]
общедоступный набор данных getNextClass (строка cid)
{
//Поскольку мы не хотим, чтобы страница знала имя поля, поэтому в качестве txt, id как vol. Если это sql ser, вы можете использовать =.
//Имя столбца, полученное страницей, должно быть таким же, как это, и учитывать регистр. Обычно это легко упустить из виду.
//Значит, вторичная классификация не изменилась
строка sql = @"выберите cname как txt,id как vol из веб-класса, где родительский ID=" + cid;
пытаться
{
вернуть getDs (sql);
}
ловить
{
//бросать;
вернуть ноль;
}
}
/**//// <сводка>
/// Возвращаем набор данных
/// </сводка>
/// <param name="SQL"></param>
/// <возвращается></возвращается>
общедоступный набор данных getDs (строка SQL)
{
OleDbConnection conn = myConn();
DataSet Ds = новый DataSet();
OleDbDataAdapter Da = новый OleDbDataAdapter (SQL, conn);
пытаться
{
Да.Заполнить(Дс);
вернуть Ds;
}
ловить
{
вернуть ноль;
//бросать;
}
}
/**//// <сводка>
/// //Привязка данных
/// </сводка>
частная пустота BindDc()
{
//первый
строка sql = @"выберите * из веб-класса, где Parentid=0";
ddl1.DataSource = getDs(sql);
ddl1.DataTextField = "cname";
ddl1.DataValueField = "id";
ddl1.Привязка Данных();
if (ddl1.DataSource != null) ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl2');");
//Сначала вы можете определить DropDownList.SelectedItem.Value
//Второй
sql = @"select * из веб-класса, где родительский идентификатор=" + ddl1.SelectedItem.Value;
ddl2.DataSource = getDs(sql);
ddl2.DataTextField = "cname";
ddl2.DataValueField = "id";
ddl2.Привязка Данных();
//Третий
if (ddl2.DataSource != null) ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'ddl3');");
sql = @"select * из веб-класса, где родительский идентификатор=" + ddl2.SelectedItem.Value;
ddl3.DataSource = getDs(sql);
ddl3.DataTextField = "cname";
ddl3.DataValueField = "id";
ddl3.Привязка Данных();
}
}
Содержимое 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 реализует трехуровневую связь без обновления</title>
</голова>
<script Language="javascript" type="text/javascript">
<!--
//ACLOUD общие функции JS
функция getBid(s){
вернуть документ.getElementById(s);
}
функция getBmc(s){
вернуть документ.getElementByName(s);
}
//Показать список категорий
функция showNext(sid,obj)
{
if(sid==null || sid=="" || sid.length<1)return;
вар slt = getBid (obj);
var v = _Default.getNextClass(sid).value // Имя класса;
//оповещение(в);
//возвращаться;
если (v != ноль){
if(v != null && typeof(v) == "object" && v.Tables != null)
{
длина.длина = 0;
slt.options.add(new Option("Пожалуйста, выберите",0));
//Добавлено «Пожалуйста, выберите», главным образом, для запуска события onchange
если(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));
}
}
}
возвращаться;
}
-->
</скрипт>
<тело>
<form id="form1" runat="server">
<дел>
<table width="500" border="0" align="center" cellpadding="0" cellpacing="0">
<тр>
<td width="99"> </td>
<td ширина="401">
Город<asp:DropDownList ID="ddl1" runat="server">
</asp:DropDownList>
Регион<asp:DropDownList ID="ddl2" runat="server">
</asp:DropDownList>
Сад<asp:DropDownList ID="ddl3" runat="server">
</asp:DropDownList></td>
</tr>
<тр>
<td> </td>
<td> </td>
</tr>
<тр>
<td> </td>
<td> </td>
</tr>
</таблица>
</div>
</форма>
</тело>
</html>
Связанные документы