整合jQuery UI 與ASP. NET Web Form - 3

by vivid 16. 七月 2014 04:00

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N140715002
出刊日期:2014/7/16
開發工具:Visual Studio 2013 Ultimate Update 2
版本:.NET Framework 4.5.5x

這一篇文章將延續系列文章《整合jQuery UI 與ASP. NET Web Form - 1》《整合jQuery UI 與ASP. NET Web Form - 2》的情境,介紹如何整合ASP.NET Web伺服器控制項與jQuery UI。除了再詳細介紹TextBox控制項整合的注意事項之外,此篇文章將介紹清單系統的控制項,如BulletedList、DataList、ListView與Repeater控制項的整合。

TextBox伺服器控制項-Datepicker

在此系列的前一篇文章提及,TextBox伺服器控制項產生出Input標籤(根據TextMode 屬性的設定,產生type=text、type=number…等等不同的Input欄位),可以和許多jQuery UI的Widget做整合。不過在整合上有一些注意事項需要先了解一下,例如TextBox伺服器控制項TextMode 屬性設定為「Date」

<asp:TextBox ID = "TextBox1" runat = "server" TextMode = "Date"> </asp:TextBox>

則會產生以下Input(type="date") 標籤:

<input name = "TextBox1" type = "date" id = "TextBox1" >

參考以下與jQuery UI Datepicker Widget整合範例:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">

  
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
      <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
   
    </style>
</head>
<body>
    <form id = "form1" runat= "server">
    <div>
        <asp:TextBox ID = "TextBox1" runat = "server" TextMode = "Date"> </asp:TextBox>
    </div>
    </form>
     <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>
        $(function () {
            $("#TextBox1").datepicker();
        });
    </script>
</body>
</html>

 

在Internet Explorer執行時,沒有什麼太大的問題,得到的執行結果如下圖所示:

clip_image002

圖 1:Datepicker - Internet Explorer瀏覽器。

但相同的網頁在Chrome瀏覽器上執行時,卻變得很怪異,請參考下圖所示:

clip_image004

圖 2:Datepicker-Chrome瀏覽器。

這是因為,IE、Chrome瀏覽器對HTML5的實作不同,當遇到Input(type="date") 標籤時,Chrome會顯示內建的月曆,如上圖最上方的月曆。如此,jQuery UI提供的Datepicker就重複出現在下方。因此若為了讓多種瀏覽器都能正確顯示月曆,在整合jQuery UI Datepicker時,只好放棄HTML5 Input(type="date")標籤,改用最原始的Input(type="text")來設計。參考以下程式碼,TextBox控制項的TextMode使用預設值(SingleLine):

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">

  
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
      <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
   
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
        <asp:TextBox ID = "TextBox1" runat = "server"> </asp:TextBox>
    </div>
    </form>
     <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>
        $(function () {
            $("#TextBox1").datepicker();
        });
    </script>
</body>
</html>

 

這樣在Chrome瀏覽器的執行結果才會正常一點,此範例得到的執行結果如下圖所示:

clip_image006

圖 3:Datepicker - Chrome瀏覽器。

TextBox伺服器控制項-Spinner

TextBox伺服器控制項若要與jQuery UI Spinner Widget做整合,和上例的Datepicker會遇到相同的瀏覽器HTML5支援度的問題。例如以下的TextBox伺服器控制項:

<asp:TextBox ID = "TextBox1" runat = "server" TextMode = "Number"> </asp:TextBox>

將會產生以下Input(type=" number ") 標籤:

<input name = "TextBox1" type = "number" id = "TextBox1" >

參考以下與jQuery UI Datepicker Widget整合範例:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
   
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>

            <asp:TextBox ID = "TextBox1" runat = "server" TextMode = "Number"> </asp:TextBox>
        </div>
        <script src = "Scripts/jquery-2.0.3.min.js"> </script>
        <script src = "Scripts/jquery-ui.min.js"> </script>
        <script>
            $(function () {
                $("#TextBox1").spinner();
            });
        </script>

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

 

在Internet Explorer執行時,沒有什麼太大的問題,請參考下圖所示:

clip_image008

圖 4:TextMode="Number",Internet Explorer。

但相同的網頁在Chrome瀏覽器上執行時,卻變得很怪異,請參考下圖所示:

clip_image010

圖 5:TextMode="Number",Chrome瀏覽器。

這同樣是因為IE、Chrome瀏覽器對HTML5的實作不同,當遇到Input(type="number") 標籤時,Chrome會顯示內建的Spinner,如上圖最內層的Spinner。如此,jQuery UI提供的Spinner就重複出現在外部。因此若為了讓多種瀏覽器都能正確顯示Spinner,在整合jQuery UI Spinner時,只好放棄HTML5 Input(type=" number ")標籤,改用最原始的Input(type="text")來設計。參考以下程式碼,TextBox控制項的TextMode使用預設值(SingleLine):

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
   
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>

            <asp:TextBox ID = "TextBox1" runat = "server"> </asp:TextBox>
        </div>
        <script src = "Scripts/jquery-2.0.3.min.js"> </script>
        <script src = "Scripts/jquery-ui.min.js"> </script>
        <script>
            $(function () {
                $("#TextBox1").spinner();
            });
        </script>

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

 

這樣在Chrome瀏覽器之中才會正常,請參考下圖所示:

clip_image012

圖 6:Spinner - Chrome瀏覽器。

BulletedList伺服器控制項

BulletedList伺服器控制項會產生條列式的清單方塊,當設定DisplayMode屬性為「HyperLink」時,會額外產生<a>連結標籤,因此很適合和jQuery UI 的Menu Widget整合在一起。以下的BulletedList控制項:

<asp:BulletedList ID = "BulletedList1" runat = "server" DisplayMode = "HyperLink">
<asp:ListItem Value = "01_button.aspx"> Button </asp:ListItem>
<asp:ListItem Value = "02_TextBox.aspx"> TextBox </asp:ListItem>
<asp:ListItem Value = "03_BulletedList.aspx"> BulletedList </asp:ListItem>
</asp:BulletedList>

在執行時期將會產生以下的標籤:

<ul id = "BulletedList1">
    <li> <a href = "01_button.aspx"> Button </a> </li>
    <li> <a href = "02_TextBox.aspx"> TextBox </a> </li>
    <li> <a href = "03_BulletedList.aspx"> BulletedList </a> </li>
</ul>

參考以下整合範例:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
      <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
    <div>
       <asp:BulletedList ID = "BulletedList1" runat = "server" DisplayMode = "HyperLink">
            <asp:ListItem Value = "01_button.aspx"> Button </asp:ListItem>
            <asp:ListItem Value = "02_TextBox.aspx"> TextBox </asp:ListItem>
            <asp:ListItem Value = "03_BulletedList.aspx"> BulletedList </asp:ListItem>
        </asp:BulletedList>
    </div>
     <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>
        $(function () {
            $("#BulletedList1").menu();
        });
    </script>
     
    </form>
     </body>
</html>

 

這個範例的執行結果請參考下圖所示:

clip_image014

圖 7:BulletedList伺服器控制項。

DataList伺服器控制項

DataList伺服器控制項可以利用ItemTemplate樣版,來定義要使用哪一種HTML Element來顯示清單資料。當DataList伺服器控制項RepeatLayout屬性為「Flow」而RepeatDirection屬性設定為「Horizontal」時,最外部會產生SPAN標籤來顯示資料,例如以下範例程式:

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat = "server">
    protected void Page_Load( object sender , EventArgs e ) {
        var data = new string[ ] { "mary" , "candy" , "lilly" };
        DataList1.DataSource = data;
        DataList1.DataBind( );
    }
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />

</head>
<body>
    <form id = "form1" runat = "server">
        <div>
            <asp:DataList ID = "DataList1" runat = "server" RepeatLayout = "Flow"
                RepeatDirection = "Horizontal" OnItemDataBound = "DataList1_ItemDataBound">
                <ItemTemplate>
                    <%#Container.DataItem %>
                </ItemTemplate>
            </asp:DataList>
        </div>
        <div id="result"> </div>
    </form>
</body>
</html>

 

執行後,DataList控制項產生如下的HTML標籤,DataList中的每個項目使用<span>標籤包起來:

<span id="DataList1">
    <span>
       mary
    </span>
    <span>
      candy
    </span>
    <span>
       lilly
    </span>
</span>

 

這個範例的執行結果請參考下圖所示:

clip_image016

圖 8:DataList伺服器控制項。

改寫上個範例如下,加上選取項目要套用的CS樣式,並在jQuery Ready事件中,叫用Selectable方法,讓DataList伺服器控制項與jQuery UI Selectable整合在一起:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
  
    protected void Page_Load( object sender , EventArgs e ) {
        var data = new string[ ] { "mary" , "candy" , "lilly" };
        DataList1.DataSource = data;
        DataList1.DataBind( );
    }

    protected void DataList1_ItemDataBound( object sender , DataListItemEventArgs e ) {
        e.Item.Attributes[ "class" ] = "ui-widget-content";
    }
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        #DataList1 .ui-selecting {
            background: #FECA40;
        }

        #DataList1 .ui-selected {
            background: #F39814;
            color: white;
        }

        #DataList1 span {
            display: block;
            width: 200px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>
            <asp:DataList ID = "DataList1" runat = "server" RepeatLayout = "Flow" RepeatDirection = "Horizontal" OnItemDataBound = "DataList1_ItemDataBound">
                <ItemTemplate>
                    <%#Container.DataItem %>
                </ItemTemplate>
            </asp:DataList>
        </div>
        <div id = "result"> </div>
    </form>
    <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>

        $(function () {
            $("#DataList1").selectable({
                stop: function (event, ui) {
                    var msg = "";
                    $("span.ui-selected").each(function (idx, item) {
                        msg += $(item).text();
                    });
                    $("#result").text(msg);
                }
            });
        });
    </script>
</body>
</html>

這個範例的執行結果請參考下圖所示:

clip_image018

圖 9:DataList伺服器控制項。

Repeater伺服器控制項

Repeater伺服器控制項跟DataList伺服器控制項類似,可以利用ItemTemplate定義要使用哪一種HTML Element來顯示資料。和上個DataList範例不一樣之處在於ItemTemplate中顯示的文字資料,不會用任何HTML標籤包起來。參考以下範例程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<script runat="server">
    protected void Page_Load( object sender , EventArgs e ) {
        var data = new string[ ] { "mary" , "candy" , "lilly" };
        Repeater1.DataSource = data;
        Repeater1.DataBind( );
    }
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />

</head>
<body>
    <form id = "form1" runat = "server">     
            <asp:Repeater ID = "Repeater1" runat = "server">
                <ItemTemplate>
                    <%#Container.DataItem %>
                </ItemTemplate>
            </asp:Repeater>

            <div id = "result"> </div>
    </form>
    <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>

</body>
</html>

 

這個範例執行時,Repeater伺服器控制項將產生以下靜態的文字:

mary

candy

lilly

因此在網中看起來的執行結果如下:

clip_image020

圖 10:Repeater伺服器控制項。

我們需要為它加一些標籤比較好和jQuery UI做整合,修改範例程式碼如下,在Repeater伺服器控制項外部加上一個Div標籤,當作是jQuery UI的Selectable:

<%@ Page Language = "C#" %>

<!DOCTYPE html>
<script runat="server">
    protected void Page_Load( object sender , EventArgs e ) {
        var data = new string[ ] { "mary" , "candy" , "lilly" };
        Repeater1.DataSource = data;
        Repeater1.DataBind( );
    }
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        #select1 .ui-selecting {
            background: #FECA40;
        }

        #select1 .ui-selected {
            background: #F39814;
            color: white;
        }

        #select1 span {
            display: block;
            width: 200px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>
            <div id = "select1">
                <asp:Repeater ID = "Repeater1" runat="server">
                    <ItemTemplate>
                        <span class = "ui-widget-content"> <%#Container.DataItem %> </span>
                    </ItemTemplate>
                </asp:Repeater>
           </div>
        </div>
        <div id = "result"> </div>
    </form>
    <script src=  "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>

        $(function () {
            $("#select1").selectable({
                stop: function (event, ui) {
                    var msg = "";
                    $("span.ui-selected").each(function (idx, item) {
                        msg += $(item).text() + " ";
                    });
                    $("#result").text(msg);
                }
            });

        });
    </script>
