$.find 控件的 id 未定义

Question

我正在尝试动态生成一个控件，然后更改另一个控件。例如，我有一个按钮和一个标签，我想使用 AJAX/JS/等更改标签的文本，而不需要发布/获取查询。所以我正在编写这样的代码：

        foreach (var pair in FailedMonitorings)
        {
            var server = (ServerEnum)pair.Key;
            var tabPanel = new TabPanel { HeaderText = server.GetDescription() };
            var updatePanel = new UpdatePanel();
            var upChilds = updatePanel.ContentTemplateContainer.Controls;
            var label = new Label { Text = "Hello from UP-" + tabPanel.HeaderText, ID = "lbl" + tabPanel.HeaderText};
            upChilds.Add(label);
            const string command = @"var ctrl = $.find(""{0}""); alert(ctrl.id); return false;";
            var button = new Button {Text = "Button"};
            upChilds.Add(button);

            tabPanel.Controls.Add(updatePanel);


            tbcErrors.Tabs.Add(tabPanel);
            button.OnClientClick = string.Format(command, label.ClientID);
        }

这里生成的html：

首先，我只想创建一个带有控制 ID 的消息框，但即使是这个简单的代码也不起作用。问题是：为什么？又该如何解决呢？

---

添加：ctrl 不为空

当命令是

const string command = @"var ctrl = $.find(""{0}""); alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;";

结果是true undefined

Answer 1

我觉得应该 const string command = @"var ctrl = $('#{0}')[0]; ctrl.innerText = 'Updated!'; return false;";

为什么我说这是在 jquery 中选择具有 id 的元素，您将使用与 css 选择器相同的约定，这意味着您需要在 id 前加上“#”，因此$('#elementid') 将选择 DOM 元素比如<label id="elementid" />我会做的是

    foreach (var pair in FailedMonitorings)
    {
        var server = (ServerEnum)pair.Key;
        var tabPanel = new TabPanel { HeaderText = server.GetDescription() };
        var updatePanel = new UpdatePanel();
        var upChilds = updatePanel.ContentTemplateContainer.Controls;
        var label = new Label { Text = "Hello from UP-" + tabPanel.HeaderText, ID = "lbl" + tabPanel.HeaderText};
        upChilds.Add(label);
        const string command = @"updateText('{0}')";
        var button = new Button {Text = "Button"};
        upChilds.Add(button);

        tabPanel.Controls.Add(updatePanel);


        tbcErrors.Tabs.Add(tabPanel);
        button.OnClientClick = string.Format(command, label.ClientID);
    }

然后在html中

<script type="text/javascript">
function updateText(id){
    var ctrl = $('#' + id);
    ctrl.text('Updated text');
    return false;
}
</script>

我更喜欢按钮调用 updateText 函数来将所有内联代码呈现给客户端。它使代码更易于维护，而无需重新编译服务器端。如果您需要使用 dom 元素，则可以使用var ctrl = $('#' + id)[0];，这将返回为 jquery 选择找到的第一个 dom 元素，然后您可以将 innerText 设置为值ctrl.innerText = 'Updated!';。我没有在回答中这样做，因为我只是想展示如何完全从 jquery 中完成。

代码 const string command = @"var ctrl = $.find(""{0}""); alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;";

首先将不起作用，因为您的 jquery 选择器var ctrl = $.find(""{0}""); 不会在客户端上选择正确的控件。它可能会呈现类似

的脚本

<button onclick="var ctrl = $.find("Ctrl$Label1");alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;" />

这意味着 ctrl 不会是 null 而是一个空数组，因为没有像 Ctrl$Label1 这样的 dom 元素，并且由于数组没有 id 属性，所以它是未定义的。你所追求的是clientId前面的'#'。这仍然会返回 undefined 的第二个原因是，即使您确实有一个有效的选择器。是返回的 JQuery 对象没有 id 属性，所以您仍然会看到未定义。所以最后要同时获得 id 并获得正确的选择器，它看起来像

const string command = @"var ctrl = $('#{0}')[0]; alert(ctrl.id); return false;

或者如果你需要设置它看起来像的文本

const string command =@ "var ctrl = $('#{0}')[0]; ctrl.innerText = 'Updated!; return false;