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

Question

我尝试了很多东西，但内部 html 就是没有转到 onclick 函数。我使用 mysql 数据库并将内部 html 放入数据读取器中，一切都运行良好。唯一的问题是我无法单击 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 东西（我通常在调试模式下检查它）：

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

Answer 1

您无法在运行时在 ASP.NET WebForms 中创建 "server-side markup"。您应该以编程方式添加控件，而不是设置 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);
}

此外，使用 RegisterStartupScript:

而不是 Response.Write

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" 文件时处理的。因此您不能以编程方式在标记文本中添加服务器端控件。

Answer 2

您可以改用 javascript。例如：

在页面的 "Form" 元素内添加以下隐藏输入字段：

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

Answer 3

只是一点旁注。 post 一个月后，我没有使用 innerhtml 来展示我的产品，而是使用了 asp:datalist。对于购物篮，我使用了 asp:literal，它比 innerhtml 效果更好。这允许我使用 bootstrap 4，我可以将它与 innerhtml 控件一起使用。

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

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

How do I make a button event with innerhtml in ASP.NET

html

asp.net

webforms

innerhtml

为什么你的代码不起作用