Hello guys, I hope you're all doing fine. I'm having an issue right now and I don't know the best approach to fix it. Adding some context into my question, here's an image of the currew View display

​

In short, I want to send a POST request to edit the specified object with the new value AFTER my JS function has been applied (and changed the content of the table cell.

​

​

Here's part of my view code:

​

 @foreach (var item in Model.Entrepots) { <tr> <td col_name="label"> @Html.DisplayFor(modelItem => item.Label) </td> <td col_name="action"> <div align="center"> <a class="Edit" href="javascript:;">Edit</a> @using (Html.BeginForm("Edit", "Miscellaneous", null, FormMethod.Post, new { id = "EditForm" })) { @Html.Hidden("id", item.EntrepotID) @Html.Hidden("category", "Entrepot") <input type="submit" value="Update" class="Update unstyled-button" style="display:none" /> } <a class="Cancel" href="javascript:;" style="display:none">Cancel</a> @using (Html.BeginForm("Delete", "Miscellaneous", null, FormMethod.Post)) { @Html.Hidden("id", item.EntrepotID) @Html.Hidden("category", "Entrepot") <input type="submit" value="Delete" class="unstyled-button" onclick="return confirm('Are you sure you want to delete this item?');" /> } </div> </td> </tr> } </tbody> 

​

And here's my JS Script to change the table content:

​

$(document).on("click", ".editable-table .Edit", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).attr("col_name") == "label") { var txt = $(this).text().trim(); $(this).html("").append("<input type='text' value=\"" + txt + "\">"); $(this).append("<span style='display: none'>" + txt + "</span>") } }); row.find(".Update").show(); row.find(".Cancel").show(); row.find(".Delete").hide(); $(this).hide(); }); //Update event handler. $(document).on("click", ".editable-table .Update", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).attr("col_name") == "label") { if ($(this).find("input").length > 0) { var txt = $(this).find("input").val(); var span = $(this).find("span"); span.val(txt); $(this).html(txt);; //----AFTER THIS, SEND A POST REQUEST WITH ID OF OBJECT AND NEW ROW VALUES!--- } } }); row.find(".Edit").show(); row.find(".Delete").show(); row.find(".Cancel").hide(); $(this).hide(); }); //Cancel event handler $(document).on("click", ".editable-table .Cancel", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).attr("col_name") == "label") { if ($(this).find("input").length > 0) { var span = $(this).find("span"); var input = $(this).find("input"); input.val(span.html()); span.show(); input.hide(); } } }); row.find(".Edit").show(); row.find(".Delete").show(); row.find(".Update").hide(); $(this).hide(); var form = $(document).getElementById("EditForm") form.submit(); }); 

​

once I click on Update, I'm able to get the old value of the row elements, but not the new ones. I presume that this is doable with AJAX but I couldn't really figure out how it would work.

​

If AJAX is indeed the best way to do it, could you please provide me with a short example given a simple model like:

​

public class Item{ //not the real model

public int id;

public string new_value;

}

​

and the url: http://localhost:50056/Miscellaneous/Index

​

​

​

I got the back-end POST part ready, I just need to find a way to receive the new value. Thank you so much for helping me and sorry if the post content is not very... "user-friendly". Cheers!