の情報を表示しMVC 5

Question

は、私はあなたが私だけから選択する3つの製品を持って、見ることができるように、この

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") 
 
}

のためのリストの選択ドロップダウンを持っている場合は、私が欲しいもの

を作成マイ選択した製品に関連する製品情報のみが表示されます。たとえば、自転車を製品として選択した場合、私はBikeMakeとBikeModelが利用可能であることを確認する必要があります。車/電車を見たくない - つまり&モデルは無関係にしてください。

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要素の変更イベントに耳を傾け、それだけでコンテナの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(); 
    }) 
}); 

あなたがドロップダウンに2番目の項目を選択した場合は、jQueryのセレクタコード$("[my-section='section-" + $(this).val() + "']")は"section-1"