How to delete selected record from tableview using asp.net mvc

Question

This is the my view code edit button working successfully. i want to delete particular selected record. when your click delete icon model popup will open then it will ask yes or no. if user click yes i need to call action method. how to call that method? when i try to run parameter null its coming to action method.

  <table id="mytable" class="table table-bordred table-striped">
                <thead>
                    <tr>
                        <th>User ID</th>
                        <th>User Name</th>
                        <th>Email</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var gt in Model.UserList)
                    {
                        <tr>
                            <td>@gt.UserId</td>
                            <td>@gt.UserName</td>
                            <td>@gt.Email</td>
                            @using (Ajax.BeginForm("getUserDetailById", new AjaxOptions() { UpdateTargetId = "Edit-User", AllowCache = true, InsertionMode = InsertionMode.ReplaceWith,LoadingElementId="resultLoadingDiv" }))
                            {
                                @Html.Hidden("userId", @gt.UserId)

                                <td><p data-placement="top" data-toggle="tooltip" title="Edit/View"><button class="btn btn-primary btn-xs" data-title="Edit/View" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                            }    
                                <td><button class="btn btn-danger btn-xs delete"  data-userid="@gt.UserId" data-title="Delete"><span class="glyphicon glyphicon-trash"></span></button></td>
                        </tr>
                    }
                </tbody>
            </table>

Script:

        debugger;
    $('#mytable').on('click', '.delete', function () {
    var userId = $(this).data('UserId');
   if (bootbox.confirm('Do you want to delete this item?', function (result) 
    {
    if (result == true) {
        $.ajax({
    type: "POST",
    url: "Admin/deleteUser/" + userId,
    success: function (result) {
      },
     complete: function () {

  },
    error: function (xhr, status, errorThrown) {
  }
  });
  }
  else {
        return;
    }
   }));
  })

My Controller:

 [HttpPost]
    public JsonResult deleteUser(string userId)
    {
        _objuser = new UserService();
        var  status = true;


        var gt = _objuser.deleteUserDetail(userId);


        return new JsonResult { Data = status, JsonRequestBehavior = 
        JsonRequestBehavior.AllowGet };
        }

may be the problem with controller action only.

User3250 · Accepted Answer · 2017-05-15 07:04:16Z

1

It is better to download and use Bootbox for consistent alert boxes in your app and its easy to use too:

bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
    confirm: {
        label: 'Yes',
        className: 'btn-success'
    },
    cancel: {
        label: 'No',
        className: 'btn-danger'
    }
},
callback: function (result) {
 if(result === true){
     //YOUR DELETE ACTION METHOD AJAX CALL HERE
  }
 }
});

Attach delete event like this to your table delete buttons

$('#yourTableId').on('click', '.delete', function () {           
        var userId= $(this).data('userid');
        if (bootbox.confirm('Do you want to delete this item?', function (result) {
            if (result == true) {
                $.ajax({
                    type: "POST",
                    url: "Admin/deleteUser", 
                    data:JSON.stringify({userId:userId})
                    contentType: 'application/json; charset=utf-8',                       
                    success: function (result) {
                    },
                    complete: function () {

                    },
                    error: function (xhr, status, errorThrown) {
                    }
                });
            }
            else {
                return;
            }
        }));

Change Delete button in view as below:

<button class="btn btn-danger btn-xs delete" data-userid="@gt.UserId" data-title="Delete"><span class="glyphicon glyphicon-trash"></span></button>

edited May 15, 2017 at 7:04

answered May 15, 2017 at 1:41

User3250

3,4536 gold badges34 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

User3250 Over a year ago

No prob. Pls mark as answer if it worked for u. Thanks.

SENA Over a year ago

Hi Dude, Model popup coming when i click first row of the table but if i click second thrid its not coming. my table row dynamically it will generate how to get based on ID? can you help me?

SENA Over a year ago

Dude, i have update working code. which is you send that one. modelpopup window is coming action method also called successfully but only problem is user_id its coming null. my user id is string example: sena023.

User3250 Over a year ago

Remove parseInt from delete url in ajax. Updated answer.

SENA Over a year ago

i have added my controller code. everything working fine. when i checked alert(userId) it coming selected row userId. only problem is action method i'm getting null value. once i deleted i have to reload the page and should show the successfully message to the user. i have modified my ajax code like that. $.ajax({ type: "POST", url: '/Admin/deleteUser/', data: JSON.stringify(userId), contentType: 'application/json', success: function (result) {

|

Collectives™ on Stack Overflow

How to delete selected record from tableview using asp.net mvc

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related