Question

我的MVC应用程序中有一个下拉列表，根据选择显示某些字段。

    $(document).ready(function () {

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

        });

    });

pnlReport是一个显示设置为none的div，但是一旦使用ddlReportType进行选择就会显示。

这是我的下拉列表：

        <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>

这是我的divs：

        <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将被设置为隐藏。我该如何解决这个问题？

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

Answer 1

我已经重构了如下的显示逻辑。这个想法是，在文档就绪事件中触发DisplayReport，这样当重新提交页面刷新后，我们可以显示相同的视图。

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

如何在验证失败时根据下拉选择显示div

1 个答案: