在基于母版页的asp.net Web应用程序中使用JQuery打开弹出窗口答案

【问题标题】：Using JQuery in a asp.net web application based on master pages to open a popup window在基于母版页的asp.net Web应用程序中使用JQuery打开弹出窗口
【发布时间】：2012-04-17 09:59:42
【问题描述】：

我有一个基于母版页的 asp.net 4 Web 应用程序。在母版页中，我引用了所需的脚本和 css 文件。但是，当页面加载时，我收到一个 JavaScript 错误“Microsoft JScript 运行时错误：预期对象”。我知道这与母版页有关，因为如果我构建一个没有母版页的测试应用程序，代码就可以正常工作。

母版页代码

   <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>
    <!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">
    <script src="Popup.js" type="text/javascript"></script>
    <link rel="stylesheet" href="StyleSheet1.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>Test</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    </body>
    </html>

弹出代码

function Popup() {
        window.showModalDialog("webForm3.aspx", "");
    }

$(document).ready(function () {
    $("#button").click(function () {
        var isChecked = $('#checkbox1').is(':checked');
        if (isChecked) {
            Popup();
        }
    });
});

主页代码

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Check box
    <div id="button">
        <asp:CheckBox ID="checkbox1" runat="server" /></div>
</asp:Content>

弹出页面代码

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

<!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>Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Hellow World
</div>
</form>
</body>
</html>

【问题讨论】：

标签： jquery asp.net master-pages

【解决方案1】：

//================  site1.master  =======================//

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

<!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="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Popup.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

//================  popup.js  =======================//


$(document).ready(function () {
    $('#button').click(function (e) {
        //var isChecked = $(this).find('#ContentPlaceHolder1_checkbox1').is(':checked');

        //Or

        var isChecked = $(this).find(':checkbox').is(':checked');

        if (isChecked) {
            Popup();
        }
    });
});

function Popup() {
    window.showModalDialog("webForm3.aspx", "");
};


//================  webfrom2.aspx  =======================//


<%@ Page Title="" Language="C#" MasterPageFile="~/site1.Master" AutoEventWireup="true"
    CodeBehind="WebForm2.aspx.cs" Inherits="NewJqueryPlugins.WebForm2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="button" style="border: 2px solid green;">
        Check box
        <asp:CheckBox ID="checkbox1" runat="server" />
    </div>
</asp:Content>


//================  webfrom3.aspx  =======================//


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

<!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 id="Head1" runat="server">
    <title>Popup</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Hellow World
    </div>
    </form>
</body>
</html>

【讨论】：

如果您使用母版页，所有输入的飞行 id 都将转换为 asp:ContentPlaceHolder id value +'_'+ checkbox id value 。现在你的复选框 id 值为 ContentPlaceHolder1_checkbox1。所以在使用母版页时要小心，所有的 id 都会在 asp.net 中更改。
在浏览器中右键单击并查看页面源代码，您可以看到复选框的原始 ID。在使用 asp.net c# web 应用程序使用 masterpage 为 webform 实现 jquery 时，我也遇到了同样的问题。