6

ASP.NET Web フォーム プロジェクトで [新規] > [Web フォーム] を選択すると、次のコードを含むページが表示されます。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

jQuery コードの追加は、通常 (Razor / Web ページ アプリ/サイトなど) と同じ方法で行われます。つまり、必要な jQuery および jQueryUI *.js および *.css ファイルを参照してから、jQuery をスクリプトに追加します。エレメント。

ただし、提供されているフォーム/ページ (「About」および「Contact」) には、次のようなコードがあります。

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

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
</asp:Content>

jQuery/jQueryUI コードはどのように追加されますか? *.js と *.css の参照、およびスクリプト セクションを単に asp:Content カプセル化内に追加できますか?

4

2 に答える 2

9

これが私のやり方です..

<script src="Scripts/jquery-ui-1.10.3.min.js"></script>
<script src="Plugins/jquery.cookie.js"></script>
<link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script>
    /**
      *This script creates a cookie that expires every 7 days. If you don't have this cookie
      *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
     **/
    $(document).ready(function () {
        if ($.cookie('modal_shown') == null) {
            $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
            $('#popup').dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    });
</script>
<div id="popup" style="display: none" title="New Release!">
    <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>
    <p><b>Issues Resolved</b></p>
    <ul>
        <li>New thing 1</li>
        <li>New thing 2</li>
        <li>New thing 3</li>
    </ul>
</div>
<h2><%: Title %>.</h2>
<h3>Your application description page.</h3>
<p>Use this area to provide additional information.</p>

これはマスターページを使用したものです。

マスター ページを使用しない Web フォームの場合は、次のようにします。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DuckbilledPlatypus.aspx.cs" 
Inherits="DuckbilledPlatypus" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-2.0.2.min.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js"></script>
    <script src="Plugins/jquery.cookie.js"></script>
    <link href="Content/themes/Smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <script>
        /**
          *This script creates a cookie that expires every 7 days. If you don't have this cookie
          *then the popup shows. If the cookie isn't expired, the popup doesn't show. 
         **/
        $(document).ready(function () {
            if ($.cookie('modal_shown') == null) {
                $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
                $('#popup').dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            }
        });
    </script>
    <div id="popup" style="display: none" title="New Release!">
        <span class="ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>
        <p><b>Issues Resolved</b></p>
        <ul>
            <li>New thing 1</li>
            <li>New thing 2</li>
            <li>New thing 3</li>
        </ul>
    </div>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

ご覧のとおり、タグ内に配置するだけです。これが役立つことを願っています！

于 2013-10-28T19:12:01.627 に答える
1

2 番目のスニペットは、マスター ページを使用しています。タグ内にスクリプト参照を追加することもできますが、asp:content代わりにマスター ページへの参照を追加する方がおそらく簡単です。

于 2013-10-28T19:03:58.317 に答える