c# MVC 实体框架 - 仅显示正确的子记录

Question

I'm new to MVC and Entity framework and i am building my first web app with those 2 technologies. I am following a great tutorial (database first) and i have my basic application working now. But there is something the tutorial doesn't talk about.

Let's take this scenario: I have 3 tables: Cars, Manufacturers, Models.

When i go to the auto generated view for create a new car, i have the correct dropdowns to enter the manufacturer and the model. But the dropdown with the models list is showing all the models and not just the ones related to the manufacturer i chose.

MODELS

Models

using System;
using System.Collections.Generic;

public partial class model
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public model()
    {
        this.cars = new HashSet<car>();
        this.versions = new HashSet<version>();
    }

    public int id { get; set; }
    public string name { get; set; }
    public Nullable<int> manufacturerId { get; set; }
    public bool active { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<car> cars { get; set; }
    public virtual manufacturer manufacturer { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<version> versions { get; set; }
}

Manufacturers

using System;
using System.Collections.Generic;

public partial class manufacturer
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public manufacturer()
    {
        this.cars = new HashSet<car>();
        this.models = new HashSet<model>();
    }

    public int id { get; set; }
    public string name { get; set; }
    public bool active { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<car> cars { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<model> models { get; set; }
}

Cars

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public partial class car
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public car()
    {
        this.carimages = new HashSet<carimage>();
    }

    public int id { get; set; }
    [Display(Name = "#")]
    public Nullable<int> bodytypeId { get; set; }
    [Display(Name = "Body Type")]
    public Nullable<int> manufacturerId { get; set; }
    [Display(Name = "Model")]
    public Nullable<int> modelId { get; set; }
    [Display(Name = "Version")]
    public Nullable<int> versionId { get; set; }
    [Display(Name = "Fuel")]
    public Nullable<int> fuelId { get; set; }
    [Display(Name = "Transmission")]
    public Nullable<int> transmissionId { get; set; }
    [Display(Name = "Color")]
    public Nullable<int> colorId { get; set; }
    [Display(Name = "HP")]
    public Nullable<int> horsePower { get; set; }
    [Display(Name = "KW")]
    public Nullable<int> kw { get; set; }
    [Display(Name = "CC")]
    public Nullable<int> cc { get; set; }
    [Display(Name = "CO2")]
    public Nullable<double> Co2Emissions { get; set; }
    [Display(Name = "Mileage")]
    public Nullable<int> mileage { get; set; }
    [Display(Name = "Year")]
    public Nullable<int> year { get; set; }
    [Display(Name = "Doors")]
    public Nullable<int> doors { get; set; }
    [Display(Name = "Seats")]
    public Nullable<int> seats { get; set; }
    [Display(Name = "Plate")]
    public string plate { get; set; }
    [Display(Name = "Price")]
    public Nullable<int> price { get; set; }
    [Display(Name = "Short Description")]
    public string shortDescription { get; set; }
    [Display(Name = "Long Description")]
    public string longDescription { get; set; }
    [Display(Name = "Sold")]
    public bool sold { get; set; }
    [Display(Name = "Active")]
    public bool active { get; set; }
    [Display(Name = "Date Added")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy hh:mm}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> dateAdded { get; set; }
    [Display(Name = "Date Sold")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy hh:mm}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> dateSold { get; set; }

    public virtual bodytype bodytype { get; set; }
    public virtual color color { get; set; }
    public virtual fuel fuel { get; set; }
    public virtual manufacturer manufacturer { get; set; }
    public virtual model model { get; set; }
    public virtual transmission transmission { get; set; }
    public virtual version version { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<carimage> carimages { get; set; }
}

CONTROLLER

Cars

    // GET: cars/Create
    public ActionResult Create()
    {
        ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name");
        ViewBag.colorId = new SelectList(db.colors, "id", "name");
        ViewBag.fuelId = new SelectList(db.fuels, "id", "name");
        ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name");
        ViewBag.modelId = new SelectList(db.models, "id", "name");
        ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name");
        ViewBag.versionId = new SelectList(db.versions, "id", "name");
        return View();
    }

    // POST: cars/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "id,bodytypeId,manufacturerId,modelId,versionId,fuelId,transmissionId,colorId,horsePower,kw,cc,Co2Emissions,mileage,year,doors,seats,plate,price,shortDescription,longDescription,sold,active,dateAdded,dateSold")] car car)
    {
        if (ModelState.IsValid)
        {
            db.cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.bodytypeId = new SelectList(db.bodytypes, "id", "name", car.bodytypeId);
        ViewBag.colorId = new SelectList(db.colors, "id", "name", car.colorId);
        ViewBag.fuelId = new SelectList(db.fuels, "id", "name", car.fuelId);
        ViewBag.manufacturerId = new SelectList(db.manufacturers, "id", "name", car.manufacturerId);
        ViewBag.modelId = new SelectList(db.models, "id", "name", car.modelId);
        ViewBag.transmissionId = new SelectList(db.transmissions, "id", "name", car.transmissionId);
        ViewBag.versionId = new SelectList(db.versions, "id", "name", car.versionId);
        return View(car);
    }

VIEW

Create Car

@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>car</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.bodytypeId, "bodytypeId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("bodytypeId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.bodytypeId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.manufacturerId, "manufacturerId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("manufacturerId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.manufacturerId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.modelId, "modelId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("modelId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.modelId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.versionId, "versionId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("versionId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.versionId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.fuelId, "fuelId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("fuelId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.fuelId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.transmissionId, "transmissionId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("transmissionId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.transmissionId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.colorId, "colorId", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("colorId", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.colorId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.horsePower, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.horsePower, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.horsePower, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.kw, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.kw, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.kw, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.cc, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.cc, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.cc, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Co2Emissions, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Co2Emissions, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Co2Emissions, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.mileage, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.mileage, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.mileage, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.year, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.year, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.year, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.doors, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.doors, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.doors, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.seats, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.seats, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.seats, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.plate, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.plate, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.plate, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.price, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.price, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.price, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.shortDescription, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.shortDescription, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.shortDescription, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.longDescription, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.longDescription, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.longDescription, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.sold, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.sold)
                @Html.ValidationMessageFor(model => model.sold, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.active, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.active)
                @Html.ValidationMessageFor(model => model.active, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.dateAdded, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.dateAdded, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.dateAdded, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.dateSold, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.dateSold, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.dateSold, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

Answer 1

The problem is in the controller in this line:

 ViewBag.modelId = new SelectList(db.models, "id", "name");

This loads all available models from the db as options. I guess you do not know the manufacturer at this point. (Else you can add a simple where clause here: db.models.Where(mdl => mdl.manufacturer == knownManufacturer) ).

A solution to filter the options on the client side would be to add the manufacturer as additional html attribute to the <option> tags for the models. adding html class tag under option in html dropdownlist

Then use javascript that listens to changes of the manufacturer dropdown and hides all options that do not match the selected manufacturer.