無刷新綁定select數據源

2019-11-17 03:35:38

字體：大中小

來源：轉載

供稿：網友

這是利用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;
        }
    }
}