Bootstrap 模式在输入时关闭 runat server textarea

Question

我正在asp.net 中开发一个页面。我有一个带有表单的 Bootstrap 模式。引导模式中的表单有一个文本框和一个文本区域。 bootstrapModalView。 我正在使用 javascript 在输入时将文本框中的每个 vin# 添加到 vin 列表文本区域中。

$(document).ready(function () {

    //In "Scan VINs," add VIN# to VIN List
    $('#modalForm').on("keypress", function (e) {
        //If "enter/return" is pressed, put vin# into vin list textarea
        if (e.which == 13) {
            enterModalTxtVIN();
            return false;
        }
    });

    //Hide invalidVIN div until error occurs
    document.getElementById('invalidVIN').style.display = 'none';
});

//(On Modal) After clicking "enter" on VIN# textbox, VIN# goes into VIN List text area
function enterModalTxtVIN() {
    var text = document.getElementById('modalTxtVIN').value;

    //If modalTxtVIN length does not = 17 characters, inform user incorrect length and cancel
    if (text.length != 17) {
        //Show error
        document.getElementById('invalidVIN').style.display = 'block';
        return false;
    } else {
        //Hide error
        document.getElementById('invalidVIN').style.display = 'none';

        //Add vin# to vin list text area
        document.getElementById('modalTxtAreaVINList').value += text.toUpperCase() + "\n";
        document.getElementById('modalTxtVIN').value = "";
    }
}

这很好用，但我需要访问后面代码中的文本区域。所以我在我的 textarea 中添加了一个 runat=server。

<textarea class="form-control" rows="5" id="modalTxtAreaVINList" name="modalTxtAreaVINList" runat="server" readonly ></textarea>

但是当我添加 runat=server 时，访问 textarea 的这行 javascript 会在我现在单击 enter 时关闭模式。

document.getElementById('modalTxtAreaVINList').value += text.toUpperCase() + "\n";

我怎样才能使模式不与那里的 runat=server 关闭，或者如何在没有 runat=server 的情况下从代码隐藏中访问数据？

Answer 1

添加runat=server 后，从JavaScript 中可见的textarea 的ID 将不再是modalTxtAreaVINList。当 ASP.NET 处理 .aspx/.ascx 文件以生成 HTML 时，它将为服务器端控件生成新的 ID，ClientIDs。所以document.getElementById 不会找到你的文本框。

两种解决方案：

1) 打印“真实”ID，即实际出现在 HTML 中的 ID，在 JavaScript 代码中使用 <%= modalTxtAreaVINList.ClientID %>，例如

document.getElementById('<%= modalTxtAreaVINList.ClientID %>')

2) 或者，将ClientIDMode="Static" 添加到文本区域，以强制 ASP.NET 输出与您输入的 ID 相同的 ID。