$ .find控件的id未定义

Question

我正在尝试动态生成一个控件，并在更改另一个控件之后。 例如，我有一个按钮和一个标签，我想使用AJAX / JS / etc更改标签的文本，而无需post / get查询。 所以我正在编写这样的代码：

        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为control的消息框，但即使是这个简单的代码也行不通。 问题是：为什么？ 以及如何解决？

---

补充：ctrl 不为null

当命令是

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的属性，所以你仍然会看到undefined。 所以最后得到两个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;