jquery-ajax之4：无刷新 select 数据源及事件绑定(2)

续前一篇 无刷新 select 数据源及事件绑定 (1)，本篇讲解select的onchange事件和利用ajax静态调用后台方法

 

页面（asp.net）

页面（UseJason.aspx）

<% @ 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);
}
});
});

// 响应select的change事件
$( " #SelectCars " ).change( function () {
CarSelectChange();
});
});

// 绑定selece的数据源
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);
});
}

// 通过select的change事件，调用后台方法：GetCarPrice
function CarSelectChange() {
var carName = $( " #SelectCars " )[ 0 ].value;
$.ajax({
type: " POST " ,
contentType: " application/json; charset=utf-8 " ,
url: " UseJason.aspx/GetCarPrice " ,
data: " {'carName':' " + carName + " '} " ,
dataType: " json " ,
success: ShowCarPrice,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + " : " + textStatus);
}
});
}

// 把从后台反馈的结果给text赋值
function ShowCarPrice(result) {
$( " #txtPrice " ).val(result.d);
}
</ 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
{
private static List < Car > listCars;

protected void Page_Load( object sender, EventArgs e)
{

}

[WebMethod]
public static List < Car > GetCars()
{
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;
}

[WebMethod]
public static string GetCarPrice( string carName)
{
if ( null != listCars)
{
foreach (Car car in listCars)
{
if (car.carName == carName)
{
return car.carPrice.ToString();
}
}
}
return string .Empty;
}
}
}

 

一个类文件

class（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;
}
}
}

 

如有问题，请留言……