使用JQuery绑定下拉列表

时间:2013-07-16 04:52:01

标签: jquery binding

这是我的aspx编码

  [WebMethod]
    public static CountryDetails[] BindDatatoDropdown()
    {
        DataTable dt = new DataTable();
        List<CountryDetails> details = new List<CountryDetails>();

        using (SqlConnection con = new SqlConnection(@"Data Source=DEVSYS;Initial Catalog=Items;Persist Security Info=True;User ID=sa;Password=*****"))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT ItemTypeID,ItemType FROM ItemTypeTable", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    CountryDetails country = new CountryDetails();
                    country.CountryId = Convert.ToInt32(dtrow["ItemTypeID"].ToString());
                    country.CountryName = dtrow["ItemType"].ToString();
                    details.Add(country);
                }
            }
        }
        return details.ToArray();
    }
    public class CountryDetails
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }

我想使用Jquery绑定下拉列表。但我只显示错误警报 这是我的设计编码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.selectboxes.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebForm1.aspx/BindDatatoDropdown",
            data: "{}",
            dataType: "json",
            success: function (data) {
                alert("hi");
                $.each(data.d, function (key, value) {
                     $("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
                });
            },
             error: function ajaxError(response) {
            alert(response.status + ' ' + response.statusText);
            }
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList ID="ddlCountry" runat="server" />
    </div>
    </form>

我希望在页面加载时下拉项目详细信息。它始终显示错误警报。它说500内部服务器错误

1 个答案:

答案 0 :(得分:2)

如果还需要帮助,请

ASPX代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

    <!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 src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

        <script type="text/javascript" language="javascript">
            $(document).ready(function () {
                $.ajax
                  ({
                      type: "POST",
                      url: "test.aspx/options",
                      data: '',
                      contentType: "application/json;charset=utf-8",
                      dataType: "json",
                      success: function (data) {

                          var lankanListArray = JSON.parse(data.d);



                          // running a loop
                          $.each(lankanListArray, function (index, value) {
                              $("#ddlCountry").append($("<option></option>").val(this.name).html(this.price));
                          });




                      },
                      error: function (err) {

                      }
                  });

            });
       </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
       <asp:DropDownList ID="ddlCountry" runat="server" />
        </div>
        </form>
    </body>
    </html>



    C# CODE


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using MailDLL;
    using System.Web.Services;
    using System.Web.Script.Serialization;
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }


        [WebMethod]
        public static string options()
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            landmarkEntities A = new landmarkEntities();
            var b = A.sp_test().ToList();


            List<Test1> c=new List<Test1>();
            foreach (var s in b)
            {
                Test1 testobj = new Test1();
                testobj.name = s.Name;
                testobj.price = s.price;
                c.Add(testobj);

            }

            string jsonString = serializer.Serialize(c);
            return jsonString;

        }

        public class Test1
        {
            public Test1(string _name, string _price)
            {
                name = _name;
                price = _price;


            }
            public Test1()
            { }
            public string name { get; set; }
            public string price { get; set; }

        }   


    }


first add refrence to these js files in your application.

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>



then create class that will hold the data

 public class Test1
    {
        public Test1(string _name, string _price)
        {
            name = _name;
            price = _price;


        }
        public Test1()
        { }
        public string name { get; set; }
        public string price { get; set; }

    }




add using System.Web.Script.Serialization; in your cs page so that you can use JavaScriptSerializer.
the create a list of type class.
Loop through the data.

inside loop create object of a class.
assign the data that you had fetched to the class,
add the object to the list of type class.

then Serialize the list using serializer.Serialize() function.And return as string.

 string jsonString = serializer.Serialize(c);
        return jsonString;