ddslick dropdown json data with asp.net c#

Question

0.00/5 (No votes)

See more:

I searched the site but couldn't find what I exactly looking for. Then I end up with asking a question. My problem is I can't fill the ddslick dropdown with the json data from asp.net c# webmethod.The dropdown list appears with the default value.But when I click the dropdown in order to see other options, nothing happens.I can't fill the data to dropdown I think. Here is my codes. Could someone tell me what am I doing wrong? Combo is not opening

C#

public class ComboBox
{
     private bool _selected = false;
     public ComboBox()
     {
     }
     public string text { get; set; }
     public string value { get; set; }
     public bool selected
     {
          get { return _selected; }
          set { _selected = value; }
     }
     public string description{ get; set; }
}

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetVehicleComboData()
{
  SqlToolkit mySqlKit = new SqlToolkit();
  mySqlKit.DoConnect();
  DataTable dt = mySqlKit.DoDTstr("Select VehicleTypeId, VehicleTypeName, VehicleTypeInfo from TBLVEHICLETYPES UNION ALL select '0','Lütfen Araç Tipi Seçiniz','' Order by VehicleTypeId ");
  List<ComboBox> comboData = new List<ComboBox>();
  foreach (DataRow dr in dt.Rows)
  { 
    ComboBox combo = new ComboBox();
    combo.text = dr["VehicleTypeName"].ToString();
    combo.value = dr["VehicleTypeId"].ToString();
    combo.description = dr["VehicleTypeInfo"].ToString();
    comboData.Add(combo);
  }
  var jsonForVehicles = JsonConvert.SerializeObject(comboData, Formatting.Indented);
  mySqlKit.DoDisconnect();
  return jsonForVehicles;
}

Javascript

<script type="text/javascript">
$.ajax({   
    type: 'POST',
    url: 'CreateOffer.aspx/GetVehicleComboData',
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (myData) {
        $('#demoTruncated').ddslick({
                data : myData,
                selectText: "Select a vehicle type",
                truncateDescription: true,
                onSelected: function (data) {
                    //callback function: do something with selectedData;
                    alert(data.selectedIndex);
                    displaySelectedData("5: Dropdown with truncated description", data);
                }
            });
    },
    error: function () {
    }
});
</script>

SQL

I debug the javascript with firebug and I saw that myData object coming from server side is like below. I can only see one object. But there must be 4 objects, I think. Because I have 4 records to be seen on dropdown list.

myData : Object { d="[\r\n {\r\n "text": "Lü...ription": "de4"\r\n }\r\n]"}

d : "[ { "text": "Lütfen Araç Tipi Seçiniz", "value": "0", "selected": false, "description": "" }, { "text": "Tenteli Tır", "value": "1", "selected": false, "description": "de1" }, { "text": "Kapalı Kasa Tır", "value": "2", "selected": false, "description": "de2" }, { "text": "Kamyon Römork Tır ", "value": "3", "selected": false, "description": "de3" }, { "text": "Kamyon", "value": "4", "selected": false, "description": "de4" } ]"

Posted 28-Nov-13 22:55pm

altanalansu

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jain Nishant · Accepted Answer · 2013-12-05T00:59:00

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
    $(function() {
    $.ajax({
        type: 'POST',
        url: '/Webservice/MyService/FillDropDown',
        cache: false,
        async:false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(data) {
            $('#ddslick').html(data.d);
        }
    });
    });

    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="ddslick"></select>
    </div>
    </form>
</body>
</html>

Now the Webservice.....

VB

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
 [System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService {


    [WebMethod]
    public string FillDropDown()
    {
        string _str = string.Empty;
        MyClass obj = new MyClass();
       _str= obj.FillDropDown();
       return _str;
    }

}

Now, the class code called...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Configuration;

public class MyClass
{
string con = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string _str = string.Empty;

public string FillDropDown()
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
using (SqlConnection conn = new SqlConnection(con))
{
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "proc_GetddlData";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = conn;
try
{
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
sb.Append("<option>" + dr[0] + "</option>");
}
_str = sb.ToString();
}
catch (Exception ex)
{
throw ex;
}

}
return _str;
}
}

Into the SP ,you only need to get the dropdown values .....
Try and Run, hope your problem will be solved.