根據另一個PartialView上的DatePicker驗證來自DropDown的輸入數據

Question

我的ASP.NET MVC項目遇到一些麻煩。

我正在嘗試檢查用戶在DropDown中選擇的選擇是否有效。 這完全取決於另一個選項卡上的日期（由用戶選擇）。

我有我的OfferController ，它呈現FormView （以Offer作為模型）。 FormView包含2或3個選項卡，每個選項卡都是具有自己模型的PartialView 。

我要檢查第一個選項卡（VehicleView與VehicleDetails為模型）上輸入的日期時間值，如果需要第二個選項卡上發送一個錯誤信息（WarrantyView以保證模型）。 用戶在DropDown中選擇不正確的項目時，必須立即顯示此消息。

報價模型包含VehicleDetails和Warranty 。

其他驗證（使用批注 ）運行良好。

我已經嘗試按照此處的說明創建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>
@*[...]*@

第二個選項卡上的DropDown（必須完成數據驗證）：

@*[...]*@
<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();
    }
}