根据另一个 PartialView 上的 DatePicker 验证来自 DropDown 的输入数据

Question

我的 ASP.NET MVC 项目遇到了一些问题。

我正在尝试检查用户在 DropDown 中选择的选项是否有效。这完全取决于另一个选项卡上的日期（由用户选择）。

我有我的 OfferController，它呈现 FormView（以 Offer 作为模型）。 FormView 包含 2 或 3 个选项卡，每个选项卡都是具有自己的模型的 PartialView。

我想检查在第一个选项卡上输入的 DateTime 值（VehicleView，以 VehicleDetails 作为模型）以在需要时发送错误消息在第二个选项卡上（WarrantyView 以 Warranty 为模型）。当用户在 DropDown 中选择了不正确的项目时，必须立即显示此消息。

模型Offer包含VehicleDetails和Warranty。

其他验证（使用注释）工作正常。

我已尝试按照 here 的说明创建 CustomValidator，但我无法从 VehicleDetails 获取更新的日期值。

我也尝试过写一些 javascript，但因为我以前从未这样做过，所以我走不远。

第一个标签的日期：

@*[...]*@    
<div class='form-group'>
<div class="col-md-6">
    @Html.LabelFor(model => model.FirstImmatriculationDate)
</div>
<div class="col-md-6">
    <div>
        <div class="input-group" style="width: 148px;">
            <input class="form-control date-picker" type="text" data-date-format="dd/mm/yyyy" name="FirstImmatriculationDate" id="FirstImmatriculationDate" value="@Model.FormattedFirstImmat">
            <span class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </span>
            @Html.ValidationMessageFor(model => model.FirstImmatriculationDate, "", new { @class = "text-danger" })
        </div>
    </div>
    <span id="error_msgFirstImmat" class="text-danger"> @Resources.VehicleDetails_FirstImmatError</span>
    <span id="error_msgFirstImmatTooOld" class="text-danger"> @Resources.VehicleDetails_FirstImmatTooOld</span>
    <span id="error_msgFirstImmatFormatDate" class="text-danger"> @Resources.General_FormatDate</span>
</div>
</div>
@*[...]*@

第二个选项卡上的下拉菜单（必须进行数据验证）：

@*[...]*@
<div class='form-group'>
<div class="col-md-6">
    @Html.LabelFor(model => model.Omnium_InnerNrDeductibleFormula)
</div>
<div class="col-md-6">
    @Html.DropDownListFor(model => model.Omnium_InnerNrDeductibleFormula, (SelectListItem[])ViewBag.lstFormulaDeduc, new { @id = "Omnium_InnerNrDeductibleFormulaId" })
    @Html.ValidationMessageFor(model => model.Omnium_InnerNrDeductibleFormula, "", new { @class = "text-danger" })
    <span id="error_MisingFormula" class="text-danger">@Resources.Warranty_FormulaMissing</span>
</div>
</div>
@*[...]*@

Forms 视图中调用两个局部视图的代码

@*[...]*@
<div id="vehicleQuote" class="tab-pane in active">
<p>@Html.EditorFor(model => model.VehicleDetails)</p>
<a href="#" id="btnWarrantiesPage" class="btn  btn-group-lg" title="@Resources.Warranty_NextPage" style="margin-left:61%">
    <i class="btn-label glyphicon glyphicon-arrow-right"></i>
    @Resources.Warranty_NextPage
</a>
</div>
<div id="warrantyQuote" class="tab-pane">
    <p>@Html.EditorFor(model => model.Warranty)</p>
</div>
@{
    if (Model.ResultsModel != null)
    {
        if (Model.ResultsModel.RC != null || Model.ResultsModel.errorMsg != null)
        {
            <div id="resultQuote" class="tab-pane in active">
                <p>@Html.EditorFor(model => model.ResultsModel)</p>
            </div>
        }
    }
}

<div id="submitQuote">
    <div style="margin-left:61%">

        <button type="submit" id="btnSave" name="BtnSave" class="btn btn-palegreen" value="@Resources.General_Save">
            <i class="btn-label glyphicon glyphicon-saved"></i>
            @Resources.General_Save
        </button>
        <button type="submit" id="btnTaskTarification" name="btnTaskTarification" class="btn btn" value="@Resources.General_Save">
            <i class="btn-label glyphicon glyphicon-print"></i>
            @Resources.General_Print
        </button>
    </div>
    <a href="@Url.Action("Index", "Customers")" class="btn  btn-group-lg" title="@Resources.General_Cancel" style="margin-left:10px;">
        <i class="btn-label glyphicon glyphicon-arrow-left"></i>
        @Resources.General_Cancel
    </a>
</div>
@*[...]*@

用于 DatePicker 的模型部分

public class VehicleDetails
{        
    [Display(Name = "VehicleDetails_FirstImmatriculationDate", ResourceType = typeof(Resources.Resources))]
    public DateTime? FirstImmatriculationDate { get; set; }
    //[...]
}

DropDown 中所选项目使用的模型部分

public class Warranty
{
    [Display(Name = "Warranty_Omnium_InnerNrDeductibleFormula", ResourceType = typeof(Resources.Resources))]
    public string Omnium_InnerNrDeductibleFormula { get; set; }
    //[...]
}

Answer 1

你可以使用 jQuery 吗？

如果是，您可以简单地收听下拉列表的 change 事件，然后检查其他输入的日期。

$('#Omnium_InnerNrDeductibleFormulaId').change(function(){

    var date = $('#FirstImmatriculationDate').val();

    // do whatever you want with the date value, and display an error message if necessary.

    // for example, you could put an hidden message in your DOM
    // and show/hide it depending on the result of your test :
    if(isValid(date)){
        $('#warning-message').hide();
    }
    else{
        $('#warning-message').show();
    }
}