htmx display

Twinty/Controllers/CommentsController.cs

@@ -0,0 +1,29 @@
+namespace Twinty.Controllers;
+
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+
+public class CreateCommentRequest{
+    public string Name { get; set; }
+    public string Comment { get; set; }
+}
+
+public class CreateCommentResponse{
+    public bool? Succeed { get; set; }
+}
+
+public class CommentsController : Controller{
+
+    [HttpGet]
+    public IActionResult Index(){
+        return View();
+    }
+    
+    [HttpPost]
+    [ActionName("create-comment")]
+    public IActionResult CreateComment([FromBody] CreateCommentRequest req){
+        ViewData["Name"] = req.Name;
+        ViewData["Comment"] = req.Comment;
+        return View("PartialComment");
+    }
+}

Twinty/Views/Comments/Index.cshtml

@@ -0,0 +1,33 @@
+
+<div id="new-comment"></div>
+
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">boris</h5>
+    <p class="card-text">Ceci est la chose la plus plate de tous les temps!</p>
+  </div>
+</div>
+
+
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">didier</h5>
+    <p class="card-text">Ce site est incroyable, svp dites moi s'en plus!</p>
+  </div>
+</div>
+
+
+<form hx-post="/comments/create-comment"
+      hx-ext="json-enc"
+      hx-trigger="submit"
+      hx-target="#new-comment"
+      hx-swap="afterbegin">
+
+    <labe  class="form-label">Nom 
+        <input type=text name="name" class="form-control" placeholder="Bob Le Chef"></label><br>
+    <label  class="form-label">Commentaire 
+        <textarea type=text name="comment"  class="form-control" placeholder="blah blah blah" ></textarea>
+    </label>
+    <br>
+    <input type=submit  class="btn btn-primary">
+</form>

Twinty/Views/Comments/PartialComment.cshtml

@@ -0,0 +1,11 @@
+@{
+    Layout = null;
+}
+
+
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">@ViewData["Name"]</h5>
+    <p class="card-text">@ViewData["Comment"]</p>
+  </div>
+</div>

Twinty/Views/Shared/_Layout.cshtml

@@ -4,6 +4,60 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Twinty</title>
+    <script src="https://unpkg.com/htmx.org@1.9.5"
+        integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" 
+        crossorigin="anonymous"></script>
+
+    <script>
+(function () {
+  function _isNumeric(str) {
+    if (typeof str != "string") {
+      return false
+    }
+    return !isNaN(str) && !isNaN(parseFloat(str));
+  }
+
+  function _cast(str) {
+    return _isNumeric(str) ? parseFloat(str) : str;
+  }
+
+  function _addAssocToDict(obj, key, value) {
+    let splittedKey = Array.isArray(key) ? key : key.split(".");
+    const keyToAdd = splittedKey.shift();
+    const isTerminal = splittedKey.length === 0;
+    if (isTerminal) {
+      obj[keyToAdd] = _cast(value);
+      return obj;
+    }
+    if (!(keyToAdd in obj)) {
+      obj[keyToAdd] = {};
+    }
+    return _addAssocToDict(obj[keyToAdd], splittedKey, value);
+  }
+
+  function _createPayload(params) {
+    let ret = {};
+    for (let key of Object.keys(params)) {
+      _addAssocToDict(ret, key, params[key]);
+    }
+    return ret;
+  }
+
+  htmx.defineExtension('json-enc', {
+    onEvent: function (name, evt) {
+      if (name === "htmx:configRequest") {
+        evt.detail.headers['Content-Type'] = "application/json";
+      }
+    },
+
+    encodeParameters: function (xhr, parameters, elt) {
+      xhr.overrideMimeType('text/json');
+      return (JSON.stringify(_createPayload(parameters)));
+    }
+  });
+})();
+
+    </script>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/Twinty.styles.css" asp-append-version="true" />