Question

我使用来自数据库的JSON数据填充“jqxDropDownList”，但在运行时，下拉列表中不会显示任何内容。请帮我解决这个问题。

我所指的链接， http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm?(arctic)#demos/jqxdropdownlist/bindingtojson.htm

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;
using System.Data;
using System.Collections;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Data.SqlClient;

namespace JqWidgets
{
    public partial class fromdb : System.Web.UI.Page
    {
        public class TeamInfo
        {
            public int TeamID { get; set; }
            public string TeamName { get; set; }
        }

        public List<TeamInfo> TeamInformation { get; set; }

        [System.Web.Services.WebMethod]
        public static List<TeamInfo> LoadTeam()
        {
            List<TeamInfo> TeamInformation = new List<TeamInfo>();
            string strConn = System.Configuration.ConfigurationManager.ConnectionStrings["ApplicationServices"].ToString();
            DataSet ds;
            using (SqlConnection con = new SqlConnection
            (strConn))
            {
                using (SqlCommand cmd = new SqlCommand("select TeamID, Team_Name from tblMaster_Teams", con))
                {
                    con.Open();
                    cmd.Connection = con;
                    cmd.CommandType = CommandType.Text;
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {

                        ds = new DataSet();
                        da.Fill(ds);
                    }
                }
            }
            try
            {
                if (ds != null)
                {
                    if (ds.Tables.Count > 0)
                    {
                        if (ds.Tables[0].Rows.Count > 0)
                        {
                            foreach (DataRow dr in ds.Tables[0].Rows)
                            {
                                TeamInformation.Add(new TeamInfo()
                                {
                                    TeamID = Convert.ToInt32(dr["TeamID"]),
                                    TeamName = dr["Team_Name"].ToString()
                                });
                            }
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
            return TeamInformation;
        }
    }
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeBehind="fromdb.aspx.cs" Inherits="JqWidgets.fromdb" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

    <link rel="stylesheet" href="Styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
    <%--<script src="Scripts/demos.js" type="text/javascript"></script>--%>
    <script type="text/javascript" src="Scripts/jqxcore.js"></script>
    <script src="Scripts/jqxdata.js" type="text/javascript"></script>
    <script src="Scripts/jqxbuttons.js" type="text/javascript"></script>
    <script src="Scripts/jqxscrollbar.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/jqxlistbox.js"></script>
    <script type="text/javascript" src="Scripts/jqxdropdownlist.js"></script>


    <script type="text/javascript">

        $(document).ready(function () {

            var source = $.ajax({

                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "fromdb.aspx/LoadTeam",
                data: "{}",
                dataType: "json",
                datafields: [
                        { name: 'TeamID' },
                        { name: 'TeamName' }
                    ],
                async: false,
            });

            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create a jqxDropDownList 
            $("#jqxWidget").jqxDropDownList({

                source: dataAdapter,
                displayMember: "TeamName",
                valueMember: "TeamID",
                selectedIndex: 0,
                width: 200,
                height: 25
            });

            //subscribe to the select event.
            $("#jqxWidget").on('select', function (event) {
                if (event.args) {
                    var item = event.args.item;
                    if (item) {
                        var valueelement = $("<div></div>");
                        valueelement.text("Value: " + item.value);
                        var labelelement = $("<div></div>");
                        labelelement.text("Label: " + item.label);
                        $("#selectionlog").children().remove();
                        $("#selectionlog").append(labelelement);
                        $("#selectionlog").append(valueelement);
                    }
                }
            });

        });

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id='jqxWidget'>
        </div>
      <%--  <div style="font-size: 12px; font-family: Verdana;" id="selectionlog">
        </div>--%>
</asp:Content>

Answer 1

我认为你应该在你的LoadTeam方法上面添加[ScriptMethod（UseHttpGet = true，ResponseFormat = ResponseFormat.Json）]，并且方法的结果应该是这样的：

 return new JavaScriptSerializer().DeserializeObject(TeamInformation);

希望这有帮助。

使用ajax调用（JSON）填充jqxDropDownList

1 个答案: