Tengo el siguiente JavaScript que muestra una marca de verificación si data == true o una X si data == false:
{ data: "HasPayment", render: function (data, type, row) { var paymentSet = '@Url.Action("Set", "Payment")?applicationId=' + row.Id + '&year=' + row.Year + '&month=' + row.Month + '&hasPayment=' + data; if (data) { return '<a href=\"' + paymentSet + '\" <span class="fas fa-solid fa-check" style="color: green"></span>'; } return '<a href=\"' + paymentSet + '\" <span class="fas fa-solid fa-times" style="color: red"></span>'; } }Cuando se hace clic en la marca de verificación o X Url.Action, llama al siguiente método:
public void Set(Guid applicationId, int year, int month, bool hasPayment) { using (var db = new DbContext()) { var paymentMoYear = year * 100 + month; var payment = db.Payments.Where(p => p.ApplicationId == applicationId && p.PaymentMoYear == paymentMoYear).FirstOrDefault(); if (hasPayment) { db.Payments.Remove(payment); } else { if (payment == null) { payment = new Payment { ApplicationId = applicationId, PaymentMoYear = paymentMoYear, }; db.Payments.Add(payment); } else { payment.IsDeleted = false; } } db.SaveChanges(); } }¿Puedo volver a dibujar mi tabla de datos después de hacer clic en la marca de verificación Url.Action/X? El resultado deseado es que un usuario haga clic en Url.Action y la marca de verificación se cambie a una X o la X se cambie a una marca de verificación. Luego, la tabla de datos se vuelve a dibujar para mostrar el cambio.
Sé que puedo volver a dibujar mi tabla de datos cuando se hace clic en un botón:
Botón de entrada HTML:
<td> <input type="button" value="Search" id="btnPaymentSearch" /> </td>Función de clic del botón de JavaScript:
$("#btnPaymentSearch").click(function () { paymentDataTable.columns(2).search($("#numHR_pAppNumber").val().trim()); paymentDataTable.columns(4).search($("#txtHR_pClient").val().trim()); --more code-- paymentDataTable.draw(); });Sin embargo, estoy usando un enlace Url.Action en este ejemplo.
Lo que puede hacer aquí es agregar una clase a la etiqueta de anclaje y luego registrar el evento de clic para ella:
if (data) { return '<a class="payment" href=\"' + paymentSet + '\" <span class="fas fa-solid fa-check" style="color: green"></span>'; } return '<a class="payment" href=\"' + paymentSet + '\" <span class="fas fa-solid fa-times" style="color: red"></span>';y luego escriba el evento para este elemento en el que podemos enviar una llamada ajax a la url especificada en el href y en el evento de éxito podemos dibujar la tabla de datos nuevamente como:
$(document).on("a.payment","click",function(){ $.ajax({ url: $(this).attr("href")', contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { paymentDataTable.draw(); }, error: function() { // handle error } }); });