页面加载时读取模型值并按条件控制文本框显隐的实现方法咨询

现有代码核心问题 #

• 元素ID不匹配：佣金输入框外层容器的ID为ASD，但JS中控制显隐的选择器使用了不存在的#Comm，导致控制逻辑完全失效
• 异步数据源时序问题：Kendo下拉框的数据源是异步请求加载的，document.ready阶段直接触发change事件时，数据源大概率还未加载完成，下拉框尚未绑定模型初始值，此时读取的值为空，无法正确执行初始显隐判断

修正后代码 #

Razor视图代码（可选优化：将容器ID改为语义化名称，方便维护） #

<div class="k-edit-field">
   @(Html.Kendo().DropDownListFor(model => model.PAY_TYPE)
   .DataTextField("NAME")
   .DataValueField("CODE")
   .DataSource(source =>
   {
     source.Read(read =>
     {
      read.Action("GetPayType", "Payment");
     });
   })
  .HtmlAttributes(new { style = "width: 100%", @id = "payType"})
  )
 </div>

<!-- 将ID改为语义化的payCommContainer，也可以保留原ID ASD，对应修改JS选择器即可 -->
<div class="k-edit-field" id="payCommContainer">
  @Html.EditorFor(model => model.PAY_COMM)
  @Html.ValidationMessageFor(model => model.PAY_COMM)
</div>

JavaScript代码 #

jQuery(document).ready(function () {
    // 获取Kendo下拉框实例
    const payTypeDropDown = $("#payType").data("kendoDropDownList");
    
    // 封装显隐控制逻辑，复用
    function togglePayComm() {
        const selectedVal = payTypeDropDown.value();
        // 确认Card对应的CODE为"C"，Cash对应CODE不为"C"，和后端接口返回值保持一致即可
        if (selectedVal === "C") {
            $("#payCommContainer").show();
        } else {
            $("#payCommContainer").hide();
        }
    }

    // 绑定下拉框值变更事件
    payTypeDropDown.bind("change", togglePayComm);
    // 监听数据源加载完成事件，确保初始值绑定后再执行显隐判断，满足页面加载时读取模型值的需求
    payTypeDropDown.bind("dataBound", togglePayComm);
});

注意事项 #

• 请确认后端GetPayType接口返回的「Card」选项对应的CODE字段值为C，「Cash」选项对应的CODE字段值为非C即可匹配需求
• 如果不想修改原容器IDASD，只需将JS中#payCommContainer替换为#ASD即可正常运行

内容的提问来源于stack exchange，提问作者Yu Song Liew