Events-MVC (example with htmx)

Events-MVC/Events.MVC/Views/People/Index.cshtml

@@ -0,0 +1,38 @@
+@model Events.MVC.Models.People.PeoplePageViewModel
+
+@{
+    ViewData[Constants.ViewDataKeys.Title] = "People";
+    ViewData[Constants.ViewDataKeys.HeaderActionLabel] = "New person";
+    ViewData[Constants.ViewDataKeys.HeaderActionTarget] = "#create-person-panel";
+}
+
+<div class="d-flex flex-column gap-4">
+    <section id="create-person-panel" class="collapse">
+        <div class="card border-0 shadow-sm">
+            <div class="card-body">
+                <h2 class="h5 mb-3">Add a new person</h2>
+                <div id="create-person-form">
+                    <partial name="_CreatePersonForm" model='(Events.MVC.Models.People.PersonViewModel)ViewData[Constants.ViewDataKeys.CreatePersonModel]!' />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <partial name="_PeopleList" model="Model" />
+</div>
+
+@section Scripts {
+    <script>
+        document.body.addEventListener(@Html.Raw(System.Text.Json.JsonSerializer.Serialize(Constants.HtmxEvents.PersonCreated)), function () {
+            var form = document.querySelector("#create-person-form form");
+            if (form) {
+                form.reset();
+            }
+
+            var panel = document.getElementById("create-person-panel");
+            if (panel && window.bootstrap) {
+                bootstrap.Collapse.getOrCreateInstance(panel).hide();
+            }
+        });
+    </script>
+}