How to pass values on click of Edit/Delete

May 30 2021 11:32 AM

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

@model IEnumerable<MyApplication.Models.Location>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Location</button><br /><br />
<table class="table" id="tblLocation">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.IsActive)
</th>
<th></th>
@*<th></th>*@
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsActive)
</td>
<td>
<a href="#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="View" data-toggle="modal"><span class="fa fa-eye "></span></a>
<a href="#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="Edit" data-toggle="modal"><span class="fa fa-pencil"></span></a>
<a href="#myModal" data-id="@item.Id" class="btn btn-primary btn xs" data-title="Delete" data-toggle="modal"><span class="fa fa-trash"></span></a>
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
<script src="~/Scripts/Appjs/Location.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Location</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="Id">Location Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="txtId" placeholder="Id">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="Description">Location Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="txtDescription" placeholder="Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="IsActive">Active</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="txtIsActive" placeholder="Active">
</div>
</div>
</div>
</div>
<div class="modal-footer">
@*<button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();"><span class="glyphicon glyphicon-ok"></span>Save</button>*@
<button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();">Save</button>
<button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

Thanks

Answers (4)

Table not showing as Jquery Datatable

Uncaught TypeError: Cannot read property 'style' of undefined