web-dev-qa-db-fra.com

Comment lier des données JSON à une liste déroulante dans Asp.net MVC à l'aide de jQuery

J'essaie de lier les données JSON à la liste déroulante 

Mon scénario est que je veux obtenir des données et se lier à une liste déroulante dynamique,

Dans Seperate Class, j’ai utilisé linq pour obtenir des données telles que

    public SelectList getProjects()
    {
        IEnumerable<SelectListItem> projectslist = (from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        return new SelectList(projectslist, "Value", "Text", PROJ_ID);
    }

Dans le contrôleur:

ViewBag.ProjectList=(from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });

En vue:

    @for (int i = 0; i <2; i++)
    {                                    {
   @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID, (SelectList)ViewBag.ProjectList, "-- Choose a Project --", new { @class = "ddlProjectvalue" })
    }

Maintenant, j'essaie de faire comme si nous avions trois listes déroulantes, nous sélectionnons un élément de liste dans la première liste déroulante ne devrait pas s'afficher dans la deuxième liste déroulante, et dans la troisième liste déroulante ne devrait pas afficher les deux éléments de liste précédemment sélectionnés car j'ai un script écrit comme :

     <script>
    $(document).ready(function () {
        $('.ddlProjectvalue').change(function () {
            debugger;
            var selectedValue = $(this).val();
            if (selectedValue != null && selectedValue != '') {
                debugger;
                $.ajax({

                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: "/Employer/GetDDLData?selectedValue="+selectedValue,
                    data: "{}",
                    dataType: "Json",
                    success: function (data) {

                        // first remove the current options if any
                        $('.ddlProjectvalue').find('option').remove();

                        // next iterate thru your object adding each option to the drop down\    
                        $(data).each(function (index, item) { // GETTING ERROR HERE
                            debugger;

                            $('.ddlProjectvalue').append($('<option></option>').val(item.Value).html(item.Text));
                        });
                    },
                    error: function ajaxError(response) {
                    alert(response.status + ' ' + response.statusText);
                }
            });
        }
      });
    });
   </script>

et je retourne des données JSON du contrôleur:

    public ActionResult GetDDLData(string selectedValue)
    {
        int projectid = Convert.ToInt32(selectedValue);

        IEnumerable<SelectListItem> projectslist = (from proj in db.PROJECTs where proj.IS_DELETED == "N" && proj.ID != projectid select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        var result = new SelectList(projectslist, "Value", "Text", tm.PROJ_ID);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

J'ai essayé, mais obtenir l'erreur comme 

      "Syntax error, Unrecognized Expression"

où je me trompe, aidez-moi s'il vous plaît. 

c#jqueryasp.net-mvcjson
4
Sanjay

Cela vous aidera: 

$.ajax({
            url: "@Url.Action("GetDDLData","Employer")",
            data: {selectedValue:selectedValue},
            dataType: "json",
            type: "GET",
            error: function () {
                alert(" An error occurred.");
            },
            success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".ddlProjectvalue").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".ddlProjectvalue").append(optionhtml);
                });
            }
        });
11
Ni3
//Controller Code

public ActionResult getAccount()
         {
             var result = new SelectList(db.Partymsts, "Account", "Account");
             return Json(result, JsonRequestBehavior.AllowGet);
         }

// js code

 $.ajax({
                type: "POST",
                url: "/NewMaster/getAccount",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".cs3").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".cs3").append(optionhtml);
                });
            }
            });


// html code


<select id="cs3" name="cs3"   class="cs3 form-control input-small"> </select>




its working !!
3
sweta P. Patel

Nous avons fait de cette façon 

Dropdown.append($('<option></option>').val(item.col1).text(item.col2));

0
Devendra Patel

Si votre json est correct, le programme ci-dessous fonctionnera. Mettez le code dans votre succès ajax

success:function(data){
 $('.ddlProjectvalue').empty();
 $.each(data,function (index, item) { 
    $('.ddlProjectvalue').append$('<option>', {
                                value: item.Value,
                                text: item.Text
                            }, '<option/>')
                            }
                        );
   }
0
Mir Gulam Sarwar
function GetDropDownData(stateid) {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("getdist","Home")',
            data: {stateid:stateid},
            dataType: 'json',
            success: function(data)
            {
                $("#districtId").empty();
                $("#districtId").append('<option value="">--Select--</option>');
                $.each(data, function (id, result) {
                        $("#districtId").append('<option value"'+result.Value+'">'+result.Text+'</option>');
                    });
                },
                failure: function () {
                    $("#districtId").empty();
                    $("#districtId").append('<option value="">--Select--</option>');
                }
            });
    }
0
Meera