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" %>





 
    
     
     
     
    <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("
" + val + "
");
                        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>



    

    

    
        
         

        
    
    
 







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





 
    
     
     
     
    <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("
" + val + "
");
                        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>


    

    

    
        
         

        
    
    

 /// 

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


        /// 

        /// 
        /// 
        /// 
        [WebMethod]
       public static string gvAjax()
       {
           List gvlist = new List();
           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;
       }
        /// 

        /// 
        /// 
        /// 
        /// 
        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;
        }




    }


    /// 

    /// 
    /// 
    public class Person
    {

        /// 

        /// 
        /// 
        public int id { get; set; }
        /// 

        /// 
        /// 
        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