级联下拉列表搜索

当前有三个下拉列表，其级联取决于选择。这部分工作正常。级联下拉列表搜索

控制器娄

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(); 
    } 
}

我已经创建的索引视图dropdownlists这显示了级联正确的价值观。现在试图使用选定的值来显示搜索结果 - 不知道如何做到这一点？如何实现在下拉列表中选择的值以显示数据库中的相应数据 - 任何想法？索引视图

@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>

任何意见可以理解

来源

2012-02-26 Daza Aza

什么不起作用？ – RPM1984 2012-02-27 05:32:17

改变你的JavaScript。我使用了类似于countres和states的类似的东西（并且还使用了客户端验证）。

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(); 
      } 
     }); 
    }); 
}

来源

2012-02-27 10:00:09 Zoli

级联下拉列表搜索

回答

相关问题