在 ASP.NET 用户控件上使用 JQuery？答案

【问题标题】：Using JQuery on ASP.NET User Controls?在 ASP.NET 用户控件上使用 JQuery？
【发布时间】：2012-12-13 14:50:48
【问题描述】：

我查看了有关在 asp.net 用户控件中使用 JQuery 的示例，当我尝试论坛中表达的示例时，我仍然没有得到 JQuery 的任何响应。
任何人都可以帮我解决这个问题吗？整个控件标记如下所示。
以防万一不是很明显，我想实现一个接受到 txtNoteText 文本框中的字符的过滤器。

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NotesEdit.ascx.cs" Inherits="InstallationProjectManager.Restricted.NotesEdit" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2011.2.915.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<script src="<%# ResolveUrl("~/javascript/jquery-1.8.3.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('<%= txtNoteText.ClientID %>').bind('keypress', function(event) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>
<table id="tblNotesEdit" style="border-collapse: collapse; border-spacing: 2px; border: 15px; padding: 1px; width: 100%;">
    <tr>
        <td>
            <table style="margin-left: 10px; width: 100%;">
                <tr><td><asp:HiddenField runat="server" ID="hfNoteID" Value='<%# DataBinder.Eval(Container, "DataItem.ID") %>'/></td></tr>
                <tr><td colspan="2"><h2 class="headerMajor">Add/Edit Job Notes</h2></td></tr>
                <tr>
                    <td class="verticleTableStyle">Note Type:</td>
                    <td>
                        <telerik:RadComboBox ID="cbxNoteType" Runat="server" Enabled='<%# (DataItem is GridInsertionObject) %>' SelectedValue='<%# DataBinder.Eval(Container, "DataItem.NoteTypeID") %>' DataSourceID="dsNoteTypes" DataTextField="Description" DataValueField="ID" Skin="Simple" />
                        <asp:SqlDataSource ID="dsNoteTypes" runat="server" ConnectionString="<%$ ConnectionStrings:InstallationProjectManager.Properties.Settings.conDB %>" SelectCommand="SELECT [ID], [Description] FROM [NoteTypeEnumeration]"></asp:SqlDataSource>
                        <asp:RequiredFieldValidator runat="server" ID="rfvCBXNoteType" EnableClientScript="True" ControlToValidate="cbxNoteType" ErrorMessage="Note type is required to create a note record." InitialValue="Pick One" Display="None" />
                        <ajaxToolkit:ValidatorCalloutExtender ID="vceRFVCBXNoteType" runat="server" TargetControlID="rfvCBXNoteType"/>
                    </td>
                </tr>

                <tr><td class="verticleTableStyle">Note Text:</td><td><telerik:RadTextBox ID="txtNoteText" runat="server" SkinID="LongTextBox" Culture="en-US" Text='<%# DataBinder.Eval(Container, "DataItem.Message") %>' EmptyMessage="Notes" Skin="Simple" Rows="20" Width="90%" Height="50%" TextMode="MultiLine" /></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr>
                    <td colspan="2">
                        <telerik:RadButton ID="btnUpdate" Text="Update" runat="server" Skin="Telerik" CommandName="Update" Visible='<%# !(DataItem is GridInsertionObject) %>'><Icon PrimaryIconUrl="../Images/saveHS.png" /></telerik:RadButton>
                        <telerik:RadButton ID="btnInsert" Text="Insert" runat="server" Skin="Telerik" CommandName="PerformInsert" Visible='<%# DataItem is GridInsertionObject %>'><Icon PrimaryIconUrl="../Images/saveHS.png" /></telerik:RadButton>
                        &nbsp;
                        <telerik:RadButton ID="btnCancel" Text="Cancel" runat="server" Skin="Telerik" CommandName="Cancel" CausesValidation="False"><Icon PrimaryIconUrl="../Images/305_Close_16x16_72.png" /></telerik:RadButton>
                    </td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
            </table>            
        </td>
    </tr>
</table>

谢谢。

【问题讨论】：

尝试为firefox安装fire bug，看看是否有任何javascripts错误
您是否尝试过使用 web 调试器（例如 firebug 或 Dragonfly）来查看是否出现错误？
尝试修改$('#<%= txtNoteText.ClientID %>').bind()

标签： jquery asp.net user-controls

【解决方案1】：

您需要在 jquery 选择器中为 DOM 元素 id 加上 # 前缀：

$('#<%= txtNoteText.ClientID %>').bind(...

【讨论】：

【解决方案2】：

更改为#

<script type="text/javascript">
    $(document).ready(function() {
        $('#<%= txtNoteText.ClientID %>').bind('keypress', function(event) {
            var regex = new RegExp("^[a-zA-Z0-9]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
                event.preventDefault();
                return false;
            }
        });
    });
</script>

【讨论】：