Question

我无法调用外部jquery文件。同一个aspx页面中的代码正在工作，但外部js无法正常工作。请帮忙 -

我的aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="loginvalidation.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://jquery.bassistance.de/validate/additional-methods.js" type="text/javascript"></script>
     <script src="JScript1.js" type="text/javascript"></script>

</head>
<body">
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>Username:</td>
            <td><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

我的外部jquery代码：

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            <%=txtUserName.ClientID %>: {
                required: true,
                email: true
            },
            <%=txtPassword.ClientID %>: {
                required: true,
                digits:true,
                minlength:10,
                maxlength:10
            }
        }, 
        messages: {
            <%=txtUserName.ClientID %>:{
                required: "* Required Field *"
            },
            <%=txtPassword.ClientID %>:{
                required:"* Required Field *"
            }
        }
    });
});

Answer 1

将脚本移动到外部js文件时，必须用生成的客户端ID替换<%=txtUserName.ClientID %>和<%=txtPassword.ClientID %>。

谢谢！

Answer 2

像<%=txtUserName.ClientID %>这样的服务器端代码在JS文件中不起作用。它们不会被解析，而是呈现为简单文本。

您可以使用rules add function。

在ASPX页面中，添加一个CSS类（这里我添加了用户名）

<asp:TextBox ID="txtUserName" runat="server" CssClass="username"></asp:TextBox>

在您的外部文件中

jQuery(function() {

    jQuery('form').validate(); 

    // Use custom class added to input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        email: true,
        messages: { 
            required: "* Required Field *" 
        } 
    });
});

Answer 3

添加脚本完整路径，如

<script src="~/foldername/foldername/JScript1.js"></script>

你只需要选择文件并放到visual studio中的页面。

并且评论建议＆lt;％= txtUserName.ClientID％＆gt;这些是无法在javascript外部文件中运行的asp.net代码。

代替它，请遵循任何解决方案

解决方案1 

通过设置ClientIdMode =“Static”，在控件或页面上使用StaticId。您可以在link

上找到更多详细信息

像

<asp:TextBox id="txtUserName" runat="server" ClientIdMode ="static" />

设置完成后，您可以控制

等控件

$('#txtUserName')

解决方案2

查看由Asp.net引擎呈现的html页面。 Asp.net引擎转换控件id取决于使用的主页面并将其附加到控件ID上。现在呈现的controlId应该看起来像'ct100_txtUserName'，你可以得到你的控件

$('#ct100_txtUserName')

解决方案3

在

等控件上添加类

<asp:TextBox id="someId" CssClass="someClass" runat="server" />

并获得像

这样的控件

$('.someClass')

但最后一个比其他

慢

无法调用外部jquery文件

3 个答案: