Implementing Update and Delete Features for Database Rows in Repeater

I have a repeater set up to extract and display data from a SQL Server database. Each row in the database has corresponding buttons added to it.

Below is the code used to populate the repeater:

 SqlConnection connR;
    string connectionStringR = ConfigurationManager.ConnectionStrings[
        "BallinoraDBConnectionString1"].ConnectionString;
    connR = new SqlConnection(connectionStringR);
    SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM Events", connR);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    Repeater1.DataSource = dt;
    Repeater1.DataBind();

And here is the Repeater code:

 <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <div>
                                <table>
                                    <tr><th><%#Eval("Event_Title")%></th><td><button>Edit</button></td><td><button>Delete</button></td></tr>
                                    <tr><td>Event Group ID</td><td><%#Eval("Event_Group_Id") %></td></tr>
                                    <tr><td>Event Type</td><td><%#Eval("Event_Type")  %></td></tr>
                                    <tr><td>Event ID</td><td><%#Eval("Event_Id")  %></td></tr>
                                    <br />
                                </table>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>

Here is the UI I'm uncertain about where to incorporate the Edit and Delete functionality for each row since the number of events displayed depends on the number of rows in the database.

Answer №1

To enhance your query and follow the suggestions in the comments, consider starting with something like this:

<button onclick="delFunc('bowlingId');">Delete Bowling</button>

This code will display a text on the button and create an onclick event, requiring a script function to be written. This function will use an Id from the query to identify each specific event in the database. Once you have the Id, you can develop code to delete a unique row and trigger the function through a script on the page. The process may vary depending on the backend you are using, but a basic concept is shown below:

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
  function delFunc(id) {
   $.ajax({
     method: "POST",
     url: "deleteEvent.php",
     data: id
   })
   alert('deleted '+ id +'!');
  }
 </script>
</head>

For the $.ajax call to function, consider using jQuery.

Hopefully, this will provide a helpful starting point for you :)

Answer №2

If you want to accomplish this task using a gridview, follow these steps.

Alternatively, if you prefer to use an asp:label, consider using an anchor instead of a button. You can link to the same page with a querystring in the format shown below:

lblGroupOneEvents.Text += "<div> <table> <tr><td>" + reader["Event_Title"] + "</td>" + "</tr><tr><td><a href='samepage.aspx?remove=" + reader["id"] + "'>Remove</a></td></tr></table> </div>";

Handle the delete functionality in the page load event:

if(Request.QueryString["remove"]!=null)
{
   //include your delete logic here
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Oops! Looks like there's a reference error - the function you're trying

Javascript: function insertSmiley(a) { var $img = $(a).children('img'); $("#message").insertAtCursor(($("#message").data("wbb").options.bbmode) ? $("#message").data("wbb").toBB($(a)): $(a).html()); return false; } HTML: <a href= ...

ASP.NET to .MDB Update Query not functioning as expected

Scenario: I am facing an issue with an update query for a Microsoft Access DB that keeps failing. Surprisingly, the query runs smoothly when executed within the database itself but encounters errors when executed from the CodeFile of my .aspx page. To tr ...

I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

I am looking to showcase the image provided below. <img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/> Once the image is clicked, I want it to execute the following code. How can I ensure that ...

Is it possible to employ the columns tag within an HTML email design?

I am attempting to design an HTML newsletter that features three columns. In my initial attempts, I utilized the columns tag: <span style="-webkit-column-count: 3; -moz-column-count:3; column-count:3; -webkit-column-width: 160px; -moz-column-width:160 ...

Gather information from every user and display their user ID in an HTML table, allowing for updates through a button

Can anyone help me create a table like the one shown here: https://i.sstatic.net/Hj4T9.png The table should fetch data from my firebase database. Here is the structure of my requests database: https://i.sstatic.net/0lJGa.png. I've been trying to mo ...

Insert item at the end of the box and move all elements upwards

Hello! I'm experimenting with creating something using javascript's createElement method. My goal is to achieve an effect similar to this image: https://i.stack.imgur.com/itKUK.gif Currently, my code is functional, but the animation goes from to ...

Scaling of SVG elements with a fixed canvas size across different end-user resolutions

I am currently using Power BI and the HTML Content visual to create a .svg image. The canvas default size is 1280x720, which cannot be changed. I designed the .svg in Canva at 1920x1080 resolution to accommodate both 720P and 2K users. To make the .svg dyn ...

Utilizing consistent CSS styles across VueJS components

Currently tackling a VueJS 2 project and facing issues with scoped styling when cleaning up the code. My setup involves 3 components that share similarities, prompting me to utilize mixins for consolidating the code into one file. Each component makes use ...

Tips on centering text within child elements of a flexbox using the align property

.cnt { display: flex; } .one { background: #ff0000; width: 300px; } .two { background: #00ff00; flex: 1; } <div class="cnt"> <div class="one"> Center me </div> <div class="two"> And me </div> </d ...

Automatically insert personalized CSS design markers into Material-UI elements using code

Within my react-redux app, I am utilizing material-ui components. The initial UI prototype was established using adobe-xd, which has the capability to export character styles (design tokens) in a CSS file format: :root { /* Colors: */ --text-color: #F8E29 ...

The functionality of switching between two layouts using a JavaScript button is currently not functioning

My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existi ...

Execute a search using the result of a stored procedure's OUTPUT parameter

I have a script that is designed to execute a dynamically-produced SQL statement. However, when I run the script, it does not return the expected results. Instead, it displays the text of the dynamic SQL string itself. The strange thing is that this string ...

Angular modifies the structure of a JSON string

Currently, I am attempting to display data on my screen utilizing AngularJS, ASP.NET, and JSON.NET. I have noticed that when I make a call to $.getJSON, it returns a standard JSONArray. However, when I assign this data to a variable inside my Angular contr ...

The click event triggered by the onclick clone/function may not always activate the click handler

As a newcomer in the JavaScript domain, I am encountering an issue where the first clone created after clicking 'add more' does not trigger my click me function. However, every subsequent clone works perfectly fine with it. What could be causing ...

Unable to set the value of an HTML date field using Selenium on mobile devices

I am facing a challenge in setting the value of a date field on an HTML page using Selenium. The date field on the page is structured like this: <input aria-invalid="false" id="datepicker-date-input" type="date" min="2 ...

Children within a list are creating spaces between the main unordered list

I am working on a navigation bar with submenus. I would like the submenu ul to be 139px wide (so when hovered over, the dropdown box will expand to 139px). However, setting this width also results in a gap between the parent links. For illustration: In ...

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

Tips for organizing class properties in a separate file or class while maintaining the same object instance

Currently, I am in the process of establishing a Selenium test automation Framework using c# and the Page Object Model. The framework layout involves specflow, with the project structure organized as follows: Feature file Step definition core.cs The co ...