[習題]ASP.NET動態加入控制項 -- 動態加入TextBox，每寫完一格會自動跳去(.Focus()方法)下一格

2014-04-16

摘要:[習題]ASP.NET動態加入控制項 -- 動態加入TextBox，每寫完一格會自動跳去(.Focus()方法)下一格

Q : 我動態產生了數個 TextBox在畫面上，

希望每寫完一項（按下Enter鍵），就會自動跳去下一個格（即 .Focus()方法）

例如：寫完TextBox1，按下Enter，就會自動跳去下一個（TextBox2）....以此類推。

A : 要做這件事以前，有不少基本功夫要先打穩馬步

這個範例應該是初學者不宜。

關於「動態」產生ASP.NET控制項，您可以參閱我以前整理的文章

http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/28/page_init_and_page_load_difference.aspx

主要的技巧可以參閱我的書本 -- ASP.NET專題實務（松崗出版）

上集，第三章的 PlaceHolder

下集，動態問卷產生系統

這些文章在我的網站上也能找到。

**************************

*** 入門篇

**************************

如果您連靜態網頁上的、固定的 TextBox都做不到這個功能 --

寫完TextBox1，按下Enter，就會自動跳去下一個（TextBox2）....以此類推。

那也不要指望「動態產生TextBox」....畢竟功力有別。

連基本的都做不到，不要想一步登天（不會走，就想飛？）

HTML畫面上，可以設計五個 TextBox，都設定 AutoPostBack 搭配 TextChanged事件

您當然可以撰寫這種程式啦，我不怪你（畢竟是初學者）

一樣可以正常運作

////************************************************************************

////**** 冗長、重複的程式碼 ****

////************************************************************************

// protected void TextBox1_TextChanged(object sender, EventArgs e)

// {

// TextBox2.Focus();

// }

// protected void TextBox2_TextChanged(object sender, EventArgs e)

// {

// TextBox3.Focus();

// }

// protected void TextBox3_TextChanged(object sender, EventArgs e)

// {

// TextBox4.Focus();

// }

// protected void TextBox4_TextChanged(object sender, EventArgs e)

// {

// TextBox5.Focus();

// }

但你有沒有發現這種寫法，程式碼幾乎一模一樣，不能濃縮一下，好可惜。

我把所有的 Textchanged事件指向同一個，比較簡單

（請看書本上集第三章的介紹，我上課會教。這是重點！）

        1.<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        2.<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        3.<asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        4.<asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
        <br />
        5.<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>（不設定、沒事件）

後置程式碼如下，改成VB語法應該很簡單吧。

protected void TextBox1_TextChanged(object sender, EventArgs e)

{

// 為了避免重複寫多個 TextBox的 TextChanged事件，而內容幾乎一樣，所以改成這樣。

TextBox TB = (TextBox)sender;

if(TB.UniqueID.Length == 8)

{

String ID_no = TB.UniqueID.Substring(7, 1);

// 抓取 TextBox ID最後的流水號，例如 TextBox「1」

TextBox TBnext = (TextBox)Page.Form.FindControl("TextBox" + (Convert.ToInt32(ID_no) + 1).ToString());

//上集第十八章的範例有提到，多重檔案、批次上傳。

TBnext.Focus();

}

這裡也用到我慣用的技巧 -- 字串相連與流水號

請看： FileUpload控制項「批次上傳 / 多檔案同時上傳」的範例--以「流水號」產生「變數名稱」

http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/19/multiple_fileupload_asp_net_20130819.aspx

OK，如果程式會跑了，那我們把範例改呈「動態」產生 TextBox再來試試看

**************************

*** 進階篇

**************************

牢記前輩給我們的指導：

動態加入控制項，可以寫在 Page_Init事件裡面

想拜師學藝的，可以參閱這一班 -- ASP.NET動態套版班 http://www.dotblogs.com.tw/mis2000lab/archive/2013/09/02/116064.aspx

protected override void OnInit(EventArgs e)

{

for (int i = 1; i <= 5; i++ )

{

TextBox TB = new TextBox();

TB.ID = "TextBox" + i;

TB.Text = "動態產生" + i;

TB.AutoPostBack = true;

TB.TextChanged += new System.EventHandler(this.TextBox1_TextChanged);

// HOW TO：在執行階段時動態繫結 ASP.NET Web 網頁中的事件處理常式

// http://msdn.microsoft.com/zh-tw/library/t3d01ft1%28v=VS.100%29.aspx

Page.Form.Controls.Add(TB);

}

base.OnInit(e);

}

至於 TextBox1_TextChanged事件跟上一個範例一樣，COPY過來就能用。在此不贅述。

可能的 Bug與改進方式：

...................................................................................................................................

關於 .Focus()方法，雖然ASP.NET也有提供，但 Server端的語法會導致畫面一直閃爍（PostBack）

改用 JavaScript也可以做到，並解決這個問題

ASP.NET搭配 JavaScript可以參閱這篇文章：http://www.dotblogs.com.tw/hatelove/archive/2009/10/28/11325.aspx

或是

黯然銷魂之網頁繪製圖表 Google Charts with JavaScript....與ASP.NET網頁結合 (ClientScriptManager.RegisterStartupScript 方法)

...................................................................................................................................

這個問題是讀者來信詢問，我臨時寫出的範例

分享一點想法，給大家參考（或許是一個方向）

沒法保證 100% OK，或是您COPY去用一個字都不用改

更沒法保證範例 "絕對" 完美囉

範例下載：

http://www.dotblogs.com.tw/mis0800/archive/2014/03/28/144559.aspx

相關作法與其他範例，請參考 Allen Kuo的教學影片：

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net

(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A

(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b

ASP.NET遠距教學、線上課程（Web Form + MVC）。第一天課程， "完整" 試聽。

......... facebook社團 https://www.facebook.com/mis2000lab ......................

......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................

ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程上線了！MIS2000Lab.主講事先錄好的影片，並非上課側錄！觀看時，有如「一對一」面對面講課。

回首頁

ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學線上教程教學影片