ASP.NET Core Razor Page with JavaScript - Updates of Rows of a table using fetch API

Project

• Open the Visual Studio. 
• Create web project using ASP.NET Core Empty template.
• Project name: EditRecordRP
• Solution name: EditRecordRP
• .NET Core version: 5.0
• Add the AddRazorPages() into the IServiceCollection in Startup class.
• Use MapRazorPages() as terminal middleware in Startup class.

Look at the below updated code in Startup class.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace EditRecordRP
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }
    }
}

• Add a New Folder and rename it Pages.
• Add a Razor Page in Pages folder and name it Index. Two files are generated which are Index.cshtml and Index.cshtml.cs

Index.cshtml

@page
@model EditRecordRP.Pages.IndexModel
@{
}
<style>
    tr th {
        background-color: brown;
        color: white;
    }

    tr td {
        text-align: center;
        padding: 5px;
    }
</style>

<h2 style="text-align:center;color:darkblue">Edit Record using JavaScript</h2>
<form id="form1" method="post">
    <table border="1" style="width:50%; margin:auto;">
        <tr>
            <th width="30%">Action</th>
            <th>Data</th>
        </tr>
        <tr>
            <td>
                <a class="edit" href="javascript:">Edit</a>
            </td>
            <td>
                Ajeet
            </td>
        </tr>
        <tr>
            <td>
                <a class="edit" href="javascript:">Edit</a>
            </td>
            <td>
                Amrita
            </td>
        </tr>
        <tr id="hiddenTr" hidden>
            <td>
                <a id="update" href="javascript:">Update</a>|
                <a id="cancel" href="javascript:">Cancel</a>
            </td>
            <td>
                <input id="txtnew" name="txtnew" type="text" />
            </td>
        </tr>
    </table>
</form>


<script type="text/javascript">

    (function () {
        var anchrs = document.querySelectorAll('.edit');
        let oldValue;
        anchrs.forEach(x => {
            x.addEventListener('click', function (event) {
                const cur_tr = x.closest('tr');
                cur_tr.insertAdjacentHTML("beforebegin", hiddenTr.innerHTML);
                oldValue = cur_tr.cells[1].innerText.trim();
                cur_tr.hidden = true;
                const inputbox = document.getElementById('txtnew');
                inputbox.setAttribute('value', oldValue)

            })
        })
    })();

</script>

On clicking Edit link, we get links for Update and cancel. And the input box appears in the side cell to update the old value. We have to write the code for Update and Cancel. Update will be based on JavaScript fetch API. Update will post the form on the server using post method.

Index.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EditRecordRP.Pages
{
    public class IndexModel : PageModel
    {
        public JsonResult OnPost(string txtnew)
        {
        }
    }
}