使用 JQuery 访问控制时遇到问题

Question

如何在 Web 窗体母版页上使用 JQuery 来访问 HTML 文本输入控件的值，该控件位于 Ajax Control Toolkit 手风琴窗格中，驻留在 Web 表单内容页面上？

我有一个名为 Site.Master 的母版页，内容页位于一个名为 MainContent 的占位符中。一些视觉效果：

Site.Master:

<body>
  <form runat="server">
    <asp:ScriptManager runat="server">
      <scripts>...</scripts>
    </asp:ScriptManager>

    <div class="container body-content">
      <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
...

这是我的手风琴（位于内容页面 (Default.aspx)；内容页面位于上面的 MainContent 占位符中）:

<ajaxToolkit:Accordion 
    ID="Accordion1" 
    runat="server"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    max-height="300px"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    EnableViewState="true"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">
    <Panes>
...
        <ajaxToolkit:AccordionPane 
            ID="AccordionPane1" 
            runat="server">
            <Header>
                Use a list
            </Header>
            <Content>
                <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                    <ContentTemplate>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="file-upload-container">
                                    <div class="input-group">
                                        ...
                                        <input 
                                            class="form-control"
                                            id="Text03" 
                                            placeholder="Browse or enter a file"
                                            runat="server"
                                            style="border: none"
                                            type="text" />
                                    </div>
                                    ...
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </Content>
        </ajaxToolkit:AccordionPane>
    </Panes>
</ajaxToolkit:Accordion>

这是我的 JQuery，它采用 HTML 文件输入的文本结果并将其复制到适当的 HTML 文本输入中（上面的 Text03） :

<script type="text/javascript">
    $(document).ready(function () {
        $("#file-upload-button").change(function () {
            var fileName = $(this).val().split("\").pop();
            var txtBoxID= <%# MainContent.FindControl("Text2").ClientID %>;
            $(txtBoxID).val(fileName);
        });
        $("#file-upload-button2").change(function () {
            var fileName = $(this).val().split("\").pop();
            var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>;
            $(txtBoxID).val(fileName);
        });
        ...
    });
</script>

仅与 "Text2" 函数配合使用时效果很好。但是当我尝试添加 "Text03" 函数时，它给了我这个错误，第 30 行被突出显示：

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:


Line 28:             $("#file-upload-button2").change(function () {
Line 29:                 var fileName = $(this).val().split("\").pop();
Line 30:                 var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>;
Line 31:                 $(txtBoxID).val(fileName);
Line 32:             });

我的控件不知何故不存在？有某种约束力问题吗？我将不胜感激任何建议，我已经为此扔了整整一天的石头。谢谢！

Answer 1

您将无法在代码中直接引用它，因为它位于 ContentTemplate 中。尝试将其添加为指标 class，例如 class="form-control text03"，然后通过 $(".text03").val(fileName); 引用它。

使用 JQuery 访问控制时遇到问题

Trouble accessing control using JQuery

asp.net

jquery

webforms

accordion

ajaxcontroltoolkit