</body>
</html>

 

此範例的執行結果和上個DataList範例雷同,請參考下圖所示:

clip_image022

圖 11:Repeater伺服器控制項。

ListView伺服器控制項- Accordion

接下來我們來看看ListView伺服器控制項與jQuery UI Accordion Widget的整合。Accordion Widget可以有展開收合樣版的效果,接下來的範例程式,要利用SqlDataSource控制項存取Pubs資料庫的Store資料表內容,資料庫連接字串儲存在Web.config檔案之中:

<connectionStrings>

<add name="PubsConnectionString" connectionString="Data Source=.\sqlexpress;Initial Catalog=Pubs;Integrated Security=True" providerName="System.Data.SqlClient" />

</connectionStrings>

ListView伺服器控制項可以利用LayoutTemplate樣版定義ListView要呈現的外觀,ItemTemplate樣版則用來定義每一筆資料要呈現的公版。參考以下範例程式碼,ListView伺服器控制項的資料來自於SqlDataSource控制項。LayoutTemplate樣版中定義jQuery UI Accordion所需的<div>標籤;而ItemTemplate樣版中則定義jQuery UI Accordion樣版所需的<h3>與<div>標籤,並利用資料繫結語法,將資料庫資料表的欄位資料呈現在樣版之中:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
</script>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runa t= "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        #ListView1_itemPlaceholderContainer {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

            #ListView1_itemPlaceholderContainer li {
                margin: 0 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1.4em;
                height: 18px;
            }

                #ListView1_itemPlaceholderContainer li span {
                    position: absolute;
                    margin-left: -1.3em;
                }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>

            <asp:ListView ID = "ListView1" runat = "server" DataSourceID = "SqlDataSource1" DataKeyNames = "stor_id">

                <ItemTemplate>

                    <h3>
                        <%# Eval("stor_id") %>
                    </h3>
                    <div>
                        <span> Store Name : </span><%#((System.Data.DataRowView )Container.DataItem)[1]%>
                        <br />
                        <span> Store Address : </span><%#((System.Data.DataRowView )Container.DataItem)[2]%>
                        <br />
                        <span> City : </span><%#((System.Data.DataRowView )Container.DataItem)[3]%>
                        <br />
                        <span> State : </span><%#((System.Data.DataRowView )Container.DataItem)[4]%>
                        <br />
                        <span> Zip : </span><%#((System.Data.DataRowView )Container.DataItem)[5]%>
                        <br />

                    </div>
                </ItemTemplate>

                <LayoutTemplate>
                    <div id = "accordion">
                        <h3 id = "itemPlaceholder" runat = "server" />
                    </div>
                </LayoutTemplate>
            </asp:ListView>
            <asp:SqlDataSource ID = "SqlDataSource1" runat = "server" ConnectionString = "<%$ ConnectionStrings:PubsConnectionString %>" SelectCommand = "SELECT * FROM [stores]"> </asp:SqlDataSource>
        </div>

        <script src = "Scripts/jquery-2.0.3.min.js"> </script>
        <script src = "Scripts/jquery-ui.min.js"> </script>
        <script>

            $(function () {

                $("#accordion").accordion();

            });
        </script>
    </form>

</body>
</html>

 

此範例執行的結果如下圖所示:

clip_image024

圖 12:ListView伺服器控制項- accordion。

ListView伺服器控制項- Sortable

