Display information depending on drop down selection - MVC 5

Question

I have a Product Model like this

public class ProductViewModel
{
    public int Id { get; set; }
    public string Description { get; set; }
    public bool IsActive { get; set; }
    public ProductTypeFlag ProductType { get; set; }

    public string BikeMake { get; set; }
    public string BikeModel { get; set; }

    public string CarMake { get; set; }
    public string CarModel { get; set; }

    public string TrainMake { get; set; }
    public string TrainModel { get; set; }
}

public enum ProductTypeFlag
{
    Bike = 0,
    Car = 1,
    Train = 2
}

As you can see, I only have three products to choose from: bike, car or train.

My Create New Product View is currently looking like this ... where I have a drop down list selection for ProductType

 @model WebApplication14.Models.ProductViewModel @{ ViewBag.Title = "Create"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>ProductViewModel</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <div class="checkbox"> @Html.EditorFor(model => model.IsActive) @Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" }) </div> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.ProductType, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EnumDropDownListFor(model => model.ProductType, htmlAttributes: new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.ProductType, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.BikeMake, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.BikeMake, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.BikeMake, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.BikeModel, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.BikeModel, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.BikeModel, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.CarMake, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.CarMake, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.CarMake, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.CarModel, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.CarModel, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.CarModel, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.TrainMake, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.TrainMake, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.TrainMake, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.TrainModel, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.TrainModel, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.TrainModel, "", 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> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Now, what I want to do is, only display Product information that is relevant to selected product. For example, if I select Bike as a product then I only want to see the BikeMake and BikeModel available - ie I do not want to see Car/Train-Make&Model to be there as it is irrelevant.

Answer 1

You can group the properties related to each vehicle type in a container div and conditionally hide/show based on the selection from the dropdown.

For example

<div my-section="section-0" style="display:none;">
   <div class="form-group">
        @Html.LabelFor(model => model.BikeMake, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.BikeMake, new { @class = "form-control" } )
            @Html.ValidationMessageFor(model => model.BikeMake)
        </div>
   </div>
</div>
<div my-section="section-1" style="display:none;">
   <!-- Inputs for code car related fields goes here -->
</div>
<div my-section="section-2" style="display:none;">
   <!-- Inputs for Train related fields goes here -->
</div>

And now listen to the change event on your SELECT element and show only that container div.

$(function () {

    // Show the section for the current(default) selection of the dropdown
    var t = $("#ProductType").val();  
    var item = $("[my-section='section-" + t + "']").show();

    // Wire up change event code for dropdown
    $("#ProductType").change(function (e) {
        // Hide all the sections (including previously shown)
        $("[my-section]").hide();

        //Select only the section corresponding the the dropdown selection
        var item = $("[my-section='section-" + $(this).val() + "']").show(); 
    })
});

For example, If you select the second item in your dropdown, The jQuery selector code $("[my-section='section-" + $(this).val() + "']") will return the div with my-section attribute value set to "section-1"