无法呈现基于用户选择的选项的网页表单

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