How to get correct <button> id's on postbacks?

Question

I'm generating some dynamic html based on database content, and inserting it as a LiteralControl in one of my webforms pages. it all looks fine, and works, with the exception of a couple of buttons that I add per row of relevant data. I generate the ID's of the buttons to be unique, as can be seen below. So, for Item 1, Subitem 2... I will have editbtn12 and trashbtn12. If I click the EDIT button, the PageLoad postback code does: string ctrlName = Page.Request.Params.Get("__EVENTTARGET"); and I see "editbtn12" in ctrlName. BUT, clicking the TRASH button on the same row, I get the SAME result: "editbtn12". This same behavior occurs for every row; e.g. clicking Trash14, postback sees Edit14, etc. What could possibly be causing this? I'm stumped! TIA for any ideas!

<button id = "editbtn12" type = "submit" 
runat = "server" onclick = "__doPostBack('editbtn12','Edit 1 2')"
title = "Edit" style = "border:none; height:30px;width:30px; margin-left:initial;
margin-top:initial; padding:initial" >
img src = "Images/TinyEditBtn.png"  />
</button >               
<button id = "trashbtn12" type = "submit"
runat = "server" onclick = "__doPostBack('trashbtn12','Trash 1 2')"
title = "Trash" style = "border:none; height:30px;width:30px; margin-left:initial;
margin-top:initial; padding:initial" >
<img src = "Images/TinyTrashBtn.png" />
</button >

Answer 1

A few things:

First of all, __DoPostBack() is NOT always by default available on a web page!!!

There are a number of way to "force" or in fact "hope" that the __doPostBack function is added to the page. So, adding certain controls (like some of the repeater controls - grid view etc.) will cause this to occur.

but, by default, no, the js function __DoPostBack() is not avaible.

Past in your code, run and hit f12 for the browser debug tools. In less then 30 seconds, you would see/find/know that __DoPostBack function error of "not found" would have occured.

BUT DO KEEP in mind, it not available by default.

Simple way is to ensure you drop in a script manager.

So now, this markup:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<button id="editbtn12" type="button"
    runat="server" 
    onclick="__doPostBack('editbtn12','Edit 1 2')"
    title="Edit" 
    style="border: none; height: 30px; width: 30px; margin-left: initial; margin-top: initial; padding: initial"
                
        >
</button>
<br />

<button id="trashbtn12" type="button"
    runat="server" 
    onclick="__doPostBack('trashbtn12','Trash 1 2')"
    title="Trash" style="border: none; height: 30px; width: 30px; margin-left: initial; margin-top: initial; padding: initial"
    >
       
</button>

Also, you find in most cases, you have to turn off the validation for the page.

So, in the top page directive, you need say this:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" 
    Inherits="TestWeb.WebForm4"     
    EnableEventValidation="false"
    %>

(add the Enable EventValidation=false). above was from a vb page, but it really don't matter.

But, here is the REAL issue?

How and what does the code look like that injects those buttons?

In 99 out of a 100 cases, some type of listview, or repeater can (and should be used).

That way, you can just drop in the buttons, let asp.net do the magic of repeating the buttons and data for you, and you can use + have regular plain jane server side click events for this purpose. d

In other words, avoid the "hack" type of approach you are using.

However, the above will work.

Also, of course remove the "garbage" you have in your 2nd button:

This:

onclick = "`enter code here`__doPostBack('trashbtn12','Trash 1 2')"

of course has to be this:

onclick = "__doPostBack('trashbtn12','Trash 1 2')"

So, you have a LOT of stray garbage here.

Unless you can make a FANTASTIC case as to why you attempting to inject and add these buttons by code?

Then use a repeater, or repeating type of control for this purpose, you be glad you did.