ユーザーの選択したオプションでWebフォームベースをレンダリングできない

Question

私はjqueryを初めて使用しています。私は理解しやすくするために、単純なMVC 5のサンプルアプリケーションを作成する必要があります。

これは私がやってみたかった何を私のCustomerViewModel

public class CustomerViewModel 
{ 
    public int Id { get; set; } 
    [Display(Name ="Existing Customer?")] 
    [Required(ErrorMessage = "Are you an existing customer?")] 
    public bool? ExistingCustomer { get; set; } 

    [Display(Name = "Have CNN #?")] 
    [RequiredIf("ExistingCustomer", true, ErrorMessage = "Do you have CNN?")] 
    public bool? DoYouHaveCnnNumber { get; set; } 

    [Display(Name = "Your CCN #")] 
    [RequiredIf("ExistingCustomer", true, ErrorMessage = "Enter a CCN number")] // IF it is an existing customer then ask for CustomerConfirmationNumber 
    public string CustomerConfirmationNumber { get; set; } // Customer to provide CustomerConfirmationNumber (CCN) 

    [Display(Name = "Reason?")] 
    [RequiredIf("ExistingCustomer", false, ErrorMessage = "Provide a reason why you dont have CCN.")] // If an isting customer doesn't have a CCN then ask for a reason 
    public string ReasonForNotHaveCCN { get; set; } // Customer to give a reason for why they dont have CustomerConfirmationNumber 
} 

するためのコードでは、人は既存の顧客である場合には、第1尋ねるアプリを作成することです。人が答えないなら、私は何もする必要はありません。しかし、その人が「はい」と答えた場合は、その人がCustomerConfirmationNumberを持っているかどうかを尋ねる別の質問を表示したい。その人が「はい」と回答したら、その人に番号を入力するように依頼します。人が答えないなら、私は彼らになぜ彼らがないのかの理由を入力するように頼む。下の写真は、問題をより詳細に説明します。

私が開始するには、いくつかのjQueryを使ってビューを作成しました。これで進歩はあまりありませんが、すでに数時間かかりました。誰かがこれをコード化する方法を手伝ってくれるかと期待していました。

ありがとうございました。

これは、ロジックのあなたの説明に基づいて、私の見る

@model WebApplication2.Models.CustomerViewModel 

@{ 
    ViewBag.Title = "Create"; 

    bool existingCustomerFlag = Model.ExistingCustomer.HasValue ? Model.ExistingCustomer.Value : false; 
    string existingCustomerClass = existingCustomerFlag ? "" : "hidden"; 

    bool doYouHaveCNNFlag = Model.DoYouHaveCnnNumber.HasValue ? Model.DoYouHaveCnnNumber.Value : false; 
    string doYouHaveCNNFlagClass = doYouHaveCNNFlag ? "" : "hidden"; 
} 

<h2>Create</h2> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>CustomerViewModel</h4> 
     <hr /> 

     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.ExistingCustomer, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div id="existingCustomerOrNot" class="span4"> 
       <label class="radio-inline">@Html.RadioButtonFor(model => model.ExistingCustomer, true, new { id = "ExistingCustomer_true" }) Yes</label> 
       <label class="radio-inline">@Html.RadioButtonFor(model => model.ExistingCustomer, false, new { id = "ExistingCustomer_false" }) No</label> 
       @Html.ValidationMessageFor(model => model.ExistingCustomer) 
      </div> 
     </div> 

     <div id="haveCNNOrNot" class="form-group @(existingCustomerFlag && doYouHaveCNNFlag ? "" : "hidden")"> 
      @Html.LabelFor(model => model.DoYouHaveCnnNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div> 
       <label class="radio-inline">@Html.RadioButtonFor(model => model.DoYouHaveCnnNumber, true, new { id = "DoYouHaveCnnNumber_true" }) Yes</label> 
       <label class="radio-inline">@Html.RadioButtonFor(model => model.DoYouHaveCnnNumber, false, new { id = "DoYouHaveCnnNumber_false" }) No</label> 
       @Html.ValidationMessageFor(model => model.DoYouHaveCnnNumber) 
      </div> 
     </div> 

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

    <div id="dontHaveCNN" class="row form-group clearfix"> 
     <div class="span4"> 
      @Html.LabelFor(model => model.ReasonForNotHaveCCN, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.ReasonForNotHaveCCN, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.ReasonForNotHaveCCN, "", new { @class = "text-danger" }) 
      </div> 
     </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/jsval") 
    <script> 
     (function ($) { 
      $(function() { 

       $("#existingCustomerOrNot").on("click", "input", function() { 
        $("#haveCNNOrNot").toggleClass("hidden", $(this).val() === "False"); 
       }); 

       $("#haveCNNOrNot").on("click", "input", function() { 
        $("#haveCNN").toggleClass("hidden", $(this).val() === "False"); 
       }); 

      }); 

     })(jQuery); 
    </script> 
} 

Answer 1

するためのコードで、あなたの[RequiredIf]検証が変更された最初の必要性を属性。

それがビューに次に

[RequiredIf("DoYouHaveCnnNumber", true, ErrorMessage = "Enter a CCN number")] 
public string CustomerConfirmationNumber { get; set; } 

と

[RequiredIf("DoYouHaveCnnNumber", false, ErrorMessage = "Provide a reason why you don't have CCN.")] 
public string ReasonForNotHaveCCN { get; set; } 

する必要のある属性よう

CustomerConfirmationNumberとReasonForNotHaveCCNの両方が、DoYouHaveCnnNumberに依存している、ラジオボタンのあなたのグループにクラス名を与えます（ idの属性は必要ありません）

// Note this should not be a <label> element (add styles as appropriate) 
<span>@Html.DisplayNameFor(model => model.ExistingCustomer)</span> 
<div id="existingCustomerOrNot" class="span4"> 
    <label class="radio-inline"> 
     @Html.RadioButtonFor(model => model.ExistingCustomer, true, new { @class= "ExistingCustomer" }) 
     <span>Yes</span> 
    </label> 
    <label class="radio-inline"> 
     @Html.RadioButtonFor(model => model.ExistingCustomer, false, new { @class = "ExistingCustomer" }) 
     <span>No</span> 
    </label> 
    @Html.ValidationMessageFor(model => model.ExistingCustomer) 
</div> 

.... 
<label class="radio-inline"> 
    @Html.RadioButtonFor(model => model.DoYouHaveCnnNumber, true, new { @class = "DoYouHaveCnnNumber" }) 
    <span>Yes</span> 
</label> 
.... 

ため

同上は、次にあなたのスクリプトでは、コードのためにどうもありがとうございますスティーブン@

var hasCNN = $('#haveCNNOrNot'); 
var CNN = $('#haveCNN'); 
var noCNNReason = $('#dontHaveCNN'); 

$('.ExistingCustomer').change(function() { 
    var isCustomer = $('.ExistingCustomer:checked').val() === 'True'; 
    if (isCustomer) { 
     hasCNN.show(); 
     $('.DoYouHaveCnnNumber:first').trigger('change'); 
    } else { 
     hasCNN.hide() 
     CNN.hide(); 
     noCNNReason.hide(); 
    } 
}) 

$('.DoYouHaveCnnNumber').change(function() { 
    var hasCNNValue = $('.DoYouHaveCnnNumber:checked').val(); 
    if (hasCNNValue) { 
     if (hasCNNValue === 'True') { 
      CNN.show(); 
      noCNNReason.hide(); 
     } else { 
      CNN.hide(); 
      noCNNReason.show(); 
     } 
    } 
});