relation entre deux listes déroulantes en mvc

Question

J'ai deux listes déroulantes, lorsque je sélectionne une option dans la première, les options connexes s'affichent dans la deuxième liste déroulante.J'ai utilisé jquery mais je ne sais pas pourquoi cela ne fonctionne pas. c'est la page cshtml:

 <div class="form-group">
        @Html.LabelFor(model => model.ProductSubGroup.ProductGroupID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("ProductGroupID", (SelectList)ViewBag.Type, "-- انتخاب ---", htmlAttributes: new { @class = "form-control",id = "rdbGroup" })
            @Html.ValidationMessageFor(model => model.ProductSubGroup.ProductGroupID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProductSubGroupID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("ProductSubGroupID", (SelectList)ViewBag.ProductSubGroupID, "-- انتخاب ---", htmlAttributes: new { @class = "form-control",id = "rdbSubGroup" })
            @Html.ValidationMessageFor(model => model.ProductSubGroupID, "", new { @class = "text-danger" })
        </div>
    </div>

Et c'est le contrôleur

public ActionResult SelectCategory(int id)
 {
     var categoris = db.ProductSubGroup.Where(m => m.ProductGroup.ProductGroupID == id).Select(c => new { c.ProductSubGroupID, c.ProductSubGroupTitle});
     return Json(categoris, JsonRequestBehavior.AllowGet);
 }

 // GET: Admin/Products/Create
 public ActionResult Create()
 {

     ViewBag.ProductGroupID=new SelectList(db.ProductGroup,"ProductGroupID","Produ  ctGroupTitle");
     ViewBag.ProductSubGroupID = new SelectList(db.ProductSubGroup, "ProductSubGroupID", "ProductSubGroupTitle");


         return View();
 }

Et c'est javascript

  $('#rdbGroup').change(function () {
                jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) {
                    $('#rdbSubGroup').empty();
                    jQuery.each(data, function (i) {
                        var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
                        $("#rdbSubGroup").append(option);
                    });
                });
            });

javascript c# jquery asp.net-mvc

-1

Mansoure 16 avril 2018 à 10:45

Answer 1

Un échantillon du mien

cs.html

<div class="form-group">
        @Html.LabelFor(m => m.FakulteId, "Fakülte", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-6">
            @Html.DropDownListFor(m => m.FakulteId, ViewBag.Fakulte as SelectList, "Fakülte Seçiniz", htmlAttributes: new { @class = "form-control", @id = "fakulteSec", @onchange = "secim()" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BolumId, "Bölüm", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-6">
            @Html.DropDownListFor(m => m.BolumId, ViewBag.Bolum as SelectList, "Bölüm Seçiniz", htmlAttributes: new { @class = "form-control", @id = "bolum" })
        </div>
    </div>

contrôleur

public JsonResult FakulteBolumDrop(int id)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<Bolum> bolum = db.Bolum.Where(b => b.FakulteId == id).ToList();
        return Json(bolum, JsonRequestBehavior.AllowGet);
    }

.js

function secim() {
        var fakulteId = $('#fakulteSec').val();
        //alert(fakulteId);
        $.ajax({
            url: '/Rektor/FakulteBolumDrop?id=' + fakulteId,
            type: "POST",
            dataType: "JSON",
            data: { Fakulte: fakulteId },
            success: function (bolumler) {
                $("#bolum").html("");
                $.each(bolumler, function (i, bolum) {
                    $("#bolum").append(
                        $('<option></option>').val(bolum.BolumId).html(bolum.Adi));
                });
            }
        });
    }

0

Onur Önder 16 avril 2018 à 10:25

Answer 2

Vous devez enregistrer votre événement de modification de rdbGroup Drop Down dans le

 $(document).ready(function(){

  });

Sinon, il ne sera pas renvoyé.

0

Abdul Rehman Zafar 16 avril 2018 à 07:48

Answer 3

Utilisez this.value ou $(this).val() au lieu de $(this).attr('value').

Essayer

 $('#rdbGroup').on('change',function () {// or $(document).on('change', '#rdbGroup',function (){
      $.getJSON('@Url.Action("SelectCategory")', { id: this.value }, function (data) {
       $('#rdbSubGroup').empty();
       $.each(data, function (i,item) {// if data is json string form the replace data by $.parseJSON(data)
          //console.log(item.Id); console.log(item.Title);
          $('#rdbSubGroup').append($('<option>', { 
               value:item.Id,
               text :item.Title 
        })); //OR you can use --- $('#rdbSubGroup').append($("<option></option>").attr("value",item.Id).text(item.Title)); 
         });
      });
    });

OU

$('#rdbGroup').on('change',function () {// or $(document).on('change', '#rdbGroup',function (){
   var id= this.value;
    $.ajax({
        url: '@Url.Action("SelectCategory")',
        data: { 
            id: id
          },
        dataType: 'json',
        async: false
    }).done(function (data) {
        $("#rdbSubGroup").html("");           
        $.each(data, function (i,item) {         
            $('#rdbSubGroup').append($("<option></option>").attr("value",item.Id).text(item.Title)); 
            //OR $('#rdbSubGroup').append($('<option>', { value:item.Id, text :item.Title}));    
          });
       });        
    });

0

Ashiquzzaman 17 avril 2018 à 03:33

relation entre deux listes déroulantes en mvc

3 réponses

De nouvelles questions