Question

我的ASP.NET MVC项目遇到了一些麻烦。

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

我的 OfferController 会呈现 FormView （优惠作为模型）。 FormView 包含2个或3个标签，每个标签都是 PartialView ，带有自己的模型。

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

模型优惠包含 VehicleDetails 和保修。

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

我已尝试按照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>
@*[...]*@

第二个标签上的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吗？

如果是，您只需听取下拉列表中的更改事件，并检查其他输入的日期。

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

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

1 个答案: