动态生成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 
    } 
}