Как сделать событие кнопки с внутренним html в ASP.NET

Question

Я много чего перепробовал, но внутренний html просто не go для функции onclick. Я использую базу данных mysql и помещаю внутреннюю html в устройство чтения данных, которое все прекрасно работает. Единственная проблема заключается в том, что я не могу нажимать на кнопки html и кнопки asp: не отображаются (также пробовал кнопки ссылок, onserverclick et c). Мне нужна функция 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

Вместо этого вы можете использовать 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;\">";
}

Answer 2

Нельзя создать «разметку на стороне сервера» во время выполнения в 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 file, ASP. NET создает соответствующий объект для тега при первой загрузке страницы . runat="server" не обрабатывается при отображении страницы. Он обрабатывается при разборе файла «aspx» или «ascx». Поэтому вы не можете программно добавлять серверные элементы управления в текст разметки.