Question

母版页：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %>

<!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">    
    <asp:ContentPlaceHolder id="head" runat="server">
    <%--Place for title--%>
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>        
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
       <link href="css/loginPopup.css" rel="stylesheet" type="text/css" />            
</head>      
<body>
<form id="form1" runat="server">    
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>            
      <div class="body1">      
            <div class="main">
……
……

内容页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>Register with Us</title>
  <link href="css/template.css" rel="stylesheet" type="text/css" />
  <link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
  <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>  
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#form1").validationEngine();
        });
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="main_body" Runat="Server">
        <div class="body2">
            <div class="main">
…….
…….

问题

亲爱的先生，正如您在上面的内容页面中看到的，有一个使用表单ID（form1）的jQuery函数。问题是表单/表单ID在母版页中。这就是为什么这个jQuery函数不起作用的原因。请告诉解决方案，帮助我。

Answer 1

在asp.net webforms中生成的html元素没有相同的服务器端ID，但您可以通过ClinetID属性访问该Id：

jQuery("#<%=form1.ClientID %>").validationEngine();

Answer 2

jQuery选择器

在您的jQuery选择器中，您需要考虑表单的名称可能已更改，尤其是因为它是runat="server"。

使用对表单使用通配符搜索的选择器，这样的东西应该起作用：

$("form[id$='form1']")

或者更具体地说是您的使用场景：

jQuery("form[id$='form1']").validationEngine(); 
// $ is a shortcut for jQuery so either can be used

查看jQuery selectors了解更多选项。

客户端与服务器端

我通常选择客户端javascript，只在绝对必要的地方混合2。在这些情况下，我选择使用IIFE模式并注入一些属性服务器端值（即使用VahidND建议的<%=form1.ClientID %>语法）。我尝试在我的aspx文件中保留最少的javascript。这有助于组织Web应用程序，并使其在Firefox和Chrome中更容易调试。一般来说，只需使用jQuery 的$=语法结束选择器等;当你的页面越来越接近现实生活的复杂性时，你会发现你将使用 LOADS 。

ASP.NET Web窗体

ASP.NET Web窗体的一个主要缺点是每页只限一个窗体。如果您要将自己的表单添加到页面中，这可能也会导致一些问题。

内容页面中的表单标签或表单ID

母版页：

内容页面：

问题

2 个答案:

jQuery选择器

客户端与服务器端

ASP.NET Web窗体