CSharp:Fill a Select/Option from Json with jQuery

 

https://github.com/Apress/pro-asp.net-core-6
https://github.com/Apress/pro-asp.net-core-3

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DuUeditor.WebForm2" %>

<!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">
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Fill a Select/Option from Json with jQuery</title>
     <meta name="author" content="Geovin Du,塗聚文">
     <meta name="keyword" content="塗聚文">
     <meta name="description" content="涂聚文">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        var items = [];
        var du;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "DuGetData.ashx",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // data: data,
                success: function (data) {
                    console.log(data);
                    //var du = JSON.parse(data);
                    //console.log(data.length);
                    $.each(data, function (key, val) {
                        items.push("<li id='" + key + "'>" + val + "</li>");
                        console.log(val);
                        //du = JSON.parse(val);
                       // console.log(du);
                        $("#MyList").addItems(data);
                        $("#<%= DropDownList1.ClientID %>").addItems(data);
                    });

                    $.each(data, function (index, item) {
                        console.log(item);

                        console.log(item.id);
                    });

                    /*  $.each($.parseJSON(data), function (idx, obj) {
                    console.log(obj.id);
                    alert(obj.id);
                    });*/
                }
            });
        });


        $.fn.addItems = function (data) {
            return this.each(function () {
                var list = this;
                $.each(data, function (index, itemData) {
                    var option = new Option(itemData.realname, itemData.id);
                    list.add(option);
                });
            });
        };

        $("#MyList").change(function () {
            alert('you selected ' + $(this).val());
        });

    </script>
</head>
<body>

    <form id="form2" runat="server">
    <div>
    <select id="MyList" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="geovindu"/>
         <br />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>
    </form>
 
</body>
</html>

　　

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DuUeditor.WebForm1" ValidateRequest="false" EnableEventValidation="false" %>

<!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">
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Fill a Select/Option from Json with jQuery</title>
     <meta name="author" content="Geovin Du,塗聚文">
     <meta name="keyword" content="塗聚文">
     <meta name="description" content="涂聚文">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        var items = [];
        var du;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "/WebForm1.aspx/gvAjax",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // data: data,
                success: function (data) {
                    console.log(data);
                    //var du = JSON.parse(data);
                    //console.log(data.length);
                    $.each(data, function (key, val) {
                        items.push("<li id='" + key + "'>" + val + "</li>");
                        console.log(val);
                        du = JSON.parse(val);
                        console.log(du);
                        $("#MyList").addItems(du);
                        $("#<%= DropDownList1.ClientID %>").addItems(du);
                    });

                    $.each(du, function (index, item) {
                        console.log(item);

                        console.log(item.id);
                    });

                    /*  $.each($.parseJSON(data), function (idx, obj) {
                    console.log(obj.id);
                    alert(obj.id);
                    });*/
                }
            });
        });


        $.fn.addItems = function (data) {
            return this.each(function () {
                var list = this;
                $.each(data, function (index, itemData) {
                    var option = new Option(itemData.realname, itemData.id);
                    list.add(option);
                });
            });
        };

        $("#MyList").change(function () {
            alert('you selected ' + $(this).val());
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="MyList" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="geovindu"/>
         <br />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </div>
    </form>
</body>
</html>

　

 /// <summary>
    /// geovindu,Gevoin Du
    /// 
    /// </summary>
    public partial class WebForm1 : System.Web.UI.Page
    {


        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        [WebMethod]
       public static string gvAjax()
       {
           List<Person> gvlist = new List<Person>();
           Person pn = new Person { id = 1, realname = "geovindu" };
           gvlist.Add(pn);
           pn = new Person { id = 2, realname = "geovindu2" };
           gvlist.Add(pn);
           pn = new Person { id = 3, realname = "geovindu3" };
           gvlist.Add(pn);
           pn = new Person { id = 4, realname = "geovindu4" };
           gvlist.Add(pn);
           var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
           var json1 = serializer.Serialize(gvlist).ToString();
           return json1;
       }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //绑定数据;
            }
        }
        [WebMethod]
        protected void Button1_Click(object sender, EventArgs e)
        {
           // Response.Write(MyList.Value);

            Response.Write(DropDownList1.SelectedValue);
           // MyList.InnerText;
        }




    }


    /// <summary>
    /// 
    /// </summary>
    public class Person
    {

        /// <summary>
        /// 
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public string realname { get; set; }
    }

　

jTable
https://jtable.org/Demo/PagingAndSorting
https://github.com/volosoft/jtable
https://jtable.org/Home/Downloads
https://www.c-sharpcorner.com/uploadfile/f9935e/jqueryjson-multi-select-combo-box-drop-down-list-control/
https://weblogs.asp.net/jdanforth/fill-a-select-option-from-json-with-jquery

　

　

posted @ 2022-06-16 15:58  ®Geovin Du Dream Park™  阅读(34)  评论(0)    收藏  举报