I am looking to trigger a Bootstrap Pop-Up Model using a JS function, passing values from the function. When the user clicks on update, I want to return to the JS function and update the values; if they press cancel, nothing should happen.
@using (Html.BeginForm("BulkUpdate", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="container col-md-12">
<table id="myTable" class="cell-border compact hover">
<thead>
<tr>
<th>@Html.DisplayNameFor(m => m.First().Id)</th>
<th>@Html.DisplayNameFor(m => m.First().TagName)</th>
<th>@Html.DisplayNameFor(m => m.First().TagCategory)</th>
<th>@Html.DisplayNameFor(m => m.First().TagValue)</th>
<th> Action</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
@Html.DisplayFor(m => Model[i].Id)
@Html.HiddenFor(m => Model[i].Id)
</td>
<td>
@Html.DisplayFor(m => Model[i].TagName)
</td>
<td>
@Html.DisplayFor(m => Model[i].TagCategory)
</td>
<td>
@Html.EditorFor(m => Model[i].TagValue, new { htmlAttributes = new { @id = "TagVaule_" + Model[i].Id, @class = "form-control" } })
</td>
<td>
<button type="button" class="btn btn-secondary" onclick="UpdateRow(@Model[i].Id)">Update</button>
</td>
</tr>
}
</tbody>
</table>
<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<label id="tagValueLabel"></label>
<button onclick="Cancel()">cancel</button>
<button onclick="Confirm()">confirm</button>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Bulk Update" class="btn btn-secondary" />
</div>
</div>
</div>
}
@section Scripts{
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
<script>
debugger;
var tagvalue = '';
var id = '';
function UpdateRow(id)
{
this.id = id;
tagvalue = $("#TagVaule_" + id).val();
DisplayModal(tagvalue);
}
function DisplayModal(value)
{
$("#tagValueLabel").text(value);
$("#myModal").modal('show');
}
function Cancel()
{
$("#myModal").modal('hide');
}
function Confirm()
{
$.ajax({
type: "POST",
url: '@Url.Action("Update","Home")',
data: {
id: id,
value: tagvalue
},
});
$("#myModal").modal('hide');
}
</script>
}
Currently relying on the built-in confirm function, but now aiming to implement a Bootstrap model that displays the tag value and its corresponding old value in a pop-up model. Upon user click on update, the submission should commence. Thanks for your assistance!