2013-10-31 105 views
0

我需要做的是由3個部分組成形式在服務器端JavaScript控制過程中動態加入:部分
在這裏,我從鍵盤 輸入一些數字如何通過

  1. 「添加號碼」他們應該有一定的格式並排除重複。格式和重複的驗證是通過jQuery驗證插件完成的。
  2. 「Numbers」部分
    此部分通過js動態填充。如果來自「添加數字」部分的數字有效,並且用戶單擊添加按鈕,我們將一個數字的行添加到表格元素(標籤和「刪除」按鈕)。它具有最大尺寸 - 50號(或行,如it'a <table>
  3. 提交按鈕
    上提出我們做回發 的事情,我不明白 - 如何處理與數字動態添加標籤在服務器端

    這裏是我的形式提出了草案:

    form

她e是ASPX佈局:

<table> 
    <tr> 
     <td> 
      <table id="AddPanel"> 
       <tr> 
        <th>AddNumber</th> 
       </tr> 
       <tr> 
        <td> 
         <asp:TextBox ID="txt1" runat="server" /> 
        </td> 
       </tr>..... .....</table> 
     </td> 
     <td> 
      <asp:LinkButton ID="btnAdd" runat="server" OnClientClick="AddNumber();return false;">Add</asp:LinkButton> 
     </td> 
     <td> 
      <table id="numberList"> 
       <tr> 
        <th>Numbers</th> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
<asp:ImageButton ID="Submit" runat="server" onclick="btnSubmit_Click" /> 

這裏是js代碼:

function AddNumber() { 
    $("#AddPanel input[type=text]") 
     .filter(function() { 
     return this.value.length !== 0; 
    }) 
     .each(function() { 

     // find table and insert row 
     var table = document.getElementById('numberList'); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var lbl = document.createElement("label"); 
     lbl.innerHTML = this.value; 
     cell1.appendChild(lbl); 

     var cell2 = row.insertCell(1); 
     var removeBtn = document.createElement("img"); 
     removeBtn.src = "imgs/Buttons/delete.png"; 
     removeBtn.title = "Remove"; 
     removeBtn.name = "Remove"; 
     removeBtn.onclick = function() { 
      Remove(this); 
      return false; 
     }; 
     cell2.appendChild(removeBtn); 
    }); 
    // clear all inputs 
    $('#AddPanel').find('input:text').val(''); 
} 

function Remove(src) { 
    var oRow = src.parentElement.parentElement; 

    //once the row reference is obtained, delete it passing in its rowIndex 
    document.all("numberList").deleteRow(oRow.rowIndex); 
} 

我知道代碼是醜陋的。您對如何改進它的意見將不勝感激!

回答

0

您無法處理服務器端的標籤。通常在標籤的同一時間添加隱藏的輸入,以便將數據發送到服務器端代碼。

下面是一個示例隱藏輸入你需要創建:

<input type="hidden" name="number-field" value="234" /> 

下面是一個JS小提琴例如http://jsfiddle.net/vmH7P/1/

在服務器端,你不需要唯一命名您的輸入。 ASP.NET將把它變成一個數組。您可以通過以下代碼訪問:

if(this.Request.Form["number-field"] != null) 
{ 
    foreach(var numberString in this.Request.Form["number-field"]) 
    { 
     int numberValue; 
     if(int.TryParse(numberString, out numberValue)) 
     { 
      processNumber(numberValue); 
     } 
    } 
} 
+0

謝謝!正是我期待的! – user1178399

0

您無法獲取標籤內可用的數據。你可以做的是在每一行上添加一個隱藏字段和標籤。這個隱藏的字段也將包含與標籤相同的值。然後在服務器端解析來自隱藏字段的值。

var cell1 = row.insertCell(0); 
var lbl = document.createElement("label"); 
var hf = document.createElement('input'); 
hf.setAttribute('type','hidden'); 
hf.setAttribute('name', 'hf'+rowCount);//this will create unique name for each hiddenfield 
hf.setAttribute('value',this.value); 
lbl .innerHTML = this.value; 
cell1.appendChild(lbl); 
cell1.appendChild(hf); 

現在在服務器端,您將處理來自隱藏字段的值。像這樣的東西

for(int i=0;;i++)//considering your first row starts from 0 
{ 
    if(Request["hf"+i] == null) break; 
    string value = Request["hf"+i].ToString(); //process the value 
}