Change Checkbox id in Repeater

Question

i have repeater to retrieve image from data base and i need check box for any image to select and delete from database , how can i get the check box id to tell my button event to delete image from database ?

i need check box id to tell my query delete which image .

my repeater :

<asp:Repeater ID="RepeaterPersonnel" runat="server">
    <ItemTemplate>
       <td>  <img src="../Handler/GalleryPhoto.ashx?id=<%# DataBinder.Eval(Container, "DataItem.PhotoId")%>&size=178" alt="" class="img-border" /> 
        <input type="checkbox" id= '<%# DataBinder.Eval(Container, "DataItem.PhotoId") %>'/>
      </td>
    </ItemTemplate>
</asp:Repeater>

Or is there any way to delete my image with java script ?

Answer 1

<table>
<tr><th>Id</th><th>Image</th><th>Delete?</th></tr> 
<asp:Repeater ID="RepeaterPersonnel" runat="server">
    <ItemTemplate>
       <tr class="PersonnelRow" data-photoid='<%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>'>
           <td>
               <%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>
           </td>
           <td>
               <img src="../Handler/GalleryPhoto.ashx?id=<%# DataBinder.Eval(Container, "DataItem.PhotoId")%>&size=178" alt="" class="img-border" />
           </td>
           <td> 
               <input type="checkbox" data-photoid='<%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>' class="DeletionCheckbox" />
           </td>
       </tr>
    </ItemTemplate>
</asp:Repeater>
</table>
<button type="button" onclick="ApplyChanges()">Apply Changes</button>

Notice I made a few changes. I moved all of your elements into separate td's, and each repeated item now gets its own tr. I also added a td for showing the photo ID, and sprinkled in the strongly typed photo id using data- attributes. Since it's now strongly typed and not relying on DataBinder.Eval(), if you change any of the property names they'll automatically be updated. Less chance of something breaking at runtime. So far, this should all be fairly straight forward. I've also added a button that will call this ApplyChanges() Javascript. Let's look at that...

<script type="text/javascript">
    function ApplyChanges() {
        $(".DeletionCheckbox:Checked").each(function (index, element) {
            $.ajax({
                url: "api/Photos/Delete?photoid=" + $(element).data("photoid"),
                type: "DELETE"
            })
            .done(function () {
                $(".PersonnelRow[data-photoid='" + $(element).data("photoid") + "']").remove();
            })
            .fail(function () {
                alert("Failure deleting photo: " + $(element).data("photoid"));
            });
        });
    }
</script>

So first the script gets all the elements with a class of DeletionCheckbox (but only if they're checked). It iterates through those elements using the jQuery .each() function. We then use jQuery AJAX to call out to a Web API (which I'll get to in a moment), and we pass the photoid via query string. When the AJAX call is successful, we then get the element with the class of PersonnelRow where the data-photoid matches the photoid of the deleted element, and we remove that row (and all it's sub elements) from the DOM so it will no longer display. I did it by calling remove, but a snazzy way to do it would be to fade it out, then remove it. And if the AJAX call fails, we display an alert message.

Side note, I'm using the jQuery library in my JavaScript. If you're not familiar with it, it makes JavaScript a lot simpler. We can do what I've done with "plain" JavaScript, but we'd need a lot more code and it'd be harder to read. There are other frameworks out there that would also make them easy, but jQuery is one of the most popular. It's also "blessed" by Microsoft and included in all their default templates. If you've never used it before, you can add it to your site by placing this script tag before the JavaScript that needs it. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now the only remaining puzzle piece is how do we process that AJAX request on the server? You'll need to add the Web API library to your application. Then you'll need to configure the routing (I won't go into detail here, but that's covered on Microsoft's site.) Then you'd create a new Web API controller class in your application, using the following code:

[RoutePrefix("api/Photos")]
public class PhotosController : ApiController
    {
    [Route("Delete")]
    public void Delete(string photoid)
        {
        //code to delete photo from database
        }
    }

I assume you know how to perform an SQL delete command to drop the photo from your database, so I leave that implementation detail to you. Notice that I used attribute routing so that we can easily know the URL we should specify in our JavaScript AJAX call.

So this seems like a lot (but really, it's fairly easy concepts), but it has a number of advantages over the other solutions here. Most of the other answers (except Lajos') require a postback to the server. That will post your entire form to the server, run through the page lifecycle, and then require that the server send the entire contents for the page back to the client. That's a lot of stuff just to delete a photo or two. That is very slow for the client, since it requires a lot of data to be sent and received from the server. It's also bad for the server, because it has to do a lot of extra processing to handle building up the page. The user will also see the page refresh, which can be disorienting.

My method (and Lajos') makes a very small HTTP delete request to the server, and basically the only thing it's passing in are the the HTTP headers (which contain the photoid in the URL). That's going to be very small, just a few kilobytes. The server doesn't have to do the page life cycle. It simply handles the delete command, and replies with a very small HTTP response that has a status code of 200 OK. Very little bandwidth used, very little server processing time/memory consumed. And the user won't have the page refresh, they'll just see the checked rows disappear (jQuery has a fadeOut() method if you want to make it look even nicer).

Answer 2

You can add a data-id attribute to your checkbox containing the actual id of the photo:

<input type="checkbox" data-id= '<%# DataBinder.Eval(Container, "DataItem.PhotoId") %>'/>

and in your javascript:

function collectPhotos(context) {
    var photos = [];
    context.each(function() {
        photos[photos.length] = $(this).data("id");
    });
    return photos;
}

where context is a selector for your checkboxes and at the end you will get an array containing the IDs.

You post this array to the server and you should call a method, which should execute a delete which has a filter like

where id in (<your comma separated list>)

Naturally, beware sql injections.

EDIT: As for Mason's suggestion, I add some additional information which might help:

1. How to remove an item from the DOM:

   $(yourSelector).remove();

2. Display a message:

   alert("Checkboxes were removed");

3. Post the array to the server using AJAX:

   $.ajax({
       type: "POST",
       url: yourPage,
       data: {photoIDs: collectPhotos($("#" + parentID + " checkbox"))},
       success: function(response) {
           $(yourSelector).remove();
           alert("Checkboxes were removed");
       }
   });
   

Answer 3

because you want the solution in javascript

add any class for e.g. chkbox in your checkbox element and then on your save button's click

find the checked boxes using following javascript

document.querySelectorAll('.chkbox:checked')

you can then iterate through checkboxes , get and set values in hiddenfields somewhere and then can get on server side