動態生成html，的document.getElementById返回null

Question

我在我的代碼中動態生成一個HTML表隱藏文件

protected void PopulateMemberTable() 
    { 
     var guid = ""; 
     string[] selectedColumns = new[] { "MEMBID", "MEMBER_NAME", "BIRTH", "IPA", "HPNAME" }; 
     if (Session["guid"] != null) 
      guid = Session["guid"].ToString(); 
     StringBuilder html = new StringBuilder(); 
     DataTable dt = MemberSearch(guid, membFirst.Text.ToString(), membLast.Text.ToString(), membDob.Text.ToString(), membId.Text.ToString()); 
     if (dt != null) 
     { 
      DataTable new_dt = new DataView(dt).ToTable(false, selectedColumns);   
      html.Append("<table class='table table-hover data-table'>"); 
      html.Append("<thead>"); 
      html.Append("<tr>"); 

      foreach (DataColumn column in new_dt.Columns) 
      { 
       html.Append("<th>"); 
       switch(column.ColumnName.ToString()) 
       { 
        case "MEMBID": 
         html.Append("Member ID"); 
         break; 
        case "MEMBER_NAME": 
         html.Append("Member Name"); 
         break; 
        case "BIRTH": 
         html.Append("DOB"); 
         break; 
        case "IPA": 
         html.Append("IPA"); 
         break; 
        case "HPNAME": 
         html.Append("Health Plan"); 
         break; 
       } 
       html.Append("</th>"); 

      } 
      //btn column (no header) 
      html.Append("<th></th>"); 
      html.Append("</tr>"); 
      html.Append("</thead>"); 
      html.Append("<tbody>"); 
      var counter = 0; 
      foreach (DataRow row in new_dt.Rows) 
      { 
       counter++; 
       string btnId = "\"" + "<%btnMembGrid" + counter.ToString() + ".ClientId%>" + "\""; 
       html.Append("<tr onclick='document.getElementById(" + btnId + ").click()'>"); 
       var btnValue = new StringBuilder();     
       foreach(DataColumn column in new_dt.Columns) 
       {    
        html.Append("<td>"); 
        html.Append(row[column.ColumnName]); 
        btnValue.Append(row[column.ColumnName]); 
        btnValue.Append(";"); 
        html.Append("</td>"); 
       } 
       html.Append("<td><asp:button runat='server' OnClick='selectMember' CssClass='btn btn-default' style='display:none' value = '" 
        + btnValue.ToString() + "' id= 'btnMembGrid" + counter.ToString() + "'/></td>"); 
       html.Append("</tr>"); 
      } 
      html.Append("</tbody>"); 
      html.Append("</table>"); 
     } 
     else 
      html.Append("<div class='alert alert-danger' role='alert'>No Members Found</div>"); 

     membTable.Controls.Add(new Literal { Text = html.ToString() }); 

    } 

表生成就好了，但現在我想調用一些服務器端的代碼時連續點擊

  foreach (DataRow row in new_dt.Rows) 
      { 
       counter++; 
       string btnId = "\"" + "<%btnMembGrid" + counter.ToString() + ".ClientId%>" + "\""; 
       html.Append("<tr onclick='document.getElementById(" + btnId + ").click()'>"); 
       var btnValue = new StringBuilder();     
       foreach(DataColumn column in new_dt.Columns) 
       {    
        html.Append("<td>"); 
        html.Append(row[column.ColumnName]); 
        btnValue.Append(row[column.ColumnName]); 
        btnValue.Append(";"); 
        html.Append("</td>"); 
       } 
       html.Append("<td><asp:button runat='server' OnClick='selectMember' CssClass='btn btn-default' style='display:none' value = '" 
        + btnValue.ToString() + "' id= 'btnMembGrid" + counter.ToString() + "'/></td>"); 
       html.Append("</tr>"); 
      } 

我試圖通過在每一行中放置一個隱藏<asp:Button/>，然後加入相應的onclick屬性，每個<tr>標籤來完成這個任務

這是生成的html看起來像在開發者控制檯

然而，當我試圖單擊行我收到以下錯誤消息

我有很難理解我究竟做錯了什麼。我會很感激的一些輸入，或者甚至可能是一種替代方法。

Answer 1

搞清楚的是傳遞一個<asp:button/>作爲一個字符串沒有去上班後，我採取了另一種方法。

在populateMemberTable()我添加了一個href屬性，在第一列的每一行

   var href = true;    
       foreach(DataColumn column in new_dt.Columns) 
       { 
        html.Append("<td>"); 
        if (href) 
        { 
         href = false; 
         html.Append("<a href='/default.aspx?guid=" + Session["guid"] + "&membid=" + row[column.ColumnName] +"'>"); 
         html.Append(row[column.ColumnName]); 
         html.Append("</a></td>"); 
        }       
        else 
        { 
         html.Append(row[column.ColumnName]); 
         btnValue.Append(row[column.ColumnName]); 
         btnValue.Append(";"); 
         html.Append("</td>"); 
        } 

       } 

中然後我在Page_Load()

protected void Page_Load(object sender, EventArgs e) 
    { 
     //save guid (http://url.com?guid=xxxxxx) as session variable 
     Session["guid"] = Request.QueryString["guid"]; 
     var membId = Request.QueryString["membid"]; 
     if (membId != null) 
     { 
      Session["membid"] = membId; 
     } 

    } 

保存在membId作爲會話變量，它可能不是最優雅的解決方案，但它讓我得到了我需要的東西，並且很容易實現。感謝大家的意見和建議！

Answer 2

您可以使用jquery並使用委託模型來處理點擊動態元素。例如，如果你有一些HTML一樣

<div id="dynamicname'></div> 

然後使用 jQuery代碼片斷

$(document).on('click','#dynamicname',function(){ 
//handle your event here 
}); 

動態HTML應始終由委託模型來處理。您可以使用

var dynamic_name="#"+getYourDynamicRowName;//variable for dynamic id's of dynamic html element 
    $(document).on('click',dynamic_name,function(){ 
    //handle your event here 
    }); 

Answer 3

根據我的經驗，我們不能在創建動態HTML時使用asp標籤。

如果你看到你的開發者控制檯中的代碼，你可以看到控件不呈現properly..rendered與ASP標籤..

爲了達到這個目的，你可以使用JavaScript/jQuery來調用服務器端功能。

<input type="button" ID="btn" runat="server" onclick="fn();" /> 

而在你的javascript：

fn = function(){ 
    __doPostBack("<%=btn.ClientID%>", ""); 
} 

並在代碼： `

protected override void btnEvent(IPostBackEventHandler source, string eventArgument) 
{ 
    //call the button event 
    //base.btnEvent(source, eventArgument); 

    if (source == btn) 
    { 
     //do some logic 
    } 
}