繁体   English   中英

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

[英]Dynamically generated html, document.getElementByID returns null

我正在文件后面的代码中动态生成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在开发控制台中的样子

在此处输入图片说明

但是,当我尝试单击该行时,出现以下错误信息

在此处输入图片说明

我很难理解我到底在做什么错。 我将不胜感激,甚至可能会选择其他方法。

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

根据我的经验,当您创建动态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
    }
}

在弄清楚了将<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;
        }

    }

它可能不是最优雅的解决方案,但它满足了我的需求,并且易于实现。 感谢大家的意见和建议!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM