动态生成的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/> 然后为每个<tr> 标签添加一个相应的onclick 属性来完成这项任务

这是生成的 html 在开发控制台中的样子

但是，当我尝试单击该行时，我收到以下错误消息

我很难理解我到底做错了什么。我会很感激一些意见，甚至可能是一种替代方法。

Answer 1

您可以使用 jquery 并使用委托模型来处理点击动态元素。例如，如果你有一些像

这样的 html

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

然后使用 jquery代码sn -p

$(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 2

根据我的经验，当您创建动态 HTML 时，我们不能使用 asp 标签。

如果你看到你的开发控制台代码，你可以看到控件没有正确渲染..用 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
    }
}

Answer 3

在发现将 <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>");
                    }

                }

然后我将 membId 保存为 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;
        }

    }

它可能不是最优雅的解决方案，但它为我提供了我需要的东西并且很容易实现。感谢大家的投入！