Question

我有这样的产品型号

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
}

如您所见，我只有三种产品可供选择：自行车，汽车或火车。

我的创建新产品视图目前看起来像这样......我有一个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")
}

现在，我想要做的是，只显示与所选产品相关的产品信息。例如，如果我选择Bike作为产品，那么我只想看到BikeMake和BikeModel可用 - 即我不希望看到Car / Train-Make＆amp; Model在那里，因为它是无关紧要的。

Answer 1

您可以将与每种车型相关的属性分组到容器div中，并根据下拉列表中的选择有条件地隐藏/显示。

例如

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

现在听SELECT元素上的change事件，只显示那个容器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(); 
    })
});

例如，如果您在下拉列表中选择第二项，则jQuery选择器代码$("[my-section='section-" + $(this).val() + "']")将返回my-section属性值设置为"section-1"的div

根据下拉选择显示信息 - MVC 5

1 个答案: