Simple JSON request to Update Database row from Razor Page and return success/failure

Question

I've tried every example I could find but they are all too complex for my simple need. I haven't needed json until now, so I am kinda cross eyed.

I have the need for a button that calls a Razor Page code behind using JSON and updates a field in a database with today's date. Essentially, the user wants to print a "Final Approval Letter" (this works) but also push a button (for now) that updates the course's field "FinalApprovalDate" to Today().

I can do the database update and determine success/failure in a normal Razor Page code behind. But a JSON call with no page reload seems a lot more elegant. It is the JSON that has me stumped. Hopefully my suffering will help someone else in the future. No lists are needed, no classes, just a request and response with most of the action being the database update. (which I have left out for the purpose of focusing on my JSON stupidity).

---

In Startup.cs right before services.AddMVC()

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSession();
services.AddMemoryCache();

---

At top of FinalApprovalLetter.cshtml

<script type="text/javascript">
    $(function updateRow () {
        $.get('/FinalApprovalLetter/').done(function () {

                $('#success').append([message returned from JsonResult OnGet]);
            });
        });
    });
</script>

---

In body of FinalApprovalLetter.cshtml: Button to update database/row

    <input type="button" class="d-print-none" value="Set Final Date For Course (today)" onclick="updateRow" />
   <br />
    <label id="success" />

---

In code behind FinalApprovalLetter.chstml.cs

public JsonResult OnGet()
{
  //DO database row update, insert today's date in FinalApprovalDate field
  //DETERMINE AND RETURN SUCCESS/FAILURE (records affected)
  //I HAVE CODE TO DO THIS AND IT WILL WORK 

    return new JsonResult("[success/failure message");
}

Answer 1

Today it's recommended to use the native JSON.Parse method to parse the JSON.

So you could do this in OnGet(), adding whatever other fields to the return object:

public JsonResult OnGet()
{
  //DO database row update, insert today's date in FinalApprovalDate field
  //DETERMINE AND RETURN SUCCESS/FAILURE (records affected)
  //I HAVE CODE TO DO THIS AND IT WILL WORK 

    return JsonResult(new { success = "message text" });
}

Then parse the JSON returned and use the value. Make sure that the JQuery library is included whether through a common page or through this page, or this code will error out about JQuery not being included.

The section that defines updateRow needs to have executed before the onclick handler is invoked or there will be an error.

<script type="text/javascript">
    function updateRow () {
        $.get('/FinalApprovalLetter/').done(function (data) {
            var obj = JSON.parse(data);
            $('#success').append(obj.success);
        });
    }
</script>