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： enter image description here

首先我只想创建一个id为control的消息框，但即使是这个简单的代码也行不通。问题是：为什么？以及如何解决？

已添加：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前加上＆＃39;＃＆＃39;所以$('#elementid')将选择像<label id="elementid" />这样的DOM元素，我会做什么

    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属性，因此它将是未定义的。你所追求的是一个＆＃39;＃＆＃39;在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;

$ .find控件的id未定义

1 个答案: