detail/tasks/chitchat functionality working

RPS.Web/Pages/Backlog/Details.cshtml

@@ -35,3 +35,7 @@
 @section styles {
     <link href="~/css/detail.css" rel="stylesheet" />
 }
+
+@section scripts {
+    <partial name="_TasksScripts" />
+}

RPS.Web/Pages/Backlog/Details.cshtml.cs

@@ -79,6 +79,27 @@ namespace RPS.Web.Pages.Backlog
             return RedirectToPage("Details", new { id = DetailsFormVm.Id, Screen });
         }
 
+        public IActionResult OnPostUpdate(int taskId, string title, bool? completed)
+        {
+            PtUpdateTask uTask = new PtUpdateTask
+            {
+                Id = taskId,
+                ItemId = DetailsFormVm.Id,
+                Title = title,
+                Completed = completed.HasValue ? completed.Value : false
+            };
+            rpsTasksRepo.UpdateTask(uTask);
+
+            return RedirectToPage("Details", new { id = DetailsFormVm.Id, Screen });
+        }
+
+        public IActionResult OnPostDelete(int taskId)
+        {
+            var result = rpsTasksRepo.DeleteTask(taskId, DetailsFormVm.Id);
+            return RedirectToPage("Details", new { id = DetailsFormVm.Id, Screen });
+        }
+
+
         private void SaveDetails()
         {
             var updatedItem = rpsItemsRepo.UpdateItem(DetailsFormVm.ToPtUpdateItem());

RPS.Web/Pages/Backlog/_Tasks.cshtml

@@ -1,40 +1,31 @@
 @model RPS.Web.Pages.Backlog.PtItemTasksVm
 
-
-@using (Html.BeginForm())
-{
-    @Html.AntiForgeryToken()
-
-    @Html.HiddenFor(model => model.ItemId)
-
+<form method="post">
+    <input type="hidden" asp-for="@Model.ItemId" />
     <div class="form-row align-items-center">
         <div class="col-sm-6">
-            @Html.EditorFor(model => model.NewTaskTitle, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter new task..." } })
+            <input type="text" asp-for="@Model.NewTaskTitle" class="form-control" placeholder="Enter new task..." />
         </div>
         <button type="submit" class="btn btn-primary">Add</button>
     </div>
 
     <hr />
 
-
-    foreach (var task in Model.Tasks)
+    @foreach (var task in Model.Tasks)
     {
         <div class="input-group mb-3 col-sm-8">
             <div class="input-group-prepend">
                 <div class="input-group-text">
-                    @Html.EditorFor(modelItem => task.Completed, new { htmlAttributes = new { @checked = task.Completed, id = "pt-task-checkbox-" + task.Id } })
+                    <input type="checkbox" asp-for="@task.Completed" id="pt-task-checkbox-@task.Id" />
                 </div>
             </div>
-            @Html.EditorFor(modelItem => task.Title, new { htmlAttributes = new { @class = "form-control", id = "pt-task-input-" + task.Id } })
+
+            <input type="text" asp-for="@task.Title" class="form-control" id="pt-task-input-@task.Id" />
 
             <div class="input-group-append">
-                @{
-                    var done = task.Completed ? "true" : "false";
-                }
-                <button class="btn btn-primary pt-btn-task-update" type="submit" data-task-id="@task.Id">Update</button>
-                <button class="btn btn-danger pt-btn-task-delete" type="submit" formaction="/Backlog/@Model.ItemId/TaskDelete/@task.Id" data-task-id="@task.Id">Delete</button>
+                <button asp-page-handler="Update" asp-route-taskId="@task.Id" data-task-id="@task.Id" class="btn btn-primary pt-btn-task-update" type="submit">Update</button>
+                <button asp-page-handler="Delete" asp-route-taskId="@task.Id" class="btn btn-danger pt-btn-task-delete" type="submit">Delete</button>
             </div>
         </div>
     }
-}
-
+</form>

RPS.Web/Pages/Backlog/_TasksScripts.cshtml

@@ -0,0 +1,16 @@
+<script>
+
+    document.addEventListener('click', function (event) {
+
+        if (!event.target.matches('.pt-btn-task-update')) return;
+
+        let btnObj = $(event.target);
+        let itemId = $('#ItemId').val();
+        let taskId = btnObj.attr('data-task-id');
+        let newTitle = $('#pt-task-input-' + taskId).val();
+        let checked = $('#pt-task-checkbox-' + taskId).prop('checked');
+        //  /7/Tasks?taskId=1&handler=Update
+        btnObj.attr('formaction', `/${itemId}/Tasks?handler=Update&taskId=${taskId}&completed=${checked}&title=${newTitle}`);
+    }, false);
+
+</script>