中让使用者自订字体大小,浙大东军事和政院学

[习题]怎么样触发
GridView 身体里面的「子控件」的事件?#1 (ASP.NET案例精编 / 南开东军政大学学出版社 Ch.10/11两章的填补)

(本帖在版工的旧 Blog 中,宣布日期为 二零零六/07/08)
 
 使用者在浏览网址时,不时恐怕会嫌字体太小,希望能够自订大小,这种状态尤以商店名牌职员和工人、老职员和工人最为遍布。尽管IE 等浏览器有自订字号的意义,亦可透过 Ctrl 鼠标滚轮调解;但若网页设计人士将 font-size 的单位,写死成特定数值的 px (pixel, 像素),则 IE 自订字号的作用即会失效。
 
 在这里版工作者透过网络上寻得的典范,改写了意气风发支可让使用者通过「下拉选单 (DropDownList)」或「文字 Hyperlink」,以自订页面中字体大小的 ASP.NET 2.0 模范。透过 JavaScript 实时反应的特点,使用者每一趟重选后,不必再通过 Postback,效果可即时表今后页面中;且套用效果可套整页,或仅某些区块 (div 或 span),亦可套至 GridView 等控件个中。若欲在你的旧种类页面中引用此成效,必需先将页面中或控件中,HTML 或 CSS 已「设死」的 font-size 属性删除,并再贴切调节页面制版。 

這個範例是要補充**書本「上集」(ASP.NET專題實務卡塔 尔(阿拉伯语:قطر‎

亚洲必赢 1 
图 1 本帖的 ASP.NET 2.0 JavaScript 下载范例实施画面
 
 
 本帖的范例代码下载点:
 http://files.cnblogs.com/WizardWu/070708.zip
 
 此范例真正的要害,是位于 JavaScript 活页夹中的 ChangeFontSize.js 程序。

Ch.
10~Ch.11 都以講解 GridView的進階應用。**

亚洲必赢 2亚洲必赢 3关键的 .aspx 代码
亚洲必赢 4<body onload="fireDDL_FontSize()">
亚洲必赢 5    <form id="form1" runat="server">
亚洲必赢 6    <div>
亚洲必赢 7    钦赐管道生机勃勃 - 透過下拉選單
亚洲必赢 8    <asp:DropDownList ID="DropDownList_FontSize" runat="server">
亚洲必赢 9        <asp:ListItem>12</asp:ListItem>
亚洲必赢 10        <asp:ListItem>13</asp:ListItem>
亚洲必赢 11        <asp:ListItem>14</asp:ListItem>
亚洲必赢 12        <asp:ListItem>15</asp:ListItem>
亚洲必赢 13        <asp:ListItem>16</asp:ListItem>
亚洲必赢 14        <asp:ListItem>17</asp:ListItem>
亚洲必赢 15        <asp:ListItem>18</asp:ListItem>
亚洲必赢 16    </asp:DropDownList>    

上述兩章的難度偏高(别的入門書很難見到這種內容!卡塔尔,

 

但您假若學通了,各種「大型」调节項的運作原理也都會貫通。

亚洲必赢 17亚洲必赢 18关键的 .aspx.cs 代码
亚洲必赢 19protected void Page_Load(object sender, EventArgs e)
亚洲必赢 20亚洲必赢 21    亚洲必赢 22{
亚洲必赢 23        DropDownList_FontSize.Attributes["onChange"] = "javascript:doZoom(document.form1.DropDownList_FontSize.value)";
亚洲必赢 24
亚洲必赢 25        // 若登入系統後,有寫入 Session 或傳 QueryString,則下拉選單的預設選項(亦為頁面包车型大巴預設字體大小px),則設為 Session 或 QueryString 所钦定的值
亚洲必赢 26        if (Session["theFontSize"] == null)
亚洲必赢 27            DropDownList_FontSize.SelectedValue = "13";     // 下拉選單預設選項,亦為頁面包车型大巴預設字體大小(13px)
亚洲必赢 28        else
亚洲必赢 29            DropDownList_FontSize.SelectedValue = Session["theFontSize"].ToString();
亚洲必赢 30
亚洲必赢 31    }

其余,您也急需複習一下
.FindControl()方法
,專門用來抓取「大型调控項」身體裡面包车型地铁  子调整項!

 

===================================================

亚洲必赢 32亚洲必赢 33关键的 JavaScript 代码
亚洲必赢 34亚洲必赢 35function getElementsByName_iefix(tag, id) 亚洲必赢 36{
亚洲必赢 37    var elem = document.getElementsByTagName(tag);
亚洲必赢 38    var arr = new Array();
亚洲必赢 39亚洲必赢 40    for(i = 0,iarr = 0; i < elem.length; i ) 亚洲必赢 41{
亚洲必赢 42        att = elem[i].getAttribute("id"); 
亚洲必赢 43亚洲必赢 44        if(att == id) 亚洲必赢 45{
亚洲必赢 46            arr[iarr] = elem[i];
亚洲必赢 47            iarr ; 
亚洲必赢 48        }
亚洲必赢 49    }
亚洲必赢 50    return arr;
亚洲必赢 51}
亚洲必赢 52
亚洲必赢 53亚洲必赢 54function doZoom(size) 亚洲必赢 55{
亚洲必赢 56    var zooms = getElementsByName_iefix("div", "zoom");
亚洲必赢 57亚洲必赢 58    for (var i = 0; i < zooms.length; i ) 亚洲必赢 59{
亚洲必赢 60        zooms[i].style.fontSize = size 'px';
亚洲必赢 61    }
亚洲必赢 62
亚洲必赢 63    //document.form1.DropDownList_FontSize.fireEvent('onChange');
亚洲必赢 64}
亚洲必赢 65
亚洲必赢 66//.aspx前端 html 的 body 生机勃勃載入時可呼叫的。表示要讓頁面字體大小,在頁面风流倜傥載入時就設為下拉選單的預設值(13px)
亚洲必赢 67//若不設定此項,則頁面风姿浪漫載入時會設為 IE 的預設字體大小(16px)
亚洲必赢 68亚洲必赢 69function fireDDL_FontSize() 亚洲必赢 70{
亚洲必赢 71    document.form1.DropDownList_FontSize.fireEvent('onChange');
亚洲必赢 72}

笔者們先來看看這個範例 test_01_error.aspx

 

(1).  要在
GridView身體裡面,放置新的「子调整項」。

      您必須先把
GridView的欄位,變成「樣版(Template)」

      然後動手参加。

     
這部分是很基礎的操作,假若您不會的話,真的要買書從頭學起了!

      亚洲必赢 73

===================================================

(2). 
成就之後,笔者們想要這樣做:

     Q :  當使用者點選 GridView身體裡面包车型地铁「子调节項
(DropDownList)」,

      作者們希望能觸發
DropDownList對應的风浪、以至抓到使用者點選了DropDownList哪生龙活虎個選項....?

您肯定覺得很簡單,對吧?

跳到 VB的後置程式碼,您能够發現您無法挑選 "GridView身體裡面包车型客车「子调整項」"的事件

怎麼辦?

      亚洲必赢 74

使用 C#的人也许不會有這個困擾。

這涉及 VB的平地风波會使用到 Handles

C#則是在 HTML畫面原始檔裡面,把办法寫在决定項裡面了。比如:
Onclick="Button1_亚洲必赢,click"

您最佳看看書本「上集」(ASP.NET專題實務卡塔尔国的第三章
**
Ch.
3-4節**

在 Button调节項的
Command那生机勃勃節,作者有詳細說明這件事。

===================================================

(3). 
以VB程式碼為例,小编們的HTML設計畫面包车型地铁原始檔,需修改如下:

01         <asp:gridview autogeneratecolumns="False" datakeynames="id" datasourceid="SqlDataSource1" id="GridView1" runat="server">
02             <columns>
03                 <asp:boundfield datafield="id" headertext="id" insertvisible="False" readonly="True" sortexpression="id">
04                 <asp:templatefield headertext="name" sortexpression="name">
05                     <edititemtemplate>
06                         <asp:textbox id="TextBox1" runat="server" text="<%# Bind("name") %>">
07                     </asp:textbox>
08                     <itemtemplate>
09                         <asp:label id="Label1" runat="server" text="<%# Bind("name") %>">
10  
11                         <asp:dropdownlist autopostback="true" id="DropDownList1" onselectedindexchanged="DropDownList1_SelectedIndexChanged" runat="server">
12                             <asp:listitem selected="True">yes</asp:listitem>
13                             <asp:listitem>No</asp:listitem>
14  
15                         </asp:dropdownlist>
16                         <asp:button id="Button1" onclick="Button1_Click" runat="server" text="Button">
17                     </asp:button>
18                 </asp:label>
19                 <asp:boundfield datafield="student_id" headertext="student_id" sortexpression="student_id">
20                 <asp:boundfield datafield="city" headertext="city" sortexpression="city">
21                 <asp:boundfield datafield="chinese" headertext="chinese" sortexpression="chinese">
22                 <asp:boundfield datafield="math" headertext="math" sortexpression="math">
23             </asp:boundfield>
24         </asp:boundfield>
25  
26  
27         <asp:sqldatasource connectionstring="<%$ ConnectionStrings:testConnectionString %>" id="SqlDataSource1" runat="server" selectcommand="SELECT * FROM [student_test]">
28     </asp:sqldatasource></asp:boundfield></asp:boundfield></itemtemplate></edititemtemplate></asp:templatefield>
29 </asp:boundfield></columns></asp:gridview>

重點改革如下(這是採用VB語法卡塔 尔(英语:State of Qatar)
                        <asp:DropDownList ID="DropDownList1"
runat="server" AutoPostBack="true"                            
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

                           
<asp:ListItem
Selected="True">yes</asp:ListItem>                         
<asp:ListItem>No</asp:ListItem>
                       
</asp:DropDownList>

                        <asp:Button
ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

VB的後置程式碼,需修正如下:

view source

print?

01     Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As System.EventArgs)
02         Response.Write("DropDownList1_SelectedIndexChanged
03 ")
04     End Sub
05  
06  
07     Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
08         '=======================
09         Dim my_DDL As New DropDownList
10         my_DDL = GridView1.Rows(GridView1.SelectedIndex).FindControl("DropDownList1")
11         '==== 這兩列程式碼會出錯!==========
12  
13         Response.Write("Button1_Click
14 ")
15  
16         If my_DDL.SelectedIndex >= 0 Then
17             Response.Write("OK~~OK~~
18 ")
19         End If
20     End Sub

您能够發現:上面包车型大巴VB後置程式碼,每后生可畏個事件後面包车型大巴
Handles不見了。

這是為了同盟 HTML設計畫面包车型大巴改动。

使用 C#的意中人會覺得習以為常,但用慣 VB的心上人會不太習慣。

===================================================

最後......執行的硕果還是有誤差,不令人滿意.......

當您按下此外生机勃勃個 Button會出現這樣的錯誤,

簡單的說,
你按下 Button的時候,程式無法判斷您是「按下
GridView的哪一列」??  上面包车型地铁錯誤訊息講得很明白。

      亚洲必赢 75

 該怎麼纠正呢?

笔者們打開**書本「上集」(ASP.NET專題實務卡塔尔国

Ch.
10~Ch.11 都以講解 GridView的進階應用。**

再也複習一下,當使用者按下
「GridView的某一列」時,小编們都以怎麼來判斷的啊?

答案有比超级多.....

[习题]什么触发 GridView 肉体内部的「子控件」的风浪?#2 范例下载
(ASP.NET案例精编/复旦东军事和政治高校学出版社 Ch.10/11两章的补给)

[习题]什么触发
GridView 身体内部的「子控件」的平地风波?#3 改良版

本文由亚洲必赢娱乐游戏发布于亚洲必赢,转载请注明出处:中让使用者自订字体大小,浙大东军事和政院学

TAG标签: 亚洲必赢
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。