CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Stc5097
Stc5097

Reputation: 289

Using AJAX to delete/edit items from a list

I have a list of tickets that are being displayed using a for loop that traverses through my ViewModel. So far I have been using Ajax.BeginForm but I want to change this so I can use JQUERY and AJAX. How do I make it so I can access the correct values from JQUERY. I know it has something to do with the naming schema but can't remember how to do it (havent done it since I took my web development class a while ago). Below is the code for my table/ticket list output. 

@foreach (var ticket in Model.ticket)
        {
                <tr class="viewTickTr">
                    <td class="viewTickTd">
                        <label id="ticketId">@ticket.id</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="dateCreated">@ticket.dateCreated</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="supportStaffId">@ticket.supportStaffID</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="empId">@ticket.empId</label>
                    </td>
                    <td class="viewTickTd"></td>
                    <td class="viewTickTd">
                        <label id="categoryId">@ticket.categoryId</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="severityId">@ticket.severityId</label>
                    </td>
                    <td class="viewTickTd">
                        <label id="statusId">@ticket.statusId</label>
                    </td>
                    <td class="viewTickTd">
                        <input type="button" value="Edit" class="ticketEditButt" />
                    </td>
                    <td class="viewTickTd">
                        <input type="button" value="Delete" class="ticketDeleteButt" id="deleteTickBtn" />
                    </td>
                </tr>
        }

Upvotes: 1

Views: 3227

Answers (3)

x-x
x-x

Reputation: 341

you can bind a function to the html element,and pass the id as parameter.like this

<input type="button" value="Delete" onclick="delItem(id)"/>

on js file,define delItem function:

function delItem(id){
   //use ajax to post
}

Upvotes: 0

Anthony Shaw
Anthony Shaw

Reputation: 8166

I would decorate your buttons with a data-id attribute and populate it with the ticket id, when you click the button grab the id from the attribute and pass it along with your ajax call.

<input type="button" data-id="@ticket.id" value="Delete" class="ticketDeleteButt" />

notice I removed the id="deleteTickBtn", having multiple items with the same id will cause issues in IE. You will want to remove these from all your rows

in jQuery to get the id

$(document).ready(function() {
  $(".ticketDeleteButt").click(function(e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    //make ajax call here
  }
}

you could so something similar for your edit, except redirect the user to the Edit page in your button click

Upvotes: 2

Joanvo
Joanvo

Reputation: 5817

You can store values in another attibute:

<td class="viewTickTd">
    <label id="ticketId" val="@ticket.id">@ticket.id</label>
</td>

And then get it with jquery:

$(".viewTickTd #ticketId").attr("val");

Using this as a guideline, you can get all other attributes, iterate over items to get every id,...

Upvotes: 0

Related Questions