無法呈現基於用戶選擇的選項的網頁表單

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 
} 

我想要做的就是創建一個應用程序，如果該人是現有客戶，首先問。如果該人回答「否」，那麼我不必做任何事情。但是，如果該人員輸入「是」，那麼我想顯示另一個問題，詢問該人員是否具有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]屬性驗證，首先需要改變。

兩個CustomerConfirmationNumber和ReasonForNotHaveCCN取決於DoYouHaveCnnNumber，這樣的屬性需要被

[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; } 

視圖

然後，給你的單選按鈕組一個類名（ 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> 

同上，用於DoYouHaveCnnNumber

.... 
<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(); 
     } 
    } 
});