在 javascript 中引用 ASP.NET Web 控件答案

【问题标题】：Referencing the ASP.NET web control in javascript在 javascript 中引用 ASP.NET Web 控件
【发布时间】：2011-06-30 07:44:51
【问题描述】：

我在我的用户控件中创建了一个下拉列表，请参阅下面的源代码，

<asp:DropDownList ID="ddlInd" runat="server" DataSourceID="indXmlDS" DataTextField="text" DataValueField="text"></asp:DropDownList>

在 Page_load 中我已经这样做了：

protected void Page_Load(object sender, EventArgs e)
    {
       ClientScriptManager cs = Page.ClientScript;
       cs.RegisterStartupScript(this.GetType(), "myScript", "<script language='javascript' src='../Scripts/myJS.js'></script>");
        ddlInd.Attributes["onchange"] = "showTextbox()";
    }

如果我想在我的外部 javascript 文件 myJS.js 中引用这个控件，我应该使用什么代码？

我曾尝试使用document.getElementById("<%=ddlInd.ClientID %>")，但它会返回NULL。

有人可以帮忙吗？谢谢

编辑：

不确定在此处附加该 myJS.js 文件是否有帮助

function showTextbox() {
    var sid = <%=ddlInd.ClientID %>;
    //alert(sid);
    var s = document.getElementById('<%=ddlInd.ClientID %>'); // <-- problem here 

    alert(s);
    if (s.options[s.selectedIndex].value == "Other") {
        myDiv.style.display = "inline";
        alert("display");
    }
    else {
        myDiv.style.display = "none";
        alert("none");
    }
}

EDIT2：

我找到了一种解决方法，即在用户控制页面中嵌入脚本，而不是使用外部脚本文件。谢谢大家的建议。他们都非常有帮助。

另外修改后的js脚本如下，可以正常运行：

function showTextbox(objID) {
    var s = document.getElementById(objID);
    var div = document.getElementById("myDiv");
    if (s.options[s.selectedIndex].value == "Other") {
         div.style.display = "inline";
     }
     else {
         div.style.display = "none";
     }
}

【问题讨论】：

是 ddlInd.ClientID 返回 null 还是 getElementById？
@paolo 我认为它的 document.getElementByID 返回 NULL
您在哪里以及如何尝试将document.getElementById("<%=ddlInd.ClientID %>") 作为showTextbox 的参数？查看 ddlInd 和 TextBox 所在的用户控件的相关部分也可能会有所帮助。 showTextbox不是也需要TextBox的ID吗？
如果您评论您在页面加载中所做的所有事情怎么办？还是返回NULL？
@Tim js 函数 showTextbox() 位于 Scripts 文件夹下的 myJS.js 文件中，从 Page_Load 事件中编写的代码可以看出。

标签： c# javascript .net asp.net drop-down-menu

【解决方案1】：

尝试使用 ClientScriptManager.RegisterClientScriptInclude 代替 RegisterStartupScript。

在您的情况下，您似乎包含了一个外部 javascript 文件，而不是应该直接出现在页面中的 javascript 代码。

还可以尝试将document.getElementById('<%=ddlInd.ClientID %>') 中的双引号 " 更改为单引号 '

编辑哦，我看到您正在尝试在您的 javascript 文件中执行。这不会在外部 js 文件中解释！您应该将您的函数直接包含在页面中（而不是作为外部文件）或尝试将 ColntrolId 作为参数传递给 js 函数

【讨论】：

这似乎是一个 javascript 错误，现在。你确定你的javascript文件的路径是正确的吗？您应该尝试将“~/Scripts/myJS.js”作为 js 文件的路径。从用户控件内部到 js 的相对路径很棘手，因为 js 的路径是相对于包含该控件的页面，而不是相对于用户控件本身。

【解决方案2】：

尝试将控件的ClientIdMode设置为Predictable：

<asp:DropDownList ID="ddlInd" ClientIDMode="Predictable" runat="server" DataSourceID="indXmlDS" DataTextField="text" DataValueField="text"></asp:DropDownList>

您也可以通过 ClientIDMode="Static" 使用静态 ClientId，在这种情况下 ClientId 将等于控件的 id，因此您可以说：

document.getElementById("ddlInd");

【讨论】：

不走运。仍然给我NULL，当我打电话给alert(document.getElementById("<%=ddlInd.ClientID %>"))
@woodykiddy: 当你打电话时： alert("") ?
ClientIDMode = "Static" 不知道我的代码有什么问题时也没有运气:(
如果我执行 alert("") 它只会显示一个字符串
@woodykiddy：糟糕，你需要单引号。顺便说一句，您可能也应该在 document.getElementById 中这样做...

【解决方案3】：

您可以使用它来将您的控件引用到 .js 文件

$('select#ddlInd').val(....)

如果下拉列表位于“ContentPlaceholder”内，您可以这样做

$('select#ContentPlaceholderID_ddlInd').val(...)

把它放在你的 .js 文件中

注意：当然包括你的 .js 文件

【讨论】：

这显然假设 OP 可以访问 jQuery。

【解决方案4】：

如果你不能使用 .NET 4.0 并且卡在 3.5/2.0 上，我写了一个名为 Awesome.ClientID 的小库来解决这个问题。

我之前在这个答案中发布过：How do I make this getElementsbyName work for IE (and FF)?

基本上，它允许您将所有控件序列化为 JSON 数组，并且您可以将 JavaScript 更改为：

document.getElementById(controls.ddlInd);

图书馆可以在这里找到：http://awesomeclientid.codeplex.com/

关于它的博文：http://www.philliphaydon.com/2010/12/i-love-clean-client-ids-especially-with-net-2-0/

【讨论】：

【解决方案5】：

您可以使用当您在 .aspx 页面上有脚本时，如果您使用外部文件，那么您必须使用控件 ID 将不起作用。

【讨论】：