In the sample above, that is a single Message text box. We must receive the HTML form’s input elements in our Razor Pages handler. OK, one more step: we’ll have an interactive HTMX-powered modal. If you have a message-only modal, you can stop here, but if you need modals for further interactions, the next section will show you how to handle that use case. Please read the HTMX documentation to understand how to use hx attributes for your solutions. I’m using HTMX’s hx-target to tell HTMX where the following response should go. HTMX will process these attributes as it adds the HTML clientside DOM. Looking through the HTML, you’ll see HTMX attributes sprinkled throughout. scopes the modal so we can keep creating them IndexModelĬonst modal = new bootstrap.Modal('#my-modal') The behavior will enable you to use HTMX and the JavaScript the Bootstrap development team intended. HTMX will execute any elements immediately, allowing you to perform the necessary setup for HTML. The modal is your run-of-the-mill Bootstrap modal but with some additional JavaScript. Now that we have that part let’s look at the modal HTML itself. The Razor Pages handler is a simple endpoint that returns an IActionResult. Also, remember some of these attributes are part of the HTMX.NET library and the tag helpers it provides. I use ASP.NET Core Razor Pages, which works with any backend technology. Let’s start with our button and what HTMX attributes we’ll need. When our user clicks the trigger, we want to request the server to generate and return our modal HTML. If you’re a backend developer, implementing these steps will get you the intended behavior, and it’s all straightforward. The endpoint that receives and responds with a user-specific response.The endpoint that receives and renders the modal.The interactive element is a button a user will click to trigger a request to the server.So how do we get dynamic modals that we generate on the server? Well, spoiler alert, HTMX, of course! HTMX and All That Jazzīefore we start looking at the code, let’s look at the parts of the process we need to consider. Most developers want dynamic modals based on user interaction or situational modals. Static modals are great, but likely not what most folks want. Modals have to already exist on the page as HTML or programmatically added through JavaScript calls. You can find these interactive portions of bootstrap modals in the JavaScript library that accompanies the library, but there’s a caveat. You typically have all three working together to get the intended behavior the Bootstrap team intended. Bootstrap Modalsīootstrap modals are built with HTML, CSS, and Javascript in mind. Please note I’m using the HTMX.NET library and ASP.NET Core tag helpers. For folks who aren’t aware, HTMX is a hypermedia-focused library to build interactivity into your client applications with server-rendered responses. This post will show how to use Bootstrap modals with HTMX. That said, the JavaScript aspects are entirely optional, and the toolkit has a “Bring Your Own JavaScript” philosophy to integrate Bootstrap visual components into whatever frontend library you choose. Additionally, no frontend toolkit is complete with the accompanying JavaScript to make components interactive. If you’ve done any frontend development in the past decade, you’ve likely interacted with Bootstrap, a toolkit focused on providing developers with CSS layout rules and components.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |