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

无法根据用户选择的选项呈现Web表单

1 个答案: