如何根据下拉选项显示层时验证失败 [英] How to show divs based on drop down selection when validation fails

问题描述

我在我的MVC应用程序一个下拉列表，其中显示基于选择的某些字段。

I have a drop down list in my MVC application which displays certain fields based on the selection.

    $(document).ready(function () {

        $("#ddlReportType").change(function () {
            $("#pnlReport").show();
            if ($(this).val() == 'type1') {
                $("#pnlType1").show();
            }
            if ($(this).val() == 'type2') {
                $("#pnlType2").show();
            }

        });

    });

pnlReport是显示器设置为none一个div，但一旦选择与ddlReportType制作变得可见。

pnlReport is a div with display set to none, but is made visible once a selection is made with ddlReportType.

下面是我的DropDownList：

Here's my dropdownlist:

        <div class="form-group">
            <label class="col-xs-2 control-label">Type of Report</label>
            <div class="col-xs-4">
                @Html.DropDownListFor(
                x => x.Report.ReportType,
                Model.ReportTypes,
                "", new { @class = "ddl", @id = "ddlReportType", @style = "width:100%" })
            </div>

        </div>

和这里是我的div：

        <div id="pnlReport" style="display:none">
        // A bunch of fields shared across all reports
             <div id="pnlType1" style="display:none">
             // fields specific to Type1 Reports
             </div>
             <div id="pnlType2" style="display:none">
             // fields specific to Type2 Reports
             </div>

        </div>

我的问题是，如果表单验证失败，那么当表单重新提交pnlReport设置为被隐藏。我该如何解决这个问题？

My problem is that if the form validation fails then when the form is resubmitted pnlReport is set to be hidden. How can I fix this?

我使用MVC 5捆绑jquery.unobtrusive *和jquery.validate

I am using MVC 5 with bundled jquery.unobtrusive* and jquery.validate

推荐答案

我如下重构出来的显示逻辑。我们的想法是，引发DisplayReport在文档准备事件，例如，当刷新页面重新提交后，我们就可以显示了同样的看法。

I have refactored out the display logic as below. The idea is, trigger DisplayReport in document ready event, such that when the page refreshed after resubmitted, we can display the same view.

$(document).ready(function () {
    function DisplayReport(reportType)
    {
        $("#pnlReport").hide();         
        $("#pnlType1").hide();
        $("#pnlType2").hide();
        // hide all before show
        var showReportPanel = false;

        if (reportType == 'type1') {
            $("#pnlType1").show();
            showReportPanel = true;
        }
        if (reportType == 'type2') {
            $("#pnlType2").show();
            showReportPanel = true;
        }

        if(showReportPanel)
        {
            $("#pnlReport").show();
        }       
    }

    DisplayReport($("#ddlReportType").val());
    $("#ddlReportType").change(function () {        
        DisplayReport($(this).val());
    });
});

这篇关于如何根据下拉选项显示层时验证失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！