Hi,
I'm new to the forum. I use C# since many years ago, but just now I'm learning web development.
I'm with a Razor Pages application that uses a Sql Server DB via ADO.Net, I managed to write Add and Update actions and that are done in the same Razor Page, and I have another Razor Page that is where the main Person list is shown. After each row of the table with Person information, there is an option for Edit and Delete. The first works alright, and here comes what I'm needing, that when I click the Delete button appears the jQuery UI dialog (that I already have the code) and if I click the Yes button, then executes the Delete method from the .cshtml.cs file to delete the DB table registry. What I don't know is how to call the jQuery UI dialog from the Delete <button> or <a ...> and how to call the Delete() C# method of the .cs page from the jQuery UI dialog.
I attach here both .cshtml and .cshtml.cs affected files
I would appreciate any help very much.
Thank you in advance
Best regards from Buenos Aires
Pablo
I'm new to the forum. I use C# since many years ago, but just now I'm learning web development.
I'm with a Razor Pages application that uses a Sql Server DB via ADO.Net, I managed to write Add and Update actions and that are done in the same Razor Page, and I have another Razor Page that is where the main Person list is shown. After each row of the table with Person information, there is an option for Edit and Delete. The first works alright, and here comes what I'm needing, that when I click the Delete button appears the jQuery UI dialog (that I already have the code) and if I click the Yes button, then executes the Delete method from the .cshtml.cs file to delete the DB table registry. What I don't know is how to call the jQuery UI dialog from the Delete <button> or <a ...> and how to call the Delete() C# method of the .cs page from the jQuery UI dialog.
I attach here both .cshtml and .cshtml.cs affected files
PeopleIndex.cshtml:
@page
@model WebAppPersonas.Pages.PersonasIndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head title="Lista de personas">
<link rel="stylesheet" href="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Confirmation Dialog
$('#confirmDialog').dialog({
autoOpen: false,
width: 500,
height: auto,
modal: true,
resizable: false,
buttons: {
"Yes": function () {
$(".ui-dialog-buttonpane button:contains('Si')").button("disable");
$(".ui-dialog-buttonpane button:contains('No')").button("disable");
document.deleteForm.submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#deleteForm').click(function (e) {
e.preventDefault();
$('#confirmDialog').dialog('open');
});
});
</script>
</head>
<body>
<a asp-page="./InsertUpdate" class="btn btn-primary"> Add person </a>
<h2> People LIst </h2>
<table class="table">
<thead>
<tr>
<th> @Html.DisplayNameFor(Model => Model.people[0].Id) </th>
<th> @Html.DisplayNameFor(Model => Model.people[0].Name) </th>
<th> @Html.DisplayNameFor(Model => Model.people[0].Age) </th>
<th> @Html.DisplayNameFor(Model => Model.people[0].Email) </th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.people)
{
<tr>
<td> @Html.DisplayFor(modelItem => item.Id) </td>
<td> @Html.DisplayFor(modelItem => item.Name) </td>
<td> @Html.DisplayFor(modelItem => item.Age) </td>
<td> @Html.DisplayFor(modelItem => item.Email) </td>
<td> <a asp-page="./InsertUpdate" asp-route-id="@item.Id"> Update </a> | <button type="submit" @click="Eliminar", new object[] { item.Id })> Delete </button> </td>
</tr>
}
</tbody>
</table>
<div id="confirmDialog" title="Confirm delete">
<p> You are about to delete a registry ¿Are you sure?</p>
</div>
</body>
</html>
PeopleIndex.cshtml.cs:
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;
using WebAppPersonas.Models;
namespace WebAppPersonas.Pages
{
public class PersonasIndexModel : PageModel
{
private PeopleDataAccessLayer dataAccess = new PeopleDataAccessLayer();
public List<Person> people;
public void OnGet()
{
people = dataAccess.GetPeople();
}
public ActionResult Delete(int? id)
{
dataAccess.DeletePerson(id.Value);
return Page();
}
}
}I would appreciate any help very much.
Thank you in advance
Best regards from Buenos Aires
Pablo
