最近在做一個產品添加的功能，需求有點奇葩，所以在添加的時候免不了要用到動態生成控件，然后我就使用了JS去動態生成一些 checkbox類型的input標簽，在以前用asp.net在后台生成的input標簽都可以用request["name屬性"]這樣的方式在后台 獲取，但是在獲取JS生成的標簽時，就會發生有時候可以獲取到，有時候又獲取不到，到現在才發現，原來是我的JS寫法有問題，所以才導致這樣的問題。之前 這樣的問題也遇到過好幾次，苦於沒找到解決方法，之前都是換別的方法去完成的，如今再次遇到，倒也覺得還是想辦法解決的好，下面貼出代碼
前台代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <script type="text/javascript"> function InsertProduct() { for (var i = 0; i < 5; i++) { var tb = document.getElementById("productTable"); var refRow = tb.rows.length - 1; var newRefRow = tb.insertRow(refRow); var checkboxid = document.createElement("input"); checkboxid.setAttribute("type", "checkbox"); checkboxid.setAttribute("id", "checkboxid"); checkboxid.setAttribute("name", "chkallID"); checkboxid.setAttribute("value", i.toString() + "InsertProduct"); newRefRow.insertCell(0).appendChild(checkboxid); newRefRow.insertCell(1).innerHTML = "<span class=\"color4\">" + document.getElementById("t_name").value + "</span>"; newRefRow.insertCell(2).innerHTML = document.getElementById("t_gkj").value; newRefRow.insertCell(3).innerHTML = document.getElementById("t_sl").value; newRefRow.insertCell(4).innerHTML = document.getElementById("t_zk").value; newRefRow.insertCell(5).innerHTML = document.getElementById("t_zhj").value; newRefRow.insertCell(6).innerHTML = document.getElementById("t_xj").value; } } function Addrows() { for (var i = 0; i < 5; i++) { var tb = document.getElementById("tableadd"); var refRow = tb.rows.length - 1; var newRefRow = tb.insertRow(refRow); newRefRow.insertCell(0).innerHTML = "<input type=\"checkbox\" id=\"chkold\" name=\"chkold \" value=\"" + i + "addrows\" />"; newRefRow.insertCell(1).innerHTML = "<span class=\"color4\">" + document.getElementById("t_name1").value + "</span>"; newRefRow.insertCell(2).innerHTML = document.getElementById("t_gkj1").value; newRefRow.insertCell(3).innerHTML = document.getElementById("t_sl1").value; newRefRow.insertCell(4).innerHTML = document.getElementById("t_zk1").value; newRefRow.insertCell(5).innerHTML = document.getElementById("t_zhj1").value; newRefRow.insertCell(6).innerHTML = document.getElementById("t_xj1").value; } } </script> <h1>方案一</h1> <table width="100%" id="productTable"> <tr> <td class="title-bg"> 選擇 </td> <td class="title-bg"> 產品名稱 </td> <td class="title-bg"> 公開價 </td> <td class="title-bg"> 數量 </td> <td class="title-bg"> 折扣（X/10） </td> <td class="title-bg"> 折后價 </td> <td class="title-bg"> 小計 </td> </tr> <tr> <td> <a class="clickcss" onclick="InsertProduct()">添加</a> </td> <td> <input type="text" id="t_name" name="" /> </td> <td> <input type="text" id="t_gkj" name="" value="0" /> </td> <td> <input type="text" id="t_sl" name="" value="0" /> </td> <td> <input type="text" id="t_zk" name="" value="10" /> </td> <td> <input type="text" id="t_zhj" name="" value="0" /> </td> <td> <input type="text" id="t_xj" name="" value="0" /> </td> </tr> </table> <asp:Button ID="Button1" runat="server" Text="接收方案一參數" onclick="Button1_Click" /> <br /> <h1>方案二</h1> <table width="100%" id="tableadd"> <tr> <td class="title-bg"> 選擇 </td> <td class="title-bg"> 產品名稱 </td> <td class="title-bg"> 公開價 </td> <td class="title-bg"> 數量 </td> <td class="title-bg"> 折扣（X/10） </td> <td class="title-bg"> 折后價 </td> <td class="title-bg"> 小計 </td> </tr> <tr> <td> <a class="clickcss" onclick="Addrows()">添加</a> </td> <td> <input type="text" id="t_name1" name="" /> </td> <td> <input type="text" id="t_gkj1" name="" value="0" /> </td> <td> <input type="text" id="t_sl1" name="" value="0" /> </td> <td> <input type="text" id="t_zk1" name="" value="10" /> </td> <td> <input type="text" id="t_zhj1" name="" value="0" /> </td> <td> <input type="text" id="t_xj1" name="" value="0" /> </td> </tr> </table> </div> <asp:Button ID="Button2" runat="server" Text="接收方案二參數" onclick="Button2_Click" /> </form> </body> </html>
后台代碼
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// 接收方案一參數 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button1_Click(object sender, EventArgs e) { if (string.IsNullOrEmpty(Request["chkallID"]) == false) { Response.Write(Request["chkallID"].ToString()); Response.End(); } } /// <summary> /// 接收方案二參數 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Button2_Click(object sender, EventArgs e) { if (string.IsNullOrEmpty(Request["chkold"]) == false) { Response.Write(Request["chkold"].ToString()); Response.End(); } } }
方案一的寫法，生成checkbox類型的input后，在后台可以接收到選中的checkbox的value，接收的時候會自動的在每個checkbox的value后面加上,逗號隔開，
方案二的寫法，在后台是無法獲取到動態生成的checkbox類型的input，並且，如果直接獲取，還會發生異常。