DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 無刷新綁定select數據源
無刷新綁定select數據源
編輯:AJAX詳解     

這是利用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>
 
 
然後就是後台代碼了(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;        }    }}
 
 
最後有一個類文件(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;        }    }}
好了,本篇內容較簡單,下一篇我們將討論這個頁面中的select的onchange事件……

資料引用:http://www.knowsky.com/552239.Html

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved