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

我的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进行选择，它就会变为可见。

这是我的下拉列表：

  
 Type of Report 
 @Html.DropDownListFor( x => x.Report.ReportType, Model.ReportTypes, "", new { @class = "ddl", @id = "ddlReportType", @style = "width:100%" }) 
  

这是我的divs：

  
 // A bunch of fields shared across all reports 
 // fields specific to Type1 Reports 
 
 // fields specific to Type2 Reports 
  

我的问题是，如果表单validation失败，那么当重新提交表单时，pnlReport被设置为隐藏。 我怎样才能解决这个问题？

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

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