Bootstrap 使用 runat 服务器 textarea 输入时模式关闭

Question

我正在 asp.net 开发一个页面。我有一个 Bootstrap 模态，里面有一个表单。 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 在我现在单击回车时关闭模式。

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

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

Answer 1

添加 runat=server 后，JavaScript 中可见的文本区域 ID 将不再是 modalTxtAreaVINList。当 ASP.NET 处理 .aspx/.ascx 文件以生成 HTML 时，它将为 server-side 控件生成新的 ID，ClientIDs。所以 document.getElementById 将找不到您的文本框。

两种解决方案：

1) 打印 'real' id，即实际出现在 HTML 中的那个，在使用 <%= modalTxtAreaVINList.ClientID %> 的 JavaScript 代码中，例如

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

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

Bootstrap 使用 runat 服务器 textarea 输入时模式关闭

Bootstrap modal closes on enter with runat server textarea

javascript

c#

asp.net

twitter-bootstrap

bootstrap-modal