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

您可以使用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 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;
        }

    }

它可能不是最优雅的解决方案，但它让我得到了我所需要的并且直接实现。感谢大家的投入！

动态生成的html，document.getElementByID返回null

3 个答案: