ASP.NET MVC中WebGrid取消事件处理器异常问题求助

我之前处理WebGrid编辑逻辑时也遇到过类似的问题，咱们来拆解下原因和解决办法：

问题根源 #

问题出在disabled状态的输入框上。当@item.Truefalse为true时，你的输入框被设置为disabled，而在取消编辑的事件处理器中，直接用input.val(span.html())尝试给disabled的输入框赋值——部分浏览器会忽略对disabled元素的val()修改操作。这就导致当你再次打开编辑时，输入框里还是最初的"0000-00-00"（甚至因为渲染问题显示为空），而不是span里的原始内容。

解决方案 #

方法一：临时移除disabled属性再赋值 #

修改你的取消事件处理器，在给disabled输入框赋值前先移除disabled属性，赋值完成后再恢复：

$("body").on("click", "#WebGrid TBODY .Cancel", function () {
    var row = $(this).closest("tr");
    $("td", row).each(function () {
        if ($(this).find(".text").length > 0) {
            var span = $(this).find(".label2");
            var input = $(this).find(".text");
            
            // 保存输入框原本的disabled状态
            var wasDisabled = input.prop("disabled");
            if (wasDisabled) {
                input.prop("disabled", false);
            }
            
            // 赋值操作
            input.val(span.html());
            
            // 恢复disabled状态
            if (wasDisabled) {
                input.prop("disabled", true);
            }
            
            span.show();
            input.hide();
        }
    });
    row.find(".Edit").show();
    row.find(".Update").hide();
    $(this).hide();
});

方法二：用data属性存储原始值（更稳定） #

在生成输入框时，把原始值存在data-original属性里，取消编辑时直接从这个属性取值，避免对disabled元素的val()操作限制：

首先修改WebGrid的Column定义：

webGrid.Column(header: "day_gv", style: "day_gv", format: @<span>
    <span class="label2">@item.day_gv</span>
    @if (@item.Truefalse) {
        <span><input class="text" type="text" value="@item.day_gv" style="display:none" disabled data-original="@item.day_gv" /></span>
    } else {
        <span><input class="text" type="text" value="@item.day_gv" style="display:none" data-original="@item.day_gv" /></span>
    }
</span>)

webGrid.Column(header: "day_hh", style: "day_hh", format: @<span>
    <span class="label2">@item.day_hh</span>
    @if (@item.Truefalse) {
        <span><input class="text" type="text" value="@item.day_hh" style="display:none" disabled data-original="@item.day_hh" /></span>
    } else {
        <span><input class="text" type="text" value="@item.day_hh" style="display:none" data-original="@item.day_hh" /></span>
    }
</span>)

然后修改取消事件处理器：

$("body").on("click", "#WebGrid TBODY .Cancel", function () {
    var row = $(this).closest("tr");
    $("td", row).each(function () {
        if ($(this).find(".text").length > 0) {
            var span = $(this).find(".label2");
            var input = $(this).find(".text");
            
            // 从data属性获取原始值赋值
            input.val(input.data("original"));
            
            span.show();
            input.hide();
        }
    });
    row.find(".Edit").show();
    row.find(".Update").hide();
    $(this).hide();
});

这样不管输入框是否disabled，都能正确恢复原始值，再次打开编辑时就不会出现空值的问题了。

内容的提问来源于stack exchange，提问作者Edward Sheriff Curtis