无刷新绑定select数据源
这是利用Ajax、json给前台页面中的select绑定数据源，原理简单，诸君一看便知： 前台页面（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>
然后就是后台代码了（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;
}
}
}
最后有一个类文件（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;
}
}
}
好了，本篇内容较简单，下一篇我们将讨论这个页面中的select的onchange事件……