这是利用Ajax、json给前台页面中的select绑定数据源,原理简单,诸君一看便知: 前台页面(ASP.NET):
前台页面 ASP.net
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
UseJason.aspx.cs
"
Inherits
=
"
AjaxTest.UseJason
"
%>
<! 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" src ="Scripts/jquery-1.4.1.js" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
$( " #btnGetCars " ).click( function () {
$.ajax({
type: " POST " ,
contentType: " application/json; charset=utf-8 " ,
url: " UseJason.aspx/GetCars " ,
data: " {} " ,
dataType: " json " ,
success: GetCars,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + " : " + textStatus);
}
});
});
$( " #SelectCars " ).change( function () {
CarSelectChange();
});
});
function GetCars(result) {
$(result.d).each( function () {
var o = document.createElement( " option " );
o.value = this [ ' carName ' ];
o.text = this [ ' carDescription ' ];
$( " #SelectCars " )[ 0 ].options.add(o);
});
}
function CarSelectChange() {
var o = $( " #SelectCars " )[ 0 ].options;
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< div >
< input type ="button" id ="btnGetCars" value ="GetCars" />
< div style ="margin-top: 20px" >
< p >
Cars list :
</ p >
< select id ="SelectCars" style ="width: 185px;" >
</ select >
< p >
Price :
</ p >
< input type ="text" id ="txtPrice" />
</ div >
</ div >
</ div >
</ form >
</ body >
</ html >
<! 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" src ="Scripts/jquery-1.4.1.js" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
$( " #btnGetCars " ).click( function () {
$.ajax({
type: " POST " ,
contentType: " application/json; charset=utf-8 " ,
url: " UseJason.aspx/GetCars " ,
data: " {} " ,
dataType: " json " ,
success: GetCars,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + " : " + textStatus);
}
});
});
$( " #SelectCars " ).change( function () {
CarSelectChange();
});
});
function GetCars(result) {
$(result.d).each( function () {
var o = document.createElement( " option " );
o.value = this [ ' carName ' ];
o.text = this [ ' carDescription ' ];
$( " #SelectCars " )[ 0 ].options.add(o);
});
}
function CarSelectChange() {
var o = $( " #SelectCars " )[ 0 ].options;
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< div >
< input type ="button" id ="btnGetCars" value ="GetCars" />
< div style ="margin-top: 20px" >
< p >
Cars list :
</ p >
< select id ="SelectCars" style ="width: 185px;" >
</ select >
< p >
Price :
</ p >
< input type ="text" id ="txtPrice" />
</ div >
</ div >
</ div >
</ form >
</ body >
</ html >
然后就是后台代码了(UseJason.aspx.cs)
后台(UseJason.aspx.cs)
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace AjaxTest
{
public partial class UseJason : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
}
[WebMethod]
public static List < Car > GetCars()
{
List < Car > listCars = new List < Car > () {
new Car( " A1 " , " A1 Description " , 205000 ),
new Car( " B12 " , " B12 Description " , 105300 ),
new Car( " Dfe " , " Dfe Description " , 658982 ),
new Car( " Yfee " , " Yfee Description " , 8458700 ),
new Car( " UUdde " , " UUdde Description " , 6548225 )};
return listCars;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace AjaxTest
{
public partial class UseJason : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
}
[WebMethod]
public static List < Car > GetCars()
{
List < Car > listCars = new List < Car > () {
new Car( " A1 " , " A1 Description " , 205000 ),
new Car( " B12 " , " B12 Description " , 105300 ),
new Car( " Dfe " , " Dfe Description " , 658982 ),
new Car( " Yfee " , " Yfee Description " , 8458700 ),
new Car( " UUdde " , " UUdde Description " , 6548225 )};
return listCars;
}
}
}
最后有一个类文件(Car.cs)
Car.cs
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxTest
{
public class Car
{
public string carName { get ; set ; }
public string carDescription { get ; set ; }
public double carPrice { get ; set ; }
public Car( string name, string description, double price)
{
this .carName = name;
this .carDescription = description;
this .carPrice = price;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxTest
{
public class Car
{
public string carName { get ; set ; }
public string carDescription { get ; set ; }
public double carPrice { get ; set ; }
public Car( string name, string description, double price)
{
this .carName = name;
this .carDescription = description;
this .carPrice = price;
}
}
}
好了,本篇内容较简单,下一篇我们将讨论这个页面中的select的onchange事件……