【问题标题】:Accessing server control with javascript on a webform with a master page?在带有母版页的网络表单上使用 javascript 访问服务器控件?
【发布时间】:2010-11-28 14:36:54
【问题描述】:

我有一个使用母版页的网络表单,该母版页又继承自另一个母版页。

我有一个下拉列表drpCursos

在我的 javascript 代码中,我尝试访问控件但没有成功:

var combo = document.forms[0]['drpCursos'];

combonull

查看源代码后改成:

var combo = document.forms[0]['ctl00_ContentPlaceHolder1_drpCursos'];

现在可以了,但我认为这不是一个好的解决方案...

我该如何以正确的方式做到这一点?

编辑:我的javascript 代码在外部文件中。

我尝试了 Darin 的解决方案,但它不起作用,然后我将我的代码直接粘贴到 aspx 页面中,现在它起作用了。

此外,它仅在代码位于函数内部时才有效,否则我会得到undefined

为什么会这样?

【问题讨论】:

    标签: javascript asp.net webforms master-pages


    【解决方案1】:
    var combo = document.forms[0]['<%= drpCursos.ClientID %>'];
    

    【讨论】:

      【解决方案2】:

      Darin 的解决方案会起作用,但如果您使用的是 .net 4.0,现在可能会有更好的解决方案。使用控件的 ClientIDMode 属性,您可以控制在运行时分配给控件的名称(即“ctl00_ContentPlaceHolder1_drpCursos”)。

      &lt;asp:Label ID="Label1" runat="server" ClientIDMode="[Mode Type]"/&gt;

      http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

      摘录如下:

      模式类型

      • Legacy:如果未在控件层次结构中的任何位置设置 ClientIDMode,则为默认值。这会导致客户端 ID 的行为方式与它们在框架的 2.0 版(3.0 和 3.5 未更改此代码路径)中的行为方式相同。该模式会生成类似“ctl00_MasterPageBody_ctl01_Textbox1”的ID。

      • 继承:这是每个控件的默认行为。这将查看控件父级以获取其 ClientIDMode 的值。您不需要在每个控件上都设置它,因为它是默认设置,仅当 ClientIDMode 已更改并且所需的新行为是从控件父级继承时才使用。

      • 静态:此模式完全按照您的想法执行,它将客户端 ID 设为静态。这意味着您为 ID 输入的内容将用于客户端 ID。警告,这意味着如果在重复控件中使用静态 ClientIDMode,则开发人员有责任确保客户端 ID 的唯一性。

      • Predictable:当框架需要确保唯一性但需要以可预测的方式完成时,使用此模式。此模式最常见的用途是数据绑定控件。框架将遍历以提供的 ID 为其父控件 ID 为前缀的控件层次结构,直到它到达层次结构中的 ClientIDMode 定义为静态的控件。如果控件被放置在数据绑定控件内,则带有标识该实例的值的后缀也将添加到提供的 ID 中。 ClientIDRowSuffix 属性用于控制将用作后缀的值(参见示例)。这种模式会生成一个类似于“Gridview1_Label1_0”的ID

      如果您只有一些控件需要 ID 用于 javascript,我会亲自使用“静态”方法,分配我想要的 ID,然后让 .net 以默认方式分配其余部分。

      【讨论】:

        【解决方案3】:

        试试这个:

        //default ID form asp.net is aspnetForm
        // id$ = id ending with ...
        var combo = $("form#aspnetForm").find("[id$='drpCursos']");
        

        或者

        var combo = $("form#aspnetForm").find("select[id$='drpCursos']");
        

        问候

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2012-12-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-08-22
          • 1970-01-01
          相关资源
          最近更新 更多