Generate buttons for dynamically-generated HTML code

Question

I'm working on an ASP.NET WebForms application and I'm dynamically generating the HTML code for this Bootstrap timeline based on the results of a SQL query. I'd like to add delete and modify buttons to each entry, so that the corresponding modals open and the user can change the contents. How can I do that?

I've tried generating a simple HTML button (with the same ID) and running it on the server, but it doesn't work:

<button id="myButton" runat="server" onclick="myButton_Click()">Delete</button>

EDIT: I already have the logic to modify and delete, I just don't know how to do that for the HTML code generated at runtime.

Webforms does not work that way, you cannot add a server click in html. You need dynamic controls for that. See my answer here for an example: stackoverflow.com/a/42567762/5836671 — VDWWD
– VDWWD, Commented Feb 20, 2024 at 16:23

Dekryptid · Accepted Answer · 2024-02-20 16:36:46Z

Couldn't you do something in code-behind like adding the HTML dynamically using string interpolation to pass in the ID of the item:

<button class='btn btn-danger delete-button' data-id='{item.Id}' type='button'>Delete</button>
<button class='btn btn-primary modify-button' data-id='{item.Id}' type='button'>Modify</button>

...and then in JavaScript do:

document.querySelector('#yourTimelineContainer').addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-button')) {
        var id = e.target.getAttribute('data-id');
        __doPostBack('DeleteEntry', id);
    } else if (e.target.classList.contains('modify-button')) {
        var id = e.target.getAttribute('data-id');
        __doPostBack('ModifyEntry', id);
    }
});

Then in your code-behind file again, handle the custom postbacks:

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
{
    base.RaisePostBackEvent(sourceControl, eventArgument);
    if (eventArgument.StartsWith("DeleteEntry"))
    {
        var id = eventArgument.Replace("DeleteEntry", "");
        DeleteEntry(id); // Your method to delete the entry
    }
    else if (eventArgument.StartsWith("ModifyEntry"))
    {
        var id = eventArgument.Replace("ModifyEntry", "");
        // Show modal or redirect to modify page with the id
        ShowModifyModal(id); // Your method to show modify modal
    }
}

Maybe this helps?

Collectives™ on Stack Overflow

Generate buttons for dynamically-generated HTML code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related