這一個小節中,我們來看看ListView伺服器控制項整合 jQuery UI Sortable,ListView伺服器將呈現從資料庫取得的圖書名稱清單;利用jQuery UI Sortable做排序,排序完成之後,將排完序的圖書編號送到伺服端的ASPX程式,伺服端的程式把接收到的排序結果再送到用戶端。

在這個範例情境中設計服務端的Server.aspx程式如下:

 

<%@ Page Language = "C#" %>
<script runat = "server">

    protected void Page_Load( object sender , EventArgs e ) {
        var data = Request.Params[0];
        Response.Write( data.ToString( ) );
       
    }
</script>

若執行此網頁,傳入一個查詢字串,Server.aspx程式便將第一個參數的值印出:

http://localhost:1317/Server.aspx?d=100

得到的執行結果如下圖所示:

clip_image026

圖 13:Server.aspx。

以下是用戶端ASPX程式碼,ListView的資料來自於SqlDataSource,LayoutTemplate樣版中定義jQuery UI Sortable所需的<ul>標籤;而ItemTemplate樣版中則定義jQuery UI Sortable樣版所需的<li>標籤,並利用資料繫結語法,將資料庫資料表的欄位資料呈現在樣版之中:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">
</script>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        #ListView1_itemPlaceholderContainer {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

            #ListView1_itemPlaceholderContainer li {
                margin: 0 3px 3px 3px;
                padding: 0.4em;
                padding-left: 1.5em;
                font-size: 1em;
                height: 18px;
            }

                #ListView1_itemPlaceholderContainer li span {
                    position: absolute;
                    margin-left: -1.3em;
                }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>

            <asp:ListView ID = "ListView1" runat = "server" DataSourceID = "SqlDataSource1" DataKeyNames = "stor_id">

                <ItemTemplate>

                    <li class = "ui-state-default" id = '<%# Eval("stor_id") %>'>
                        <%#((System.Data.DataRowView )Container.DataItem)[1]%>
                    </li>
                </ItemTemplate>
                <LayoutTemplate>
                    <ul id = "itemPlaceholderContainer" runat = "server" style = "">
                        <li runat = "server" id = "itemPlaceholder" />
                    </ul>
                    <div style="">
                    </div>
                </LayoutTemplate>


            </asp:ListView>


            <asp:SqlDataSource ID = "SqlDataSource1" runat = "server" ConnectionString = "<%$ ConnectionStrings:PubsConnectionString %>" SelectCommand = "SELECT * FROM [stores]"> </asp:SqlDataSource>


        </div>

        <script src = "Scripts/jquery-2.0.3.min.js"> </script>
        <script src = "Scripts/jquery-ui.min.js"> </script>
        <script>

            $(function () {

                $("#ListView1_itemPlaceholderContainer").sortable({
                    update: function (event, ui) {
                        var d = $(this).sortable("toArray");
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "Server.aspx",
                            data: JSON.stringify(d),
                        }).success(function (msg) {
                            alert("receive from server :" + msg);
                        }).fail(function () {
                            alert("failed");
                        });

                    }
                });

            });
        </script>


    </form>

</body>
</html>

 

範例中註冊jQuery UI Sortable的update事件,只要排序項目變動時,就自動將排完序的結果利用.ajax方法送到伺服端的Server.aspx程式。收到伺服端的回應之後,在success事件利用alert函式顯示伺服端回傳的資料。此範例執行的結果如下圖所示:

clip_image028

圖 14:ListView伺服器控制項。

整合User Control與Dialog

接下來這個範例要介紹ASP.NET User Control與jQuery UI Dialog的整合。例如我希望在多個網頁顯示一些小秘訣,這些小秘訣除了直接顯示在網頁上,有時想要以對話盒的方式呈現。因在多個不同頁面之中需要顯示小秘訣,所以我將這部分獨立出來,封裝在使用者控制項(TipControl.ascx),對話盒需要有一個標題,因此使用者控制項設計時定義一個Title屬性。每次載入使用者控制項時,就亂數從tips陣列之中,取出一個小秘訣,顯示在Label控制項上:

<%@ Control Language = "C#" ClassName = "TipControl" %>

<script runat = "server">

    private string _title;
    public string Title { get { return _title; } set { _title = value; } }
    protected void Page_Load( object sender , EventArgs e ) {

        string[ ] tips = new string[ ]
    { "Study English every Day " ,
      "Learn English through Reading" ,
      "Learn English through Movies",
      "Learn English through Songs",
      "Read a book, newspaper or journal in English"   
    };

        var i = System.DateTime.Now.Second % 5;
        Label1.Text = tips[ i ];
        Panel1.DataBind( );
    }
</script>
<asp:Panel ID = "Panel1" runat = "server" title = "<%#Title %>">

    <asp:Label ID = "Label1" runat = "server" Text = "Label"> </asp:Label>
</asp:Panel>

 

用戶端的網頁便可以將此使用者控制項的內容,當做是對話盒要提示的文字,參考以下範例程式碼,dialog設定autoOpen選項為「false」,預設不顯示。對話盒中將會有一個「OK」按鈕,當你按下「OK」按鈕則會將對話盒關閉:

<%@ Page Language = "C#" %>

<%@ Register Src = "~/TipControl.ascx" TagPrefix = "uc1" TagName = "TipControl" %>
<!DOCTYPE html>
<script runat = "server">
 
</script>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <input id = "tipButton" type = "Button" value = "Tip" />
        <uc1:TipControl runat = "server" ID = "TipControl" Title = "Tips of the Day" />
    </form>
    <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>
        $(function () {

            $("#TipControl_Panel1").dialog({
                autoOpen: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    }
                }
            });


            $("#tipButton").click(function () {
                $("#TipControl_Panel1").dialog("open");
            });
        });
    </script>
</body>
</html>

 

此範例執行時,只要按下畫面中的「Tip」按鈕,就會顯示對話盒,請參考下圖所示:

clip_image030

圖 15:User Control與Dialog。

設計選單

ASP.NET 雖然提供Menu伺服器控制項來設計選單,但因為它會產生一些用戶端的JavaScript程式碼,因此不太容易和jQuery UI做整合。因此若要在ASPX網頁之中使用jQuery UI的menu Widget,建議搭配HTML標籤,像是<ul><li>來設計比較單純。

在這個範例之中,我希望選單的項目是動態透過Web服務取得,因此設計以下的WebService2,其中包含一個GetMenuData方法,取得選單項目(MyItem)。選單項目包裝成一個MyItem物件,Key屬性表示要顯示在選單中的文字;Value屬性值則記錄按下選單之後,要瀏覽的URL:

<%@ WebService Language = "C#" Class = "WebService2" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Linq;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding( ConformsTo = WsiProfiles.BasicProfile1_1 )]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService2  : System.Web.Services.WebService {

    [WebMethod]
    public System.Collections.Generic.List<MyItem> GetMenuData( ) {

        System.Collections.Generic.List<MyItem> data =
            new System.Collections.Generic.List<MyItem>( ) {
            new MyItem(){Key="File",Value="a.aspx"},
            new MyItem(){Key="Edit",Value="b.aspx"},
            new MyItem(){Key="Help",Value="c.aspx"}
           
            };
    
        return data;
    }

   public class MyItem {
        public string Key { get; set; }
        public string Value { get; set; }
    }
}

 

用戶端的程式如下,利用.ajax方法,從Web服務下載選單項目,然後動態組出<li>選單項目,其中包含一個連結,以便瀏覽到其它頁面:

<%@ Page Language= "C#" %>

<!DOCTYPE html>

<script runat = "server">

 
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <ul id = "menu1">
        </ul>
    </form>
    <script src = "Scripts/jquery-2.0.3.min.js"> </script>
    <script src = "Scripts/jquery-ui.min.js"> </script>
    <script>
        $(function () {

            $.ajax({
                type: "POST",
                url: "WebService2.asmx/GetMenuData",
                contentType: "application/json; charset=utf-8",
            }).success(function (data) {
                var m = data.d;

                for (t in m) {

                    var a = $("<a/>").attr("href", m[t].Value).text(m[t].Key);
                    var li = $("<li/>");
                    li.append(a);
                    $("#menu1").append(li);
                }
                $("#menu1").menu();
            }).fail(function () {
                alert("failed");
            });


        });
    </script>
