基于下拉选择mvc 4 razor c#的显示/隐藏控件

Posted 2023-04-12

【中文标题】基于下拉选择mvc 4 razor c#的显示/隐藏控件

【英文标题】：Show/hide control based on dropdown selection mvc 4 razor c#

【发布时间】：2015-04-19 19:54:10

【问题描述】：

这是我的代码

@html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId), "-- Select Report --")
@Html.CheckBoxFor(model => model.IncludePhotos)@Html.LabelFor(model => model.IncludePhotos)

生成：

<select data-val="true" data-val-number="The field SelectedReportId must be a number." data-val-required="The SelectedReportId field is required." id="SelectedReportId" name="SelectedReportId">
    <option value="">-- Select Report --</option>
    <option value="1">Excel Report</option>
    <option value="2">Text Report</option>
</select>
<br />
<input data-val="true" data-val-required="The Include photos in the report field is required." id="IncludePhotos" name="IncludePhotos" type="checkbox" value="true" />

我有一个下拉列表和一个复选框，如果用户选择下拉列表中的第一个值，我需要禁用该复选框。 这是我没有成功使用的javascript

$(function () 
    $('#SelectedReportId').change(function () 
        var value = $(this).val();
        if (value == '1') 
            $('#IncludePhotos').show();
         else 
            $('#IncludePhotos').hide();
        
    );
);

感谢任何帮助，谢谢

【问题讨论】：

你能显示剃刀代码实际生成的 HTML 吗？

你的 JavaScript 在做什么，如果有的话？

在this example 中看起来一切正常。您是否在页面上收到脚本错误？你确定 jQuery 被正确包含了吗？

我刚刚意识到我实际上并没有从任何地方调用 javascript 函数！在asp.net中我们使用onclientclick=""，如何调用razor中的函数？？

你不需要显式调用任何函数来运行change事件处理程序（除了jQuery来注册你已经在调用的事件处理程序）

【参考方案1】：

在 @section scripts 部分中包含 javascript，它开始工作，

@section scripts <script type="text/javascript">
$(function () 
    $('#SelectedReportId').change(function () 
        var value = $(this).val();
        if (value == '1') 
            $('#IncludePhotos').show();
         else 
            $('#IncludePhotos').hide();
        
    );
);</script>

【讨论】：

您确实意识到这只是显示/隐藏复选框 - 如果用户在选择选项之前选中它，它仍然会发布 true

查看this 了解更多选项，希望对某人有所帮助。

【参考方案2】：

试试这个

@Html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId),new id="myDropdown"

@Html.CheckBoxFor(model => model.IncludePhotos,new id="myCheckbox")

$(function () 
    $('#myDropdown').change(function () 
        var value = $(this).val();
        var fistVal=$('#myDropdown option:first-child').attr("selected", "selected");
        if (value == fistVal) 
            $('#IncludePhotos').show();
         else 
            $('#IncludePhotos').hide();
        
    );
);