How to pass values on click of Edit/Delete

How to pass values of row on click of Edit/View anchor tag to Modal

@model IEnumerable
"viewport" content="width=device-width" />
"button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Location
class="table" id="tblLocation">
@Html.DisplayNameFor(model => model.Id)
@Html.DisplayNameFor(model => model.Description)
@Html.DisplayNameFor(model => model.IsActive)
@**@
@foreach (var item in Model)
{
@Html.DisplayFor(modelItem => item.Id)
@Html.DisplayFor(modelItem => item.Description)
@Html.DisplayFor(modelItem => item.IsActive)
"#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="View" data-toggle="modal">class="fa fa-eye ">
"#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="Edit" data-toggle="modal">class="fa fa-pencil">
"#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="Delete" data-toggle="modal">class="fa fa-trash">
}
"~/Scripts/Appjs/Location.js">
class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
class="modal-dialog">
class="modal-content">
class="modal-header">
class="modal-title">Add New Location
"button" class="close" data-dismiss="modal" aria-hidden="true">×

class="modal-body">

class="form-horizontal">

class="form-group">

class="control-label col-sm-3" for="Id">Location Id

class="col-sm-2">

"text" class="form-control" id="txtId" placeholder="Id">

You have already done it in your previous question.

my way is to not directly open the model use toggle instead open it using jquery after populating your record. as

Note :- please refer my article on this

https://www.sharpencode.com/HowToTopic/how-to-retrieve-selected-table-row-cell-values-and-display-in-bootstrap-modal-pop

"javascript:void(0)" id="btnEdit"data-id="@item.Id" class="btn btn-primary btn xs" data-title="View">class="fa fa-eye ">

$("#btnEdit").click(function(e){
e.preventDefault();
var item=$(this).closest("tr").find("td");
var cell1 = $(item).eq(0).text(); // eq= cell , text = inner text
var cell2 = $(item).eq(1).text();
var cell3 = $(item).eq(2).text();
$("#txtId").val(cell1);
$("#txtDescription").val(cell2);
$("#txtIsActive").val(cell3);
$("#myModel").modal('show');
});

Hi, you can try the below javascript code and you can check complete source code in the below link.

https://github.com/ArnabMSDN/ASP.NET-Core-Sample

function EditModelPopup(reff) {
var url = $(reff).data('url');
url = url + '/' + id;
$.get(url).done(function (data) {
debugger;
$('#edit-employee').find(".modal-dialog").html(data);
$('#edit-employee > .modal', data).modal("show");
});
}

Hi Sachin

I have opened myModal on click of Edit. How the values will get passed to Modal of that selected row.

I have only 1 view i.e Index which i have shared.

How the record will get updated using Modal

Thanks

Use Url.Action() and you don't need data-id if you are not using ajax but want an anchor tag to send the request.


"@Url.Action("ActionName", "ControllerName", new { Id= item.Id })"
 class="btn btn-primary btn xs" data-title="View" data-toggle="modal">class="fa fa-eye ">

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
You have already done it in your previous question.
my way is to not directly open the model use toggle instead open it using jquery after populating your record. as
Note :- please refer my article on this
https://www.sharpencode.com/HowToTopic/how-to-retrieve-selected-table-row-cell-values-and-display-in-bootstrap-modal-pop
"javascript:void(0)" id="btnEdit"data-id="@item.Id" class="btn btn-primary btn xs" data-title="View">class="fa fa-eye ">
$("#btnEdit").click(function(e){
e.preventDefault();
var item=$(this).closest("tr").find("td");
var cell1 = $(item).eq(0).text(); // eq= cell , text = inner text
            var cell2 = $(item).eq(1).text();
    var cell3 = $(item).eq(2).text();
            $("#txtId").val(cell1);
            $("#txtDescription").val(cell2);
    $("#txtIsActive").val(cell3);
            $("#myModel").modal('show');

});
Arnab Mukherjee5y ago
Hi, you can try the below javascript code and you can check complete source code in the below link.

https://github.com/ArnabMSDN/ASP.NET-Core-Sample
function EditModelPopup(reff) {
                var url = $(reff).data('url');
                url = url + '/' + id;
                $.get(url).done(function (data) {
                    debugger;
                    $('#edit-employee').find(".modal-dialog").html(data);
                    $('#edit-employee > .modal', data).modal("show");
                });
            }
Ramco Ramco5y ago
Hi Sachin

I have opened myModal on click of Edit. How the values will get passed to Modal of that selected row.

I have only 1 view i.e Index which i have shared.

How the record will get updated using Modal

Thanks

Sachin Singh5y ago