Question

目前有三个下拉列表根据选择进行级联。这部分工作正常。

控制器轰鸣声

namespace CascadingDropdownSample.Controllers
{
public class HomeController : Controller
{
   CascadeSampleEntities2 cse = new CascadeSampleEntities2();

   public ActionResult Index()
   {

       ViewBag.Cars = cse.Cars.ToList();
       ViewBag.Models = cse.Models.ToList();
       ViewBag.Colours = cse.Colours.ToList();
       return View();

   }
    private IList<Model> GetModels(int id)
    {
        return cse.Models.Where(m => m.CarId == id).ToList();
    }

    private IList<Colour> GetColours(int id)
    {
        return cse.Colours.Where(c => c.ColourId == id).ToList();
    }


    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult LoadModelsByCar(string id)
    {
        var modelList = this.GetModels(Convert.ToInt32(id));

        var modelData = modelList.Select(m => new SelectListItem()
        {
            Text = m.ModelName,
            Value = m.ModelId.ToString(),

        });

        return Json(modelData, JsonRequestBehavior.AllowGet);
    }

    [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult LoadColoursByModel(string id)
    {
        var colourList = this.GetColours(Convert.ToInt32(id));

        var colourData = colourList.Select(c => new SelectListItem()
        {
            Text = c.ColourName,
            Value = c.ColourId.ToString(),

        });


        return Json(colourData, JsonRequestBehavior.AllowGet);
    }



    public ActionResult About()
    {
        return View();
    }
}

我在索引视图上创建了下拉列表，显示了级联的正确值。现在尝试使用所选值来显示搜索结果 - 不确定如何执行此操作？如何实现下拉列表中选择的值以显示数据库中的相应数据 - 任何想法？索引视图

  @model CascadingDropdownSample.Models.CascadeSampleEntities2
@{
       ViewBag.Title = "Home Page";
 }

 <h2>Cars</h2>

                    }));
                    $.each(carData, function (index, itemData) {

                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
            });
            $("#ddlModels").change(function () {
                var idColour = $(this).val();
                $.getJSON("/Home/LoadColoursByModel", { id: idColour },
                function (modelData) {
                    var select = $("#ddlColours");
                    select.empty();
                    select.append($('<option/>', {
                        value: 0,
                        text: "Select a Colour"
                    }));
                    $.each(modelData, function (index, itemData) {

                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
            });
});

      <p>
    Select Car manufacture  @Html.DropDownListFor(Model => Model.Cars, new SelectList(ViewBag.Cars as System.Collections.IEnumerable, "CarId", "CarName"),
        new { id = "ddlCars" })
  </p>
 <p>
   Select Car Model @Html.DropDownListFor(Model => Model.Models, new SelectList(Enumerable.Empty<SelectListItem>(), "ModelId", "ModelName"), 
        "Select a Model", new { id = "ddlModels" })

 </p>
 <p>
     Select colur of car @Html.DropDownListFor(Model => Model.Colours, new SelectList(Enumerable.Empty<SelectListItem>(), "ColourId", "ColourName"), 
              "Select a Colour", new { id = "ddlColours" })

   </p>

任何建议将不胜感激

Answer 1

更改您的JavaScript。我使用了与国家和州相似的东西（并且还使用客户端验证）。

function setDdlState() {
    var state = $('select#ddlState');
    if (state.children().length < 2) {
        $('#HasState').val('0');
        state.attr('disabled', 'disabled');
        state.removeAttr('class');
        var err = $('span[data-valmsg-for="State"]').removeClass('field-validation-error').addClass('field-validation-valid');
    }
    else {
        state.removeAttr('disabled');
        $('#HasState').val('1');
    }
}

function selectDdlCountry() {
    $('#ddlCountry').change(function () {
        var countryId = $(this).val();

        $.ajax({
            url: 'GetState',
            type: 'POST',
            data: '{"parentCountryID":"' + countryId + '"}',
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                var select = $('select#ddlState');
                select.empty();
                $.each(data, function (key, TMManagers) {
                    select.append(
                    '<option value="' + TMManagers.Value + '">'
                    + TMManagers.Text +
                    '</option>');
                });
                setDdlState();
            }
        });
    });
}

级联下拉列表搜索

1 个答案: