{"id":70837,"date":"2024-07-26T04:53:16","date_gmt":"2024-07-26T01:23:16","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/"},"modified":"2024-07-26T04:53:16","modified_gmt":"2024-07-26T01:23:16","slug":"getting-started-with-htmx-a-beginners-guide-559p","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/","title":{"rendered":"\u0634\u0631\u0648\u0639 \u0628\u0627 HTMX: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc\u0627\u0646"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            HTMX \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc AJAX \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc HTML \u0628\u0647 HTML \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631 \u062f\u0648 \u0627\u06cc\u062f\u0647 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a:<\/p>\n<p>\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u0627\u0633\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n<p> hx-get=&#8221;\/data&#8221; hx-trigger=&#8221;click&#8221; hx-swap=&#8221;outerHTML&#8221;&gt;<br \/>\n    Get<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647:<\/p>\n<p>\u0627\u0645\u0627 \u0686\u0631\u0627 \u0628\u0627\u06cc\u062f HTMX \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0627\u0645\u0631\u0648\u0632\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f\u061f  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f:<\/p>\n<p>\u0633\u0627\u062f\u06af\u06cc: HTMX \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0627\u062f\u0647 HTML \u0628\u0647 \u062c\u0627\u06cc \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0633\u0627\u0632\u0646\u062f.<br \/>\n\u06a9\u0627\u0631\u0627\u06cc\u06cc: \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 HTMX \u0639\u0645\u062f\u062a\u0627\u064b \u0628\u0647 HTML (\u0648 \u062d\u062f\u0627\u0642\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a) \u0645\u062a\u06a9\u06cc \u0627\u0633\u062a\u060c \u0635\u0641\u062d\u0627\u062a \u0627\u063a\u0644\u0628 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0627\u0632 \u062d\u0627\u0641\u0638\u0647 \u06a9\u0645\u062a\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<br \/>\n\u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc: \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 HTMX \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 HTML \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u06a9\u0645\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646\u06cc \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 HTML\/CSS \u0631\u0627\u062d\u062a \u062a\u0631 \u0647\u0633\u062a\u0646\u062f.<br \/>\n\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631: HTMX \u0628\u0627 \u0647\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u0628\u0627\u0637\u0646 \u0645\u0631\u0628\u0648\u0637\u0647 \u062e\u0648\u062f \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f.<\/p>\n<p>  \u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627<\/p>\n<p>\u0647\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627 \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9 &#8220;\u0633\u0644\u0627\u0645 \u062c\u0647\u0627\u0646&#8221; \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0631\u0627\u0647 \u062d\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>dotnet new web -o TodoApi<br \/>\ndotnet new sln -n Htmx<br \/>\ndotnet sln add &#8211;in-root TodoApi<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 TodoApi \u067e\u0631\u0648\u0698\u0647\u060c \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f HtmlResult.cs \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631:<\/p>\n<p>using System.Net.Mime;<br \/>\nusing System.Text;<\/p>\n<p>namespace TodoApi;<\/p>\n<p>public class HtmlResult : IResult<br \/>\n{<br \/>\n    private readonly string _html;<\/p>\n<p>    public HtmlResult(string html)<br \/>\n    {<br \/>\n        _html = html;<br \/>\n    }<\/p>\n<p>    public Task ExecuteAsync(HttpContext httpContext)<br \/>\n    {<br \/>\n        httpContext.Response.ContentType = MediaTypeNames.Text.Html;<br \/>\n        httpContext.Response.ContentLength = Encoding.UTF8.GetByteCount(_html);<br \/>\n        return httpContext.Response.WriteAsync(_html);<br \/>\n    }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 HTML \u0627\u0632 \u0646\u0642\u0627\u0637 \u0627\u0646\u062a\u0647\u0627\u06cc\u06cc API \u062d\u062f\u0627\u0642\u0644 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.  \u0628\u0631\u0648 \u0628\u0647 Program.cs \u0641\u0627\u06cc\u0644 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<p>using Microsoft.AspNetCore.Html;<br \/>\nusing TodoApi;<\/p>\n<p>var builder = WebApplication.CreateBuilder(args);<br \/>\nvar app = builder.Build();<\/p>\n<p>app.MapGet(&#8220;\/hello-world&#8221;, () =&gt; new HtmlResult(@&#8221;<\/p>\n<p>        Get time<\/p>\n<p>&#8220;));<br \/>\napp.MapPost(&#8220;\/hello-world&#8221;, () =&gt; new HtmlResult($@&#8221;Hello World {DateTimeOffset.UtcNow}&#8221;));<br \/>\napp.Run();<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0648 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u062f\u0631 API \u0645\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.  \u0627\u0648\u0644\u06cc \u0633\u0646\u062f HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 HTMX \u0627\u0632 \u0637\u0631\u06cc\u0642 CDN \u0627\u0633\u062a.  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0628\u062f\u0646\u0647\u060c \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc HTMX \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f (\u06a9\u0647 \u0628\u0639\u062f\u0627 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f) \u06a9\u0647 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0633\u062a\u0648\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP POST \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. \/hello-world \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0633\u067e\u0633 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.  \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u062f\u0648\u0645 \u0641\u0642\u0637 \u06cc\u06a9 \u062a\u06af div \u062d\u0627\u0648\u06cc \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u06cc\u0646 \u062f\u0631 \u0639\u0645\u0644\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 http:\/\/localhost:5179\/hello-world \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 HTMX \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc AJAX \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f:<\/p>\n<p>hx-get: \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nhx-post: \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nhx-put: \u062f\u0631\u062e\u0648\u0627\u0633\u062a PUT \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nhx-patch: \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a PATCH \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nhx-delete: \u062f\u0631\u062e\u0648\u0627\u0633\u062a DELETE \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u060c \u0644\u0637\u0641\u0627 \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>  hx-trigger<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc hx-trigger \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c \u0648\u0642\u062a\u06cc \u0627\u0632 \u0645\u062d\u0631\u06a9\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0633\u062a:<\/p>\n<p>input\u060c textarea &#038; select \u0628\u0631 \u0631\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u0646\u062f change \u0631\u0648\u06cc\u062f\u0627\u062f.<br \/>\nform  \u0628\u0631 \u0631\u0648\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f submit \u0631\u0648\u06cc\u062f\u0627\u062f.<br \/>\n\u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631 \u062a\u0648\u0633\u0637 click \u0631\u0648\u06cc\u062f\u0627\u062f.<\/p>\n<p>\u0645\u0642\u062f\u0627\u0631 \u0645\u0627\u0634\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<p>  hx-target<\/p>\n<p>\u0631\u0627 hx-target \u0648\u06cc\u0698\u06af\u06cc \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0628\u0647 \u062c\u0627\u06cc \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0639\u0646\u0635\u0631 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0648\u06cc\u0636 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.  \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627\u0634\u062f:<\/p>\n<p>\u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 CSS \u0627\u0632 \u0639\u0646\u0635\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631.<br \/>\nthis  \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0628\u0627 hx-target \u0648\u06cc\u0698\u06af\u06cc \u062e\u0648\u062f \u0647\u062f\u0641 \u0627\u0633\u062a.<br \/>\nclosest   \u0646\u0632\u062f\u06cc\u06a9\u062a\u0631\u06cc\u0646 \u0639\u0646\u0635\u0631 \u062c\u062f \u06cc\u0627 \u062e\u0648\u062f\u0634 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<br \/>\nfind   \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u0627\u0648\u0644 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<br \/>\nnext   DOM \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nprevious   DOM \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f \u0628\u0647 \u0639\u0642\u0628 \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  hx-swap<\/p>\n<p>\u0631\u0627 hx-swap \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0646\u062d\u0648\u0647 \u062a\u0639\u0648\u06cc\u0636 \u067e\u0627\u0633\u062e \u0646\u0633\u0628\u062a \u0628\u0647 \u0647\u062f\u0641 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.  \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u0645\u06a9\u0646 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/p>\n<p>innerHTML: \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u06af\u0632\u06cc\u0646\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636<br \/>\nouterHTML: \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<br \/>\nbeforebegin: \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0647\u062f\u0641 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<br \/>\nafterbegin: \u067e\u0627\u0633\u062e \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0632\u0646\u062f \u0627\u0648\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<br \/>\nbeforeend: \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0631\u0632\u0646\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<br \/>\nafterend: \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0647\u062f\u0641 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<br \/>\ndelete: \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0628\u062f\u0648\u0646 \u062a\u0648\u062c\u0647 \u0628\u0647 \u067e\u0627\u0633\u062e \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\nnone: \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u067e\u0627\u0633\u062e \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  \u0647\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0647\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a HTML \u062f\u0631 \u062f\u0627\u062a \u0646\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 HtmlContentBuilder \u06a9\u0644\u0627\u0633 \u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0633\u0627\u062f\u0647.  \u0627\u06cc\u0646 \u0686\u0646\u062f\u06cc\u0646 \u0645\u0632\u06cc\u062a \u062f\u0627\u0631\u062f:<\/p>\n<p>\u0642\u0627\u0628\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0633\u0627\u0632\u06cc: \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 HtmlContentBuilder \u0627\u0632 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0647\u0627\u06cc \u0645\u062a\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u062a\u062f\u0647\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 HTML \u0628\u0633\u0627\u0632\u06cc\u062f.<br \/>\n\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc: HtmlContentBuilder HTML \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0647\u0631 \u0631\u0634\u062a\u0647 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0646\u0634\u062f\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<br \/>\n\u062a\u0631\u06a9\u06cc\u0628 \u067e\u0630\u06cc\u0631: \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0686\u0646\u062f\u062a\u0627\u06cc\u06cc \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 HtmlContentBuilder \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a HTML \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631.<br \/>\n\u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631: \u0628\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u0634\u062f\u0646 HTML\u060c \u0646\u06af\u0647\u062f\u0627\u0631\u06cc HTML \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0634\u0648\u0627\u0631 \u0634\u0648\u062f. HtmlContentBuilder \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f\u060c HTML \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 IResult \u0627\u062c\u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 IHtmlContent \u0631\u0627\u0628\u0637:<\/p>\n<p>using Microsoft.AspNetCore.Html;<br \/>\nusing System.Net.Mime;<br \/>\nusing System.Text.Encodings.Web;<br \/>\nusing System.Text;<br \/>\nnamespace TodoApi;<br \/>\npublic class HtmlContentResult : IResult<br \/>\n{<br \/>\n    private readonly IHtmlContent _htmlContent;<\/p>\n<p>    public HtmlContentResult(IHtmlContent htmlContent)<br \/>\n    {<br \/>\n        _htmlContent = htmlContent;<br \/>\n    }<\/p>\n<p>    public Task ExecuteAsync(HttpContext httpContext)<br \/>\n    {<br \/>\n        httpContext.Response.ContentType = MediaTypeNames.Text.Html;<br \/>\n        using (var writer = new StringWriter())<br \/>\n        {<br \/>\n            _htmlContent.WriteTo(writer, HtmlEncoder.Default);<br \/>\n            var html = writer.ToString();<br \/>\n            httpContext.Response.ContentLength = Encoding.UTF8.GetByteCount(html);<br \/>\n            return httpContext.Response.WriteAsync(html);<br \/>\n        }<br \/>\n    }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 TodoItem.cs \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u062f\u0644 \u0645\u0627:<\/p>\n<p>namespace TodoApi;<br \/>\npublic class TodoItem<br \/>\n{<br \/>\n    public Guid Id { get; set; }<br \/>\n    public bool IsCompleted { get; set; }<br \/>\n    public string? Name { get; set; }<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Components.cs \u06a9\u0644\u0627\u0633\u06cc \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0633\u0627\u0632\u0647\u0627\u06cc HTML \u0645\u0627 \u0628\u0627\u0634\u062f:<\/p>\n<p>using Microsoft.AspNetCore.Html;<br \/>\nnamespace TodoApi;<br \/>\npublic static class Components<br \/>\n{<br \/>\n    public static IHtmlContent Document(IHtmlContentContainer children)<br \/>\n    {<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(children);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<\/p>\n<p>    public static IHtmlContent TodoList(IEnumerableTodoItem&gt; todoItems)<br \/>\n    {<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        foreach (var todoItem in todoItems)<br \/>\n        {<br \/>\n            builder.AppendHtml(TodoItem(todoItem));<br \/>\n        }<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<\/p>\n<p>    public static IHtmlContent TodoItem(TodoItem todoItem)<br \/>\n    {<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendFormat(&#8220;{0}&#8221;, todoItem.Name);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 Program.cs \u0641\u0627\u06cc\u0644 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>var db = new ListTodoItem&gt;()<br \/>\n{<br \/>\n    new TodoItem() { Id = Guid.NewGuid(), Name = &#8220;abc&#8221;, IsCompleted = true },<br \/>\n    new TodoItem() { Id = Guid.NewGuid(), Name = &#8220;123&#8221;, IsCompleted = false },<br \/>\n};<\/p>\n<p>app.MapGet(&#8220;https:\/\/dev.to\/&#8221;, () =&gt;<br \/>\n{<br \/>\n    var builder = new HtmlContentBuilder();<br \/>\n    builder.AppendHtml(&#8220;&#8221;);<br \/>\n    builder.AppendHtml(&#8220;&#8221;);<br \/>\n    return new HtmlContentResult(Components.Document(builder));<br \/>\n});<\/p>\n<p>app.MapGet(&#8220;\/todos&#8221;, () =&gt; new HtmlContentResult(Components.TodoList(db)));<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0627\u0648\u0644 \u0633\u0646\u062f HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0648\u0645\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u0686\u0633\u0628 \u0628\u062f\u0646 (hx-trigger=&#8221;load&#8221;\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc \u06a9\u0646\u062f (hx-get=&#8221;\/todos&#8221;) \u0648 \u067e\u0627\u0633\u062e \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 (hx-swap=&#8221;innerHTML&#8221;).  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0648 \u062d\u0630\u0641 \u0645\u0648\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f TodoItem \u062c\u0632\u0621 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<p>    public static IHtmlContent TodoItem(TodoItem todoItem)<br \/>\n    {<br \/>\n        var isCompleted = string.Empty;<br \/>\n        if (todoItem.IsCompleted)<br \/>\n        {<br \/>\n            isCompleted = &#8220;checked&#8221;;<br \/>\n        }<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f (hx-post=&#8221;\/todos\/{todoItem.Id}\/toggle&#8221;) \u0648 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0639\u0646\u0635\u0631 (hx-target=&#8221;closest div&#8221;) \u0628\u0627 \u067e\u0627\u0633\u062e (hx-swap=&#8221;outerHTML&#8221;) \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0644\u06cc\u0633\u062a.  \u062f\u0631 \u0647\u0645\u0627\u0646 \u062e\u0637\u060c \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u06cc\u06a9 \u0639\u0645\u0644 \u0645\u0634\u0627\u0628\u0647 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u0627\u0633\u062e \u062e\u0627\u0644\u06cc \u0627\u0633\u062a\u060c \u0645\u0648\u0631\u062f \u0627\u0632 \u0644\u06cc\u0633\u062a \u062d\u0630\u0641 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 Program.cs \u0641\u0627\u06cc\u0644\u060c \u0627\u06cc\u0646 \u062f\u0648 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>app.MapPost(&#8220;\/todos\/{id}\/toggle&#8221;, (string id) =&gt;<br \/>\n{<br \/>\n    var todo = db.First(t =&gt; t.Id.ToString() == id);<br \/>\n    todo.IsCompleted = !todo.IsCompleted;<br \/>\n    return new HtmlContentResult(Components.TodoItem(todo));<br \/>\n});<\/p>\n<p>app.MapDelete(&#8220;\/todos\/{id}&#8221;, (string id) =&gt;<br \/>\n{<br \/>\n    var todo = db.First(t =&gt; t.Id.ToString() == id);<br \/>\n    db.Remove(todo);<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0628\u0647 \u0644\u06cc\u0633\u062a \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u062d\u0631\u06a9\u062a \u0628\u0647 TodoItem.cs \u0641\u0627\u06cc\u0644 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>record AddTodoItem(string? Name);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0628\u0639\u062f\u060c \u062f\u0631 Program.cs \u0641\u0627\u06cc\u0644\u060c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>app.MapPost(&#8220;\/todos&#8221;, (AddTodoItem command) =&gt;<br \/>\n{<br \/>\n    var todo = new TodoItem {Id = Guid.NewGuid(),Name = command.Name, IsCompleted = false };<br \/>\n    db.Add(todo);<br \/>\n    return new HtmlContentResult(Components.TodoItem(todo));<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 Components.cs \u0641\u0627\u06cc\u0644 \u0648 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f Document \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 json-enc \u067e\u0633\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u0628\u0647 \u062c\u0627\u06cc \u0641\u0631\u0645\u062a URL:<\/p>\n<p>    public static IHtmlContent Document(IHtmlContentContainer children)<br \/>\n    {<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        builder.AppendHtml(children);<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0647\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f TodoForm \u062c\u0632\u0621:<\/p>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0631\u0633\u0627\u0644\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a (hx-post=&#8221;\/todos&#8221;) \u0628\u0627 \u0641\u0631\u0645\u062a JSON (hx-ext=&#8221;json-enc&#8221;) \u0648 \u067e\u0627\u0633\u062e \u0631\u0627 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0645 (hx-swap=&#8221;beforebegin&#8221;).  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f TodoList \u062c\u0632\u0621 \u0634\u0627\u0645\u0644 TodoForm \u062c\u0632\u0621:<\/p>\n<p>    public static IHtmlContent TodoList(IEnumerableTodoItem&gt; todoItems)<br \/>\n    {<br \/>\n        var builder = new HtmlContentBuilder();<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        foreach (var todoItem in todoItems)<br \/>\n        {<br \/>\n            builder.AppendHtml(TodoItem(todoItem));<br \/>\n        }<br \/>\n        builder.AppendHtml(TodoForm());<br \/>\n        builder.AppendHtml(&#8220;&#8221;);<br \/>\n        return builder;<br \/>\n    }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0646\u062a\u06cc\u062c\u0647\u060c HTMX \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0633\u0628\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc HTML \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc AJAX\u060c HTMX \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0622\u0633\u0627\u0646\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.  \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc \u067e\u0627\u06cc\u0647 \u0645\u062d\u06a9\u0645\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 HTMX \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 Todo App \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.  \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.  \u0628\u0627 \u062a\u0634\u06a9\u0631\u060c \u0648 \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9.<\/p>\n<div data-article-id=\"1936478\" id=\"article-body\">\n<p>HTMX \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc AJAX \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc HTML \u0628\u0647 HTML \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631 \u062f\u0648 \u0627\u06cc\u062f\u0647 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a:<\/p>\n<p>\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u0627\u0633\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight xml\"><code><span class=\"nt\"><button> <span class=\"na\">hx-get=<\/span><span class=\"s\">\"\/data\"<\/span> <span class=\"na\">hx-trigger=<\/span><span class=\"s\">\"click\"<\/span> <span class=\"na\">hx-swap=<\/span><span class=\"s\">\"outerHTML\"<\/span><span class=\"nt\">&gt;<\/span>\n    Get\n<span class=\"nt\"\/><\/button><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647:<\/p>\n<p>\u0627\u0645\u0627 \u0686\u0631\u0627 \u0628\u0627\u06cc\u062f HTMX \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0627\u0645\u0631\u0648\u0632\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f\u061f  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u06a9\u0644\u06cc\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0645\u0648\u0631\u062f \u062a\u0648\u062c\u0647 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0633\u0627\u062f\u06af\u06cc<\/strong>: HTMX \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0627\u062f\u0647 HTML \u0628\u0647 \u062c\u0627\u06cc \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0633\u0627\u0632\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0627\u0631\u0627\u06cc\u06cc<\/strong>: \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 HTMX \u0639\u0645\u062f\u062a\u0627\u064b \u0628\u0647 HTML (\u0648 \u062d\u062f\u0627\u0642\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a) \u0645\u062a\u06a9\u06cc \u0627\u0633\u062a\u060c \u0635\u0641\u062d\u0627\u062a \u0627\u063a\u0644\u0628 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0627\u0632 \u062d\u0627\u0641\u0638\u0647 \u06a9\u0645\u062a\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/strong>: \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 HTMX \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 HTML \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u06a9\u0645\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646\u06cc \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627 HTML\/CSS \u0631\u0627\u062d\u062a \u062a\u0631 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/strong>: HTMX \u0628\u0627 \u0647\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u0628\u0627\u0637\u0646 \u0645\u0631\u0628\u0648\u0637\u0647 \u062e\u0648\u062f \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#%D8%B3%D9%84%D8%A7%D9%85_%D8%AF%D9%86%DB%8C%D8%A7\" >\u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#hx-trigger\" >hx-trigger<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#hx-target\" >hx-target<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#hx-swap\" >hx-swap<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/getting-started-with-htmx-a-beginners-guide-559p\/#%D9%87%D9%85%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0647\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D9%84%D8%A7%D9%85_%D8%AF%D9%86%DB%8C%D8%A7\"><\/span>\n<p>  \u0633\u0644\u0627\u0645 \u062f\u0646\u06cc\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627 \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9 &#8220;\u0633\u0644\u0627\u0645 \u062c\u0647\u0627\u0646&#8221; \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0631\u0627\u0647 \u062d\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight powershell\"><code><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">new<\/span><span class=\"w\"> <\/span><span class=\"nx\">web<\/span><span class=\"w\"> <\/span><span class=\"nt\">-o<\/span><span class=\"w\"> <\/span><span class=\"nx\">TodoApi<\/span><span class=\"w\">\n<\/span><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">new<\/span><span class=\"w\"> <\/span><span class=\"nx\">sln<\/span><span class=\"w\"> <\/span><span class=\"nt\">-n<\/span><span class=\"w\"> <\/span><span class=\"nx\">Htmx<\/span><span class=\"w\">\n<\/span><span class=\"n\">dotnet<\/span><span class=\"w\"> <\/span><span class=\"nx\">sln<\/span><span class=\"w\"> <\/span><span class=\"nx\">add<\/span><span class=\"w\"> <\/span><span class=\"nt\">--in-root<\/span><span class=\"w\"> <\/span><span class=\"nx\">TodoApi<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>TodoApi<\/code> \u067e\u0631\u0648\u0698\u0647\u060c \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>HtmlResult.cs<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">using<\/span> <span class=\"nn\">System.Net.Mime<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">System.Text<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">namespace<\/span> <span class=\"nn\">TodoApi<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">public<\/span> <span class=\"k\">class<\/span> <span class=\"nc\">HtmlResult<\/span> <span class=\"p\">:<\/span> <span class=\"n\">IResult<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">readonly<\/span> <span class=\"kt\">string<\/span> <span class=\"n\">_html<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"nf\">HtmlResult<\/span><span class=\"p\">(<\/span><span class=\"kt\">string<\/span> <span class=\"n\">html<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">_html<\/span> <span class=\"p\">=<\/span> <span class=\"n\">html<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"n\">Task<\/span> <span class=\"nf\">ExecuteAsync<\/span><span class=\"p\">(<\/span><span class=\"n\">HttpContext<\/span> <span class=\"n\">httpContext<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"n\">ContentType<\/span> <span class=\"p\">=<\/span> <span class=\"n\">MediaTypeNames<\/span><span class=\"p\">.<\/span><span class=\"n\">Text<\/span><span class=\"p\">.<\/span><span class=\"n\">Html<\/span><span class=\"p\">;<\/span>\n        <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"n\">ContentLength<\/span> <span class=\"p\">=<\/span> <span class=\"n\">Encoding<\/span><span class=\"p\">.<\/span><span class=\"n\">UTF8<\/span><span class=\"p\">.<\/span><span class=\"nf\">GetByteCount<\/span><span class=\"p\">(<\/span><span class=\"n\">_html<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"nf\">WriteAsync<\/span><span class=\"p\">(<\/span><span class=\"n\">_html<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 HTML \u0627\u0632 \u0646\u0642\u0627\u0637 \u0627\u0646\u062a\u0647\u0627\u06cc\u06cc API \u062d\u062f\u0627\u0642\u0644 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.  \u0628\u0631\u0648 \u0628\u0647 <code>Program.cs<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u062d\u062a\u0648\u0627 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">using<\/span> <span class=\"nn\">Microsoft.AspNetCore.Html<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">TodoApi<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"n\">WebApplication<\/span><span class=\"p\">.<\/span><span class=\"nf\">CreateBuilder<\/span><span class=\"p\">(<\/span><span class=\"n\">args<\/span><span class=\"p\">);<\/span>\n<span class=\"kt\">var<\/span> <span class=\"n\">app<\/span> <span class=\"p\">=<\/span> <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">Build<\/span><span class=\"p\">();<\/span>\n\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapGet<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/hello-world\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlResult<\/span><span class=\"p\">(<\/span><span class=\"s\">@\"\n\n    \n        <meta charset=\"\" utf-8=\"\"\/>\n        <meta name=\"\" viewport=\"\" content=\"\" width=\"device-width,\" initial-scale=\"1.0&quot;&quot;\"\/>\n        <script src=\"\" https:=\"\" integrity=\"\" sha384-fhxw7b6ale=\"\" crossorigin=\"\" anonymous=\"\"\/>\n    \n    \n        <button hx-post=\"\" hx-swap=\"\" outerhtml=\"\">Get time<\/button>\n    \n\n\"<\/span><span class=\"p\">));<\/span>\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapPost<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/hello-world\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlResult<\/span><span class=\"p\">(<\/span><span class=\"s\">$@\"<p>Hello World <span class=\"p\">{<\/span><span class=\"n\">DateTimeOffset<\/span><span class=\"p\">.<\/span><span class=\"n\">UtcNow<\/span><span class=\"p\">}<\/span><span class=\"s\"\/><\/p>\"<\/span><span class=\"p\">));<\/span>\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">Run<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0648 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u062f\u0631 API \u0645\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.  \u0627\u0648\u0644\u06cc \u0633\u0646\u062f HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 HTMX \u0627\u0632 \u0637\u0631\u06cc\u0642 CDN \u0627\u0633\u062a.  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0628\u062f\u0646\u0647\u060c \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc HTMX \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f (\u06a9\u0647 \u0628\u0639\u062f\u0627 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f) \u06a9\u0647 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0633\u062a\u0648\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a HTTP POST \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f. <code>\/hello-world<\/code> \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0633\u067e\u0633 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.  \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u062f\u0648\u0645 \u0641\u0642\u0637 \u06cc\u06a9 \u062a\u06af div \u062d\u0627\u0648\u06cc \u067e\u06cc\u0627\u0645 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u06cc\u0646 \u062f\u0631 \u0639\u0645\u0644\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 http:\/\/localhost:5179\/hello-world \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\"><\/span>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 HTMX \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc AJAX \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0646\u062f:<\/p>\n<ul>\n<li>\n<p>hx-get: \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>hx-post: \u062f\u0631\u062e\u0648\u0627\u0633\u062a POST \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>hx-put: \u062f\u0631\u062e\u0648\u0627\u0633\u062a PUT \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>hx-patch: \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a PATCH \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p>hx-delete: \u062f\u0631\u062e\u0648\u0627\u0633\u062a DELETE \u0631\u0627 \u0628\u0647 URL \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f.  \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u060c \u0644\u0637\u0641\u0627 \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"hx-trigger\"><\/span>\n<p>  hx-trigger<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0648\u06cc\u0698\u06af\u06cc hx-trigger \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c \u0648\u0642\u062a\u06cc \u0627\u0632 \u0645\u062d\u0631\u06a9\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0646\u06cc\u0633\u062a:<\/p>\n<ul>\n<li>\n<p><code>input<\/code>\u060c <code>textarea<\/code> & <code>select<\/code> \u0628\u0631 \u0631\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u0646\u062f <code>change<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f.<\/p>\n<\/li>\n<li>\n<p><code>form<\/code>  \u0628\u0631 \u0631\u0648\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f <code>submit<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f.<\/p>\n<\/li>\n<li>\n<p>\u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631 \u062a\u0648\u0633\u0637 <code>click<\/code> \u0631\u0648\u06cc\u062f\u0627\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u0642\u062f\u0627\u0631 \u0645\u0627\u0634\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"hx-target\"><\/span>\n<p>  hx-target<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u0627 <code>hx-target<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u0628\u0647 \u062c\u0627\u06cc \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0639\u0646\u0635\u0631 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0648\u06cc\u0636 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.  \u0645\u0642\u062f\u0627\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0627\u0634\u062f:<\/p>\n<ul>\n<li>\n<p>\u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u067e\u0631\u0633 \u0648 \u062c\u0648 CSS \u0627\u0632 \u0639\u0646\u0635\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631.<\/p>\n<\/li>\n<li>\n<p><code>this<\/code>  \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0628\u0627 <code>hx-target<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062e\u0648\u062f \u0647\u062f\u0641 \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><code>closest <css selector=\"\"\/><\/code>  \u0646\u0632\u062f\u06cc\u06a9\u062a\u0631\u06cc\u0646 \u0639\u0646\u0635\u0631 \u062c\u062f \u06cc\u0627 \u062e\u0648\u062f\u0634 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>find <css selector=\"\"\/><\/code>  \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u0627\u0648\u0644 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><code>next <css selector=\"\"\/><\/code>  DOM \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>previous <css selector=\"\"\/><\/code>  DOM \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 CSS \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f \u0628\u0647 \u0639\u0642\u0628 \u0627\u0633\u06a9\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"hx-swap\"><\/span>\n<p>  hx-swap<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u0627 <code>hx-swap<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0646\u062d\u0648\u0647 \u062a\u0639\u0648\u06cc\u0636 \u067e\u0627\u0633\u062e \u0646\u0633\u0628\u062a \u0628\u0647 \u0647\u062f\u0641 \u062f\u0631\u062e\u0648\u0627\u0633\u062a AJAX \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f.  \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u0645\u06a9\u0646 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0639\u0628\u0627\u0631\u062a\u0646\u062f \u0627\u0632:<\/p>\n<ul>\n<li>\n<p><code>innerHTML<\/code>: \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u06af\u0632\u06cc\u0646\u0647 \u067e\u06cc\u0634 \u0641\u0631\u0636<\/p>\n<\/li>\n<li>\n<p><code>outerHTML<\/code>: \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0628\u0627 \u067e\u0627\u0633\u062e \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>beforebegin<\/code>: \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0647\u062f\u0641 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>afterbegin<\/code>: \u067e\u0627\u0633\u062e \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0632\u0646\u062f \u0627\u0648\u0644 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>beforeend<\/code>: \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0631\u0632\u0646\u062f \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>afterend<\/code>: \u067e\u0627\u0633\u062e \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0647\u062f\u0641 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u062f\u0631\u062c \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>delete<\/code>: \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0631\u0627 \u0628\u062f\u0648\u0646 \u062a\u0648\u062c\u0647 \u0628\u0647 \u067e\u0627\u0633\u062e \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>none<\/code>: \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u067e\u0627\u0633\u062e \u0627\u0636\u0627\u0641\u0647 \u0646\u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%87%D9%85%D9%87_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0647\u0645\u0647 \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0647\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a HTML \u062f\u0631 \u062f\u0627\u062a \u0646\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 <code>HtmlContentBuilder<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0633\u0627\u062f\u0647.  \u0627\u06cc\u0646 \u0686\u0646\u062f\u06cc\u0646 \u0645\u0632\u06cc\u062a \u062f\u0627\u0631\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0642\u0627\u0628\u0644 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0633\u0627\u0632\u06cc<\/strong>: \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 <code>HtmlContentBuilder<\/code> \u0627\u0632 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0647\u0627\u06cc \u0645\u062a\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0645\u062a\u062f\u0647\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 HTML \u0628\u0633\u0627\u0632\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc<\/strong>: <code>HtmlContentBuilder<\/code> HTML \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0647\u0631 \u0631\u0634\u062a\u0647 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0646\u0634\u062f\u0647 \u0627\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u0631\u06a9\u06cc\u0628 \u067e\u0630\u06cc\u0631<\/strong>: \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0686\u0646\u062f\u062a\u0627\u06cc\u06cc \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 <code>HtmlContentBuilder<\/code> \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a HTML \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631.<\/p>\n<\/li>\n<li>\n<p><strong>\u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0633\u0627\u0646 \u062a\u0631<\/strong>: \u0628\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u0634\u062f\u0646 HTML\u060c \u0646\u06af\u0647\u062f\u0627\u0631\u06cc HTML \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0634\u0648\u0627\u0631 \u0634\u0648\u062f. <code>HtmlContentBuilder<\/code> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f\u060c HTML \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>IResult<\/code> \u0627\u062c\u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 <code>IHtmlContent<\/code> \u0631\u0627\u0628\u0637:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">using<\/span> <span class=\"nn\">Microsoft.AspNetCore.Html<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">System.Net.Mime<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">System.Text.Encodings.Web<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">using<\/span> <span class=\"nn\">System.Text<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">namespace<\/span> <span class=\"nn\">TodoApi<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">public<\/span> <span class=\"k\">class<\/span> <span class=\"nc\">HtmlContentResult<\/span> <span class=\"p\">:<\/span> <span class=\"n\">IResult<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">readonly<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"n\">_htmlContent<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"nf\">HtmlContentResult<\/span><span class=\"p\">(<\/span><span class=\"n\">IHtmlContent<\/span> <span class=\"n\">htmlContent<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">_htmlContent<\/span> <span class=\"p\">=<\/span> <span class=\"n\">htmlContent<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"n\">Task<\/span> <span class=\"nf\">ExecuteAsync<\/span><span class=\"p\">(<\/span><span class=\"n\">HttpContext<\/span> <span class=\"n\">httpContext<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"n\">ContentType<\/span> <span class=\"p\">=<\/span> <span class=\"n\">MediaTypeNames<\/span><span class=\"p\">.<\/span><span class=\"n\">Text<\/span><span class=\"p\">.<\/span><span class=\"n\">Html<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">using<\/span> <span class=\"p\">(<\/span><span class=\"kt\">var<\/span> <span class=\"n\">writer<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">StringWriter<\/span><span class=\"p\">())<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">_htmlContent<\/span><span class=\"p\">.<\/span><span class=\"nf\">WriteTo<\/span><span class=\"p\">(<\/span><span class=\"n\">writer<\/span><span class=\"p\">,<\/span> <span class=\"n\">HtmlEncoder<\/span><span class=\"p\">.<\/span><span class=\"n\">Default<\/span><span class=\"p\">);<\/span>\n            <span class=\"kt\">var<\/span> <span class=\"n\">html<\/span> <span class=\"p\">=<\/span> <span class=\"n\">writer<\/span><span class=\"p\">.<\/span><span class=\"nf\">ToString<\/span><span class=\"p\">();<\/span>\n            <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"n\">ContentLength<\/span> <span class=\"p\">=<\/span> <span class=\"n\">Encoding<\/span><span class=\"p\">.<\/span><span class=\"n\">UTF8<\/span><span class=\"p\">.<\/span><span class=\"nf\">GetByteCount<\/span><span class=\"p\">(<\/span><span class=\"n\">html<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">return<\/span> <span class=\"n\">httpContext<\/span><span class=\"p\">.<\/span><span class=\"n\">Response<\/span><span class=\"p\">.<\/span><span class=\"nf\">WriteAsync<\/span><span class=\"p\">(<\/span><span class=\"n\">html<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>TodoItem.cs<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0645\u062f\u0644 \u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">namespace<\/span> <span class=\"nn\">TodoApi<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">public<\/span> <span class=\"k\">class<\/span> <span class=\"nc\">TodoItem<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">public<\/span> <span class=\"n\">Guid<\/span> <span class=\"n\">Id<\/span> <span class=\"p\">{<\/span> <span class=\"k\">get<\/span><span class=\"p\">;<\/span> <span class=\"k\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">bool<\/span> <span class=\"n\">IsCompleted<\/span> <span class=\"p\">{<\/span> <span class=\"k\">get<\/span><span class=\"p\">;<\/span> <span class=\"k\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n    <span class=\"k\">public<\/span> <span class=\"kt\">string<\/span><span class=\"p\">?<\/span> <span class=\"n\">Name<\/span> <span class=\"p\">{<\/span> <span class=\"k\">get<\/span><span class=\"p\">;<\/span> <span class=\"k\">set<\/span><span class=\"p\">;<\/span> <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <code>Components.cs<\/code> \u06a9\u0644\u0627\u0633\u06cc \u06a9\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u0633\u0627\u0632\u0647\u0627\u06cc HTML \u0645\u0627 \u0628\u0627\u0634\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">using<\/span> <span class=\"nn\">Microsoft.AspNetCore.Html<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">namespace<\/span> <span class=\"nn\">TodoApi<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"k\">class<\/span> <span class=\"nc\">Components<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">Document<\/span><span class=\"p\">(<\/span><span class=\"n\">IHtmlContentContainer<\/span> <span class=\"n\">children<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<meta charset=\"\\&quot;UTF-8\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<meta name=\"\\&quot;viewport\\&quot;\" content=\"\\&quot;width=device-width,\" initial-scale=\"1.0\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<script src=\"\\&quot;https:\/\/unpkg.com\/htmx.org@1.9.6\\&quot;\" integrity=\"\\&quot;sha384-FhXw7b6AlE\/jyjlZH5iHa\/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni\\&quot;\" crossorigin=\"\\&quot;anonymous\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"n\">children<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">TodoList<\/span><span class=\"p\">(<\/span><span class=\"n\">IEnumerable<\/span><span class=\"p\"><span class=\"n\">TodoItem<\/span><span class=\"p\">&gt;<\/span> <span class=\"n\">todoItems<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<p>\"<span class=\"p\">);<\/span>\n        <span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"kt\">var<\/span> <span class=\"n\">todoItem<\/span> <span class=\"k\">in<\/span> <span class=\"n\">todoItems<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">todoItem<\/span><span class=\"p\">));<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<\/span><\/p>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">TodoItem<\/span> <span class=\"n\">todoItem<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<div>\"<span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<p>\"<\/p><\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendFormat<\/span><span class=\"p\">(<\/span><span class=\"s\">\"{0}\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">todoItem<\/span><span class=\"p\">.<\/span><span class=\"n\">Name<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<\/span><\/div>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 <code>Program.cs<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"kt\">var<\/span> <span class=\"n\">db<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"n\">List<\/span><span class=\"p\"><span class=\"n\">TodoItem<\/span><span class=\"p\">&gt;()<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"k\">new<\/span> <span class=\"nf\">TodoItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span> <span class=\"n\">Id<\/span> <span class=\"p\">=<\/span> <span class=\"n\">Guid<\/span><span class=\"p\">.<\/span><span class=\"nf\">NewGuid<\/span><span class=\"p\">(),<\/span> <span class=\"n\">Name<\/span> <span class=\"p\">=<\/span> <span class=\"s\">\"abc\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">IsCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"k\">true<\/span> <span class=\"p\">},<\/span>\n    <span class=\"k\">new<\/span> <span class=\"nf\">TodoItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span> <span class=\"n\">Id<\/span> <span class=\"p\">=<\/span> <span class=\"n\">Guid<\/span><span class=\"p\">.<\/span><span class=\"nf\">NewGuid<\/span><span class=\"p\">(),<\/span> <span class=\"n\">Name<\/span> <span class=\"p\">=<\/span> <span class=\"s\">\"123\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">IsCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"k\">false<\/span> <span class=\"p\">},<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapGet<\/span><span class=\"p\">(<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n    <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentResult<\/span><span class=\"p\">(<\/span><span class=\"n\">Components<\/span><span class=\"p\">.<\/span><span class=\"nf\">Document<\/span><span class=\"p\">(<\/span><span class=\"n\">builder<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapGet<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/todos\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentResult<\/span><span class=\"p\">(<\/span><span class=\"n\">Components<\/span><span class=\"p\">.<\/span><span class=\"nf\">TodoList<\/span><span class=\"p\">(<\/span><span class=\"n\">db<\/span><span class=\"p\">)));<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0627\u0648\u0644 \u0633\u0646\u062f HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062f\u0648\u0645\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.  \u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u0686\u0633\u0628 \u0628\u062f\u0646 (<code>hx-trigger=\"load\"<\/code>\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u06cc \u06a9\u0646\u062f (<code>hx-get=\"\/todos\"<\/code>) \u0648 \u067e\u0627\u0633\u062e \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 (<code>hx-swap=\"innerHTML\"<\/code>).  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0648 \u062d\u0630\u0641 \u0645\u0648\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>TodoItem<\/code> \u062c\u0632\u0621 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code>    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">TodoItem<\/span> <span class=\"n\">todoItem<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">isCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"kt\">string<\/span><span class=\"p\">.<\/span><span class=\"n\">Empty<\/span><span class=\"p\">;<\/span>\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"n\">todoItem<\/span><span class=\"p\">.<\/span><span class=\"n\">IsCompleted<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">isCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"s\">\"checked\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0686\u06a9 \u0628\u0627\u06a9\u0633\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0627 \u0622\u063a\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f (<code>hx-post=\"\/todos\/{todoItem.Id}\/toggle\"<\/code>) \u0648 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0639\u0646\u0635\u0631 (<code>hx-target=\"closest div\"<\/code>) \u0628\u0627 \u067e\u0627\u0633\u062e (<code>hx-swap=\"outerHTML\"<\/code>) \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0644\u06cc\u0633\u062a.  \u062f\u0631 \u0647\u0645\u0627\u0646 \u062e\u0637\u060c \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u06cc\u06a9 \u0639\u0645\u0644 \u0645\u0634\u0627\u0628\u0647 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u0627\u0633\u062e \u062e\u0627\u0644\u06cc \u0627\u0633\u062a\u060c \u0645\u0648\u0631\u062f \u0627\u0632 \u0644\u06cc\u0633\u062a \u062d\u0630\u0641 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 <code>Program.cs<\/code> \u0641\u0627\u06cc\u0644\u060c \u0627\u06cc\u0646 \u062f\u0648 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapPost<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/todos\/{id}\/toggle\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"kt\">string<\/span> <span class=\"n\">id<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"kt\">var<\/span> <span class=\"n\">todo<\/span> <span class=\"p\">=<\/span> <span class=\"n\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">First<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"n\">t<\/span><span class=\"p\">.<\/span><span class=\"n\">Id<\/span><span class=\"p\">.<\/span><span class=\"nf\">ToString<\/span><span class=\"p\">()<\/span> <span class=\"p\">==<\/span> <span class=\"n\">id<\/span><span class=\"p\">);<\/span>\n    <span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"n\">IsCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"p\">!<\/span><span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"n\">IsCompleted<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentResult<\/span><span class=\"p\">(<\/span><span class=\"n\">Components<\/span><span class=\"p\">.<\/span><span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">todo<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapDelete<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/todos\/{id}\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"kt\">string<\/span> <span class=\"n\">id<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"kt\">var<\/span> <span class=\"n\">todo<\/span> <span class=\"p\">=<\/span> <span class=\"n\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">First<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"p\">=&gt;<\/span> <span class=\"n\">t<\/span><span class=\"p\">.<\/span><span class=\"n\">Id<\/span><span class=\"p\">.<\/span><span class=\"nf\">ToString<\/span><span class=\"p\">()<\/span> <span class=\"p\">==<\/span> <span class=\"n\">id<\/span><span class=\"p\">);<\/span>\n    <span class=\"n\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">Remove<\/span><span class=\"p\">(<\/span><span class=\"n\">todo<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0628\u0647 \u0644\u06cc\u0633\u062a \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u062d\u0631\u06a9\u062a \u0628\u0647 <code>TodoItem.cs<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"k\">record<\/span> <span class=\"nc\">AddTodoItem<\/span><span class=\"p\">(<\/span><span class=\"kt\">string<\/span><span class=\"p\">?<\/span> <span class=\"n\">Name<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0639\u062f\u060c \u062f\u0631 <code>Program.cs<\/code> \u0641\u0627\u06cc\u0644\u060c \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code><span class=\"n\">app<\/span><span class=\"p\">.<\/span><span class=\"nf\">MapPost<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/todos\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"n\">AddTodoItem<\/span> <span class=\"n\">command<\/span><span class=\"p\">)<\/span> <span class=\"p\">=&gt;<\/span>\n<span class=\"p\">{<\/span>\n    <span class=\"kt\">var<\/span> <span class=\"n\">todo<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"n\">TodoItem<\/span> <span class=\"p\">{<\/span><span class=\"n\">Id<\/span> <span class=\"p\">=<\/span> <span class=\"n\">Guid<\/span><span class=\"p\">.<\/span><span class=\"nf\">NewGuid<\/span><span class=\"p\">(),<\/span><span class=\"n\">Name<\/span> <span class=\"p\">=<\/span> <span class=\"n\">command<\/span><span class=\"p\">.<\/span><span class=\"n\">Name<\/span><span class=\"p\">,<\/span> <span class=\"n\">IsCompleted<\/span> <span class=\"p\">=<\/span> <span class=\"k\">false<\/span> <span class=\"p\">};<\/span>\n    <span class=\"n\">db<\/span><span class=\"p\">.<\/span><span class=\"nf\">Add<\/span><span class=\"p\">(<\/span><span class=\"n\">todo<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentResult<\/span><span class=\"p\">(<\/span><span class=\"n\">Components<\/span><span class=\"p\">.<\/span><span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">todo<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0631\u06a9\u062a \u0628\u0647 <code>Components.cs<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <code>Document<\/code> \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 <code>json-enc<\/code> \u067e\u0633\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u0628\u0647 \u062c\u0627\u06cc \u0641\u0631\u0645\u062a URL:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code>    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">Document<\/span><span class=\"p\">(<\/span><span class=\"n\">IHtmlContentContainer<\/span> <span class=\"n\">children<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<meta charset=\"\\&quot;UTF-8\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<meta name=\"\\&quot;viewport\\&quot;\" content=\"\\&quot;width=device-width,\" initial-scale=\"1.0\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<script src=\"\\&quot;https:\/\/unpkg.com\/htmx.org@1.9.6\\&quot;\" integrity=\"\\&quot;sha384-FhXw7b6AlE\/jyjlZH5iHa\/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni\\&quot;\" crossorigin=\"\\&quot;anonymous\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<script src=\"\\&quot;https:\/\/unpkg.com\/htmx.org\/dist\/ext\/json-enc.js\\&quot;\"\/>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"n\">children<\/span><span class=\"p\">);<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0647\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>TodoForm<\/code> \u062c\u0632\u0621:<\/p>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0631\u0633\u0627\u0644\u060c HTMX \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a (<code>hx-post=\"\/todos\"<\/code>) \u0628\u0627 \u0641\u0631\u0645\u062a JSON (<code>hx-ext=\"json-enc\"<\/code>) \u0648 \u067e\u0627\u0633\u062e \u0631\u0627 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0645 (<code>hx-swap=\"beforebegin\"<\/code>).  \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f <code>TodoList<\/code> \u062c\u0632\u0621 \u0634\u0627\u0645\u0644 <code>TodoForm<\/code> \u062c\u0632\u0621:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight csharp\"><code>    <span class=\"k\">public<\/span> <span class=\"k\">static<\/span> <span class=\"n\">IHtmlContent<\/span> <span class=\"nf\">TodoList<\/span><span class=\"p\">(<\/span><span class=\"n\">IEnumerable<\/span><span class=\"p\"><span class=\"n\">TodoItem<\/span><span class=\"p\">&gt;<\/span> <span class=\"n\">todoItems<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">{<\/span>\n        <span class=\"kt\">var<\/span> <span class=\"n\">builder<\/span> <span class=\"p\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nf\">HtmlContentBuilder<\/span><span class=\"p\">();<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<p>\"<span class=\"p\">);<\/span>\n        <span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"kt\">var<\/span> <span class=\"n\">todoItem<\/span> <span class=\"k\">in<\/span> <span class=\"n\">todoItems<\/span><span class=\"p\">)<\/span>\n        <span class=\"p\">{<\/span>\n            <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"nf\">TodoItem<\/span><span class=\"p\">(<\/span><span class=\"n\">todoItem<\/span><span class=\"p\">));<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"nf\">TodoForm<\/span><span class=\"p\">());<\/span>\n        <span class=\"n\">builder<\/span><span class=\"p\">.<\/span><span class=\"nf\">AppendHtml<\/span><span class=\"p\">(<\/span><span class=\"s\">\"<\/span><\/p>\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">builder<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0646\u062a\u06cc\u062c\u0647\u060c HTMX \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0633\u0628\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc HTML \u0628\u0631\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc AJAX\u060c HTMX \u0645\u0646\u062d\u0646\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0622\u0633\u0627\u0646\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0648 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.  \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc \u067e\u0627\u06cc\u0647 \u0645\u062d\u06a9\u0645\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 HTMX \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 Todo App \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.  \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.  \u0628\u0627 \u062a\u0634\u06a9\u0631\u060c \u0648 \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang HTMX \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc AJAX \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc HTML \u0628\u0647 HTML \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0631 \u062f\u0648 \u0627\u06cc\u062f\u0647 \u0627\u0633\u0627\u0633\u06cc \u0627\u0633\u062a\u0648\u0627\u0631 \u0627\u0633\u062a: \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0627\u0633\u0627\u0633\u06cc \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f: hx-get=&#8221;\/data&#8221; hx-trigger=&#8221;click&#8221; hx-swap=&#8221;outerHTML&#8221;&gt; Get \u0648\u0627\u0631\u062f &hellip;<\/p>\n","protected":false},"author":2,"featured_media":70838,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-70837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/70837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=70837"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/70837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/70838"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=70837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=70837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=70837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}