2011-12-30 57 views
0

我構建了一個在線簡歷應用程序,允許用戶添加由多個文本框和標籤組成的新教育部分。動態重複表單元素

根據用戶是否點擊[添加另一個]按鈕,動態創建表單元素並讀取它們的最佳方式是什麼?

+0

這是MVC還是網頁表單還是矩陣式? – 2011-12-30 01:08:12

+0

對不起,我把錯誤的標籤(winforms被編輯了出來),它是網絡形式 – Burt 2011-12-30 01:17:54

回答

2

1)服務器端:在你的asp.net按鈕點擊事件,動態創建所需的控件(文本框,下拉等..),並將其添加到像面板一樣的conainer。

2)客戶端:使用JavaScript創建元素並追加到現有的容器(div)。在這種方法中,由於您在客戶端執行此操作,因此可以節省服務器往返時間。

這是一個JavaScript示例使用jQuery,它會給你一個想法。

HTML

<div id="divContainer">  
    Education 1 <input id="txt1" type="text" class="txtBox"/> 
</div> 
<input id="btn1" type="button" value="Add Another" /> 

的Javascript

var counter=1; 
$("#btn1").click(function(){ 
    counter++;  
    $("#divContainer").append("<br/> Education "+counter + " <input type='text' id='txt"+counter+"' class='txtBox' />");    
}); 

這裏是工作樣例:http://jsfiddle.net/huYMT/13/

+0

謝謝,這是非常類似於我需要做的。出於好奇,你會如何將jQuery數據傳回服務器? – Burt 2011-12-30 16:42:54

+1

您可以在服務器頁面上執行jquery ajax文章。 – Shyju 2011-12-30 16:43:58

1

我不知道最好的方式,但不幸的是,我可以告訴你什麼當我使用它們時,我使用了網頁表單。

我做了一個PlaceHolder,在那裏我可以轉儲控件的飛行類型的東西。我做了一個用戶控件,可以一次又一次地重複擁有公共屬性。我在PlaceHolder周圍封裝了一個UpdatePanel,並附加了一個與UpdatePanel綁定的單擊事件,以便用戶擁有AJAX體驗。

下面是代碼的快速總結版本。如果你願意,我可以給你全部的來源。讓我知道。

<script runat="server"> 
    void aspx_Init(object sender, EventArgs e) 
    { 
    AddCreditCardReceiptButton.Click += new EventHandler(AddCreditCardReceiptButton_Click); 
    } 
    void AddCreditCardReceipt() 
    { 
    AddCreditCardReceipt(this.ID + "_" + Guid.NewGuid().ToString("N").Substring(0, 5)); 
    } 
    void AddCreditCardReceiptButton_Click(object sender, EventArgs e) 
    { 
    AddCreditCardReceipt(); 
    CreditCardReceipt lastAdded = (CreditCardReceipt)CreditCardReceiptPH.Controls[CreditCardReceiptPH.Controls.Count - 1]; 
    lastAdded.ContainerStyle = "display:none"; 
    ScriptManager.RegisterStartupScript(lastAdded, typeof(CreditCardReceipt), lastAdded.ClientID, 
     "$('#CreditCardReceipt_" + lastAdded.ClientID + "').toggle(500);", true); 
    } 
</script> 
<asp:UpdatePanel runat="server" id="CreditCardReceiptUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true"> 
<ContentTemplate> 
    <asp:PlaceHolder ID="CreditCardReceiptPH" runat="server" /> 
    <asp:Button runat="server" ID="AddCreditCardReceiptButton" CausesValidation="false" Text="(+) Add Credit Card Receipt" /></div> 
</ContentTemplate> 

1

我喜歡創造教育部分的用戶控件。

如果你打的添加按鈕,按鈕的單擊事件可以動態添加新用戶

控制UI。

+0

我在想什麼類似的東西 – Burt 2011-12-30 16:41:18