如何在 ASP.NET 中使用 innerhtml 制作按钮事件

Posted 2023-05-07

【中文标题】如何在 ASP.NET 中使用 innerhtml 制作按钮事件

【英文标题】：How do I make a button event with innerhtml in ASP.NET

【发布时间】：2020-07-23 17:41:18

【问题描述】：

我尝试了很多东西，但 innerhtml 只是没有转到 onclick 功能。我使用 mysql 数据库并将 innerhtml 放在一个数据阅读器中，这一切都很好。唯一的问题是我无法单击 html 按钮并且 asp:buttons 没有出现（也尝试过 linkbuttons、onserverclick 等）。我需要 onclick 函数而不是 javascript，因为 sql 在 javascript 中不起作用。谁能帮我？

我尝试这样使用它：

while(dr.read())

    ...
    WinkelmandBody.InnerHtml += "<td style='float:right'><button runat='server' onserverclick='btnTrash_Click'><i class='fa fa-trash'></i></button></td>";

并尝试过：

    WinkelmandBody.InnerHtml += "<td style='float:right'><asp:LinkButton style='height:50px;width:50px' id='btnTrash' onClick='btnTrash_Click'><i class='fas fa-trash'></i></asp:LinkButton></td>";

onclick thingy（我通常在调试模式下检查）：

protected void btnTrash_Click(object sender, EventArgs e)
        
            Response.Write("<script>alert('test')</script>");
        

html:

    <tbody>
                            <div id="WinkelmandBody" runat="server">
                            </div>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>Sub-Totaal</td>
                                <td class="text-right" runat="server" id="SubTotaal"></td>                      
</tr>   
    </tbody>

这些都起作用了，只是按钮不起作用：

WinkelmandBody.InnerHtml += "<tr>";
                    WinkelmandBody.InnerHtml += $"<td><img src='imgs/dr[2]' style='height: 50px; width: 50px; '/> </td>";
                    WinkelmandBody.InnerHtml += $"<td>dr[1]</td>";
                    WinkelmandBody.InnerHtml += $"<td>stock</td>";
                    WinkelmandBody.InnerHtml += $"<td style='text-align:center; border:none'><input style='text-align:center' type='text' value='dr[0]' /></td>";
                    WinkelmandBody.InnerHtml += $"<td style='text-align:right'> Convert.ToInt32(dr[3]) * (Convert.ToInt32(dr[0])) €</td>";

【问题讨论】：

如何在网页中呈现（html标签）？你能用 html 检查器向我们展示吗？ 'btnTrash_Click' 功能在哪里？

我编辑了代码。

【参考方案1】：

您不能在运行时在 ASP.NET WebForms 中创建“服务器端标记”。您应该以编程方式添加控件，而不是设置 InnerHtml 或发出标记脚本：

aspx 文件：

<form id="form1" runat="server">
    <div id="WinkelmandBody" runat="server">
    </div>
</form>

cs 文件：

private void SomeMethod()

    var table = new Table();
    var headerRow = new TableHeaderRow();
    table.Rows.Add(headerRow);
    // other code for header row ...

    var row = new TableRow();
    table.Rows.Add(row);
    var cell = new TableCell();
    row.Cells.Add(cell);
    cell.Style["float"] = "right";
    Button btnTrash = new Button();
    btnTrash.Text = "Trash";
    btnTrash.Click += BtnTrash_Click;

    WinkelmandBody.Controls.Add(table);

另外，不要使用Response.Write，而是使用RegisterStartupScript：

private void BtnTrash_Click(object sender, EventArgs e)

    var script = "alert('test');";
    ClientScript.RegisterStartupScript(this.GetType(), "alert", script, true);

为什么您的代码不起作用

当您将runat="server" 添加到 aspx 文件中的标记时，ASP.NET 会为该标记创建一个相应的对象，在第一次加载页面时。 runat="server" 在呈现页面时不会被处理。它在解析“aspx”或“ascx”文件时进行处理。因此，您不能以编程方式在标记文本中添加服务器端控件。

【讨论】：

我觉得奇怪的是，除了按钮之外，我的所有其他 innerhtml 都能正常工作。桌子没有问题。

@MelihÖzcan 它们之所以有效，是因为它们只是 HTML 标记，而不是带有 runat="server" 和 Click 事件处理程序的 ASP.NET 标记！。

我知道您的表格工作正常，但是如果表格只是以 HTML 呈现并且您的代码中没有 C# 对象，则无法向表格添加控件。

【参考方案2】：

您可以改用 javascript。例如：

在“表单”元素内的页面中添加以下隐藏输入字段：

<input type="hidden" name="action" id="action" />
<input type="hidden" name="itemid" id="itemid" />

在页面头部添加如下脚本：

<script type="text/javascript">
    function doPostBack(action, itemid) 
        document.getElementById('action').value = action;
        document.getElementById('itemid').value = itemid;
        document.forms[0].submit();
    
</script>

在这里，继续您的代码：

WinkelmandBody.InnerHtml += "<td style='float:right'><a href='# onclick=\"doPostBack('remove','1'); return false;\"><i class='fa fa-trash'></i></a></td>";

在页面加载事件中，捕获动作值：

protected void Page_Load(object sender, EventArgs e)

    if (IsPostBack)
    
        string action = Request.Form["action"] + "";
        string itemid = Request.Form["itemid"] + "";

        if (action == "remove")
        
            // Do something
        
    

在上述代码中，这部分是硬编码的。这是因为我在展示这个想法。

<a href='#' onclick=\"doPostBack('remove','1'); return false;\">

你当然可以根据自己的情况动态改变，例如：

while(dr.read())

    WinkelmandBody.InnerHtml += "<a href='#' onclick=\"doPostBack('remove',";
    WinkelmandBody.InnerHtml += dr[0] + "";
    WinkelmandBody.InnerHtml += "); return false;\">";

【讨论】：

我对值进行了硬编码，这是因为我正在展示这个想法，这就是示例。这并不意味着您不能对其进行非硬编码，对吧？你可以动态编码吗？并在您的编码中动态更改值。

我添加了一些如何“不硬编码”的示例。

你能看看我的新帖子吗？我明白你在做什么，但这不是我需要的。我只是不擅长解释

@MelihÖzcan 这意味着，在条件 A 中，该行有 1 个按钮，在条件 B 中，该行有 2 个按钮。对吗？

【参考方案3】：

只是一点旁注。在这篇文章发布一个月后，我没有使用 innerhtml 来展示我的产品，但我使用了 asp:datalist。对于购物篮，我使用了 asp:literal，它比 innerhtml 效果更好。这让我可以使用可以与 innerhtml 控件一起使用的 bootstrap 4。

如果您还有其他问题，请随时提问。