web-dev-qa-db-fra.com

Comment remplir un DropDown en utilisant Jquery Ajax Call?

J'ai un WebMethod qui obtient les données que je veux remplir DropDown dans un DataSet. Actuellement, je remplis la liste déroulante en utilisant un objet codé en dur. Mais je veux remplacer cet objet codé en dur par des données renvoyées par webmethod.

 [System.Web.Services.WebMethod]
         public static string GetDropDownDataWM(string name)
         {
             //return "Hello " + name + Environment.NewLine + "The Current Time is: "
             //    + DateTime.Now.ToString();

             var msg = "arbaaz";

             string[] name1 = new string[1];
             string[] Value = new string[1];
             name1[0] = "@Empcode";
             Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim();
             DataSet ds = new DataSet();
             dboperation dbo = new dboperation();
             ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1);

             return ds.GetXml(); 

         }

CÔTÉ CLIENT (MISE À JOUR 1):

  <script type = "text/javascript">
    function GetDropDownData() {
        var myDropDownList = $('.myDropDownLisTId');

        $.ajax({
            type: "POST",
            url: "test.aspx/GetDropDownDataWM",
            data: '{name: "abc" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $.each(jQuery.parseJSON(data.d), function () {
                    myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode']));
                });
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        console.log(response.d);
        alert(response.d);
    }
</script>
c#javascriptjqueryasp.netajax
7
SamuraiJack
function GetDropDownData() {
    $.ajax({
        type: "POST",
        url: "test.aspx/GetDropDownDataWM",
        data: '{name: "abc" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data.d)
                {
                    $.each(data.d, function (){
                        $(".myDropDownLisTId").append($("<option     />").val(this.KeyName).text(this.ValueName));
                    });
                },
        failure: function () {
            alert("Failed!");
        }
    });
}
13
Chindu Krishna

A partir de WebMethod, n'envoyez pas DataSet directement, envoyez XML...

[System.Web.Services.WebMethod]
public static string GetDropDownDataWM(string name)
{
    DataSet ds = new DataSet();
    ds.Tables.Add("Table0");
    ds.Tables[0].Columns.Add("OptionValue");
    ds.Tables[0].Columns.Add("OptionText");
    ds.Tables[0].Rows.Add("0", "test 0");
    ds.Tables[0].Rows.Add("1", "test 1");
    ds.Tables[0].Rows.Add("2", "test 2");
    ds.Tables[0].Rows.Add("3", "test 3");
    ds.Tables[0].Rows.Add("4", "test 4");

    return ds.GetXml();
}

Avant Ajax appel ...

var myDropDownList = $('.myDropDownLisTId');

Essayez comme ci-dessous ... (à l'intérieur Ajax appel)

success: function (response) {
    debugger;

    $(response.d).find('Table0').each(function () {
           var OptionValue = $(this).find('OptionValue').text();
           var OptionText = $(this).find('OptionText').text();
           var option = $("<option>" + OptionText + "</option>");
           option.attr("value", OptionValue);

           myDropDownList.append(option);
     });
},

Remarque:

  1. OptionValue et OptionText sont les colonnes de la table DataSet.

  2. $(response.d).find('Table0').each(function (){}) - Voici Table0 est le nom de la table dans DataSet.

1
Tadit Dash
[System.Web.Services.WebMethod]
     public static string GetDropDownDataWM(string name)
     {
         //return "Hello " + name + Environment.NewLine + "The Current Time is: "
         //    + DateTime.Now.ToString();

         var msg = "arbaaz";

         string[] name1 = new string[1];
         string[] Value = new string[1];
         name1[0] = "@Empcode";
         Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim();
         DataSet ds = new DataSet();
         dboperation dbo = new dboperation();
         ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1);

         return DataSetToJSON(ds); 

     }

public static string DataSetToJSON(DataSet ds)
{

    Dictionary<string, object> dict = new Dictionary<string, object>();
    foreach (DataTable dt in ds.Tables)
    {
        object[] arr = new object[dt.Rows.Count + 1];

        for (int i = 0; i <= dt.Rows.Count - 1; i++)
        {
            arr[i] = dt.Rows[i].ItemArray;
        }

        dict.Add(dt.TableName, arr);
    }

    var lstJson = Newtonsoft.Json.JsonConvert.SerializeObject(dict);
    return lstJson;
}

Ajax Call

function GetAssociation() {

        var myDropDownList = $("#myDropDownLisTId");
        var post_data = JSON.stringify({ "name": "xyz"});
        $.ajax({
            type: "POST",
            url: "test.aspx/GetDropDownDataWM",
            data: post_data,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                json_data = JSON.parse(response.d);
                myDropDownList.empty();
                for(i=0; i<json_data.Table.length; i++)
                {

                    myDropDownList.append($("<option></option>").val(json_data.Table[i][0]).html(json_data.Table[i][1]));
                }

            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
0
Prasant
 var theDropDown = document.getElementById("myDropDownLisTId");
                theDropDown.length = 0;
                $.each(items, function (key, value) {

                    $("#myDropDownLisTId").append($("<option></option>").val(value.PKId).html(value.SubDesc));

ici "SubDesc", PKId décrit la valeur qui sort de la base de données., vous devez séparer votre valeur de l'ensemble de données.

0
Venki