動的に生成されたHTMLは、のdocument.getElementByIdはヌル

Question

私はテーブルがうまく生成されたファイル

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() }); 

    } 

の後ろに私のコードで動的にHTMLテーブルを生成していますが、今、私は時に一部のサーバー側のコードを呼び出すようにしようとしています戻ります行は、私は、各列に隠し<asp:Button/>を配置し、各<tr>タグ

に対応 onclick属性を追加することによって、このタスクを達成しようと

  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は、DEVコンソールで

どのように見えるかである私は、行をクリックしようとしたときしかし、私は次のエラーメッセージ

を取得し、私は持っています正確に私が間違っていることを理解するのは苦労します。私は、いくつかの入力、またはおそらく代替のアプローチに感謝します。

Answer 1

、私は別のアプローチを取った。populateMemberTable()で

私は、各行の最初の列

   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>"); 
        } 

       } 

にhref属性を追加しました。そして、私はそれが一番ではないかもしれません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タグを使用することはできません。あなたは、サーバー側の関数を呼び出すためにはJavaScript/jQueryのを使用することができ、それを達成するために

あなたはDEVコンソールのあなたのコードが表示された場合は、コントロールがASPタグとproperly..renderedレンダリングされないことがわかります。..

。

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

そして、あなたのJavaScriptで：

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

そして、あなたのコード内で：文字列として<asp:button/>を渡すと、仕事に行くされていないことを考え出す後 `

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

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