DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax調用webservice實現RadiobuttonList 和DorpDownList聯動
Ajax調用webservice實現RadiobuttonList 和DorpDownList聯動
編輯：AJAX詳解
1、首先定義簡單的實體類：
VIEw Code
VIEw Code
VIEw Code
<Services>
<ASP:ServiceReference Path="~/AJaxService.asmx" />
</Services>
</ASP:ToolkitScriptManager> 此時可實現無刷新的聯動效果。
VIEw Code
using System;2、WebService代碼：
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace GenerateBaseDataWeb
{
public class ClsServiceDrp
{
private string id;
public string Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
}
VIEw Code
using System;注意：要在類前加[System.Web.Script.Services.ScriptService]的屬性。 3、頁面代碼：
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.UI.WebControls;
using System.Data;
using AJaxControlToolkit;
namespace GenerateBaseDataWeb
{
/// <summary>
/// AJaxService 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.Net AJax 從腳本中調用此 Web 服務，請取消對下行的注釋。
[System.Web.Script.Services.ScriptService]
public class AJaxService : System.Web.Services.WebService
{
[WebMethod]
public List<ClsServiceDrp> GetDropDownListDate(string fileName)
{
List<ClsServiceDrp> list = new List<ClsServiceDrp>();
ClsServiceDrp cls;
if (fileName.StartsWith("Is"))
{
cls = new ClsServiceDrp();
cls.Id = "True";
cls.Name = "True";
list.Add(cls);
cls = new ClsServiceDrp();
cls.Id = "False";
cls.Name = "False";
list.Add(cls);
}
else
{
DataSet ds = BaseMethod.GetControlDataSet(fileName, fileName);
if (ds != null && ds.Tables[0].Rows.Count>0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count;i++ )
{
cls = new ClsServiceDrp();
cls.Id = ds.Tables[0].Rows[i]["id"].ToString();
cls.Name = ds.Tables[0].Rows[i]["name"].ToString();
list.Add(cls);
}
}
}
return list;
}
}
}
VIEw Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.ASPx.cs" Inherits="GenerateBaseDataWeb.WebForm1" %>注意：要在ScriptManager中添加webservice的地址： <ASP:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<%@ Register Assembly="AJaxControlToolkit" Namespace="AJaxControlToolkit" TagPrefix="ASP" %>
<!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></title>
<script type="text/Javascript">
function showdiv() {
var filename = "IsActive";
var ctrl = document.getElementById("<%=radioDropdownCategory.ClIEntID %>");
var col = ctrl.all;
for (i = 0; i < col.length; i++) {
if (col[i].tagName.toUpperCase() == 'INPUT') {
if (col[i].checked) {
filename = col[i].value;
}
}
}
BindDropDownList(filename);
}
function BindDropDownList(filename) {
///調用webservice方法時，必須將命名空間也加上，如這種格式：[namespace].[class].[method],否則會報service未定義的錯誤
///FillEmployeeList就是返回的結果，如果方法有參數，寫在返回結果也就是FillEmployeeList的前面。
GenerateBaseDataWeb.AJaxService.GetDropDownListDate(filename, FillEmployeeList, ErrorHandler, TimeOutHandler);
}
function FillEmployeeList(result) {
var oldDrp = document.getElementById("<%=drpOld.ClIEntID %>");
var newDrp = document.getElementById("<%=drpNew.ClIEntID %>");
clearSelect(oldDrp);
clearSelect(newDrp);
for (var i = 0; i < result.length; i++) {
//每個dropdwonlist都需要定義一個變量，若只定義一個變量，則只有最後的dropdownlist的項才會增加
var option = new Option(result[i].Id, result[i].Name);
var option1 = new Option(result[i].Id, result[i].Name);
oldDrp.options.add(option);
newDrp.options.add(option1);
}
}
function TimeOutHandler(result) {
alert("Timeout :" + result);
}
function ErrorHandler(result) {
var msg = result.get_exceptionType() + "\r\n";
msg += result.get_message() + "\r\n";
msg += result.get_stackTrace();
alert(msg);
}
function clearSelect(select) {
for (var i = select.options.length; i >= 0; i--) {
select.options[i] = null;
}
}
</script>
</head>
<body>
<div>
<form id="formId" runat="server">
<ASP:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Services>
<ASP:ServiceReference Path="~/AJaxService.asmx" />
</Services>
</ASP:ToolkitScriptManager>
<table>
<tr>
<td height="35" align="left" class="style3" colspan="2">
<ASP:RadioButtonList ID="radioDropdownCategory" runat="server" RepeatColumns="5"
onclick="showdiv()">
<ASP:ListItem>IsActive</ASP:ListItem>
<ASP:ListItem>ItemTypeID</ASP:ListItem>
<ASP:ListItem>Option_C</ASP:ListItem>
<ASP:ListItem>Isnew</ASP:ListItem>
<ASP:ListItem>ItemFamilyID</ASP:ListItem>
<ASP:ListItem>Option_D</ASP:ListItem>
<ASP:ListItem>Ispreorder</ASP:ListItem>
<ASP:ListItem>ItemCategoryID</ASP:ListItem>
<ASP:ListItem>ItemStatus</ASP:ListItem>
<ASP:ListItem>IsWholeSales</ASP:ListItem>
<ASP:ListItem>ItemColor</ASP:ListItem>
<ASP:ListItem>VendorID</ASP:ListItem>
<ASP:ListItem>ISSingle</ASP:ListItem>
<ASP:ListItem>ItemSize</ASP:ListItem>
<ASP:ListItem>Brand</ASP:ListItem>
</ASP:RadioButtonList>
</td>
</tr>
<tr>
<td height="35" align="left" class="style3">
<span class="title">Old</span>
<ASP:DropDownList ID="drpOld" runat="server" CSSClass="DDl_SIZE" Width="120px">
</ASP:DropDownList>
</td>
<td height="35" align="left" class="style3">
<span class="title">New</span>
<ASP:DropDownList ID="drpNew" runat="server" CSSClass="DDl_SIZE" Width="120px">
</ASP:DropDownList>
</td>
</tr>
</table>
</form>
</div>
</body>
</Html>
<Services>
<ASP:ServiceReference Path="~/AJaxService.asmx" />
</Services>
</ASP:ToolkitScriptManager> 此時可實現無刷新的聯動效果。
小編推薦
熱門推薦