</body>
</html>

 

這個範例的執行結果如下:

clip_image032

圖 16:Menu。

使用Tooptip

本系列文章的最後來介紹一下ASP.NET Web 伺服器控制項與Tooptip的整合。設計非常簡單,不需要做任何特別的處理,只要為每個伺服器控制項加上title就行了,參考以下範例程式碼:

<%@ Page Language = "C#" %>

<!DOCTYPE html>

<script runat = "server">

 
</script>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title> </title>
    <link href = "Content/themes/sunny/jquery-ui.css" rel = "stylesheet" />
    <style>
   
    </style>
</head>
<body>
    <form id = "form1" runat = "server">
        <div>

            <asp:TextBox title = "Your Name" ID = "TextBox1" runat = "server"> </asp:TextBox>
            <asp:TextBox title = "Your Age" ID = "TextBox2" runat = "server"> </asp:TextBox>
            <asp:Label titl e= "This is Label" ID = "Label1" runat = "server" Text = "Label"> </asp:Label>
            <asp:LinkButton title="This is Link Button" ID="LinkButton1" runat = "server"> LinkButton </asp:LinkButton>
        </div>
        <script src = "Scripts/jquery-2.0.3.min.js"> </script>
        <script src = "Scripts/jquery-ui.min.js"> </script>
        <script>
            $(function () {

                $(document).tooltip();
            });
        </script>

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

 

此範例執行的結果如下圖所示,每一個伺服器控制項都自動會出現tooltip,請參考下圖所示:

clip_image034

圖 17:使用Tooltip。

Tags:

.NET Magazine國際中文電子雜誌 | ASP.NET | jQuery UI | 許薰尹Vivid Hsu

評論 (47) -

cours de theatre paris
cours de theatre paris United States
2017/9/30 上午 11:26:56 #

Major thankies for the blog.Really looking forward to read more. Great.

回覆

dic phoenix
dic phoenix United States
2017/10/7 上午 01:51:20 #

I really liked your article.Really looking forward to read more. Awesome.

回覆

Osimi sea view
Osimi sea view United States
2017/10/9 下午 07:39:35 #

Wow, great blog post.Really looking forward to read more. Keep writing.

回覆

Buy illegal backlinks
Buy illegal backlinks United States
2017/10/12 下午 10:18:04 #

I truly appreciate this article.Really looking forward to read more. Really Cool.

回覆

this link
this link United States
2017/10/14 下午 05:34:01 #

wow, awesome blog.Really thank you! Awesome.

回覆

dragon city hack game
dragon city hack game United States
2017/10/15 下午 05:04:48 #

I really liked your article.Really thank you! Will read on...

回覆

my latest blog post
my latest blog post United States
2017/10/17 下午 04:23:08 #

This is one awesome blog.Really thank you! Will read on...

回覆

sletrokor
sletrokor United States
2017/10/17 下午 09:54:50 #

I think this is a real great blog article.Much thanks again. Cool.

回覆

VigRx
VigRx United States
2017/10/19 上午 08:58:21 #

Wow, great post.Much thanks again. Cool.

回覆

useful reference
useful reference United States
2017/10/19 下午 08:04:09 #

I am so grateful for your blog.Much thanks again. Really Great.

回覆

carte grise en ligne
carte grise en ligne United States
2017/10/21 上午 09:03:02 #

Im obliged for the blog article.Thanks Again. Cool.

回覆

phentaslim
phentaslim United States
2017/11/3 下午 12:03:59 #

Very informative article. Fantastic.

回覆

when is spinal stenosis surgery necessary
when is spinal stenosis surgery necessary United States
2017/11/15 上午 06:01:27 #

I appreciate you sharing this blog post.Really thank you! Really Great.

回覆

Very good blog.Really looking forward to read more. Will read on...

回覆

to trace a mobile number
to trace a mobile number United States
2017/11/22 上午 01:08:11 #

Thanks for the post.Really looking forward to read more. Fantastic.

回覆

bikinis
bikinis United States
2017/11/23 下午 08:01:43 #

Thanks for sharing, this is a fantastic post.Really thank you! Great.

回覆

Website Developers Auckland
Website Developers Auckland United States
2017/11/25 下午 05:00:40 #

Appreciate you sharing, great blog. Really Cool.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/26 下午 10:11:35 #

Thanks-a-mundo for the blog article.Thanks Again. Will read on...

回覆

cash for old car
cash for old car United States
2017/11/29 下午 02:35:34 #

Thank you ever so for you blog article.Much thanks again. Want more.

回覆

can ho gia re
can ho gia re United States
2017/11/29 下午 09:07:46 #

Thanks so much for the post.

回覆

small business loans
small business loans United States
2017/11/30 下午 11:02:19 #

I really enjoy the article. Keep writing.

回覆

porno
porno United States
2017/12/1 下午 02:42:47 #

I really enjoy the post.Much thanks again. Want more.

回覆

aged corporations
aged corporations United States
2017/12/3 上午 02:59:57 #

Major thanks for the blog article.

回覆

mika tan
mika tan United States
2017/12/5 上午 07:47:56 #

Very neat article post. Cool.

回覆

Say, you got a nice blog post. Really Great.

回覆

Very good blog article.Really thank you!

回覆

my site
my site United States
2017/12/10 下午 05:27:52 #

I loved your article post.Really thank you!

回覆

Jeromy Mccloudy
Jeromy Mccloudy United States
2017/12/14 上午 07:34:34 #

Thanks so much for the blog article.Much thanks again. Really Cool.

回覆

visit the site
visit the site United States
2017/12/14 下午 02:25:19 #

Major thanks for the blog.Really looking forward to read more. Will read on...

回覆

Christmas
Christmas United States
2017/12/14 下午 08:54:05 #

Im grateful for the blog.Really thank you! Awesome.

回覆

canon driver software
canon driver software United States
2017/12/16 下午 04:08:19 #

Thanks-a-mundo for the article. Will read on...

回覆

lose weight
lose weight United States
2017/12/16 下午 10:21:42 #

Thanks so much for the blog post.Really looking forward to read more. Awesome.

回覆

Success
Success United States
2017/12/17 下午 03:50:46 #

Wow, great article.Thanks Again. Awesome.

回覆

go to the website
go to the website United States
2017/12/17 下午 10:51:33 #

I am so grateful for your blog post. Will read on...

回覆

driver canon
driver canon United States
2017/12/23 上午 10:17:33 #

Appreciate you sharing, great blog article.Really thank you! Great.

回覆

driver hp
driver hp United States
2017/12/25 下午 10:14:42 #

Appreciate you sharing, great blog.Thanks Again.

回覆

Thanks again for the article post.Much thanks again.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 06:24:31 #

I loved your blog. Really Cool.

回覆

canon printer series
canon printer series United States
2017/12/27 下午 03:57:50 #

Very informative blog.Much thanks again. Really Great.

回覆

drivers hp
drivers hp United States
2018/1/2 上午 06:42:32 #

Really enjoyed this article post.Really thank you! Keep writing.

回覆

image source
image source United States
2018/1/2 下午 02:40:12 #

Im grateful for the blog article.Really thank you! Much obliged.

回覆

Fantastic blog.Really thank you! Really Great.

回覆

printer drivers
printer drivers United States
2018/1/3 上午 06:00:09 #

Im grateful for the blog.Really looking forward to read more. Fantastic.

回覆

web hosting
web hosting United States
2018/1/10 下午 12:58:24 #

I really enjoy the article post.Really thank you!

回覆

mAwGRr5nPztPlA
mAwGRr5nPztPlA United States
2020/9/17 上午 01:17:58 #

12532 811504Yay google is my king   helped   me to locate this  outstanding  web site! . 115444

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List