Dev.to

Creating an FAQ Page Without JavaScript

Version 1.8 of WebForms Core technology is coming soon. In this version we will be able to access the requester tag. Using the Dollar sign ($) character we can specify the requester tag. In this tutorial, we'll teach you how to build a dynamic FAQ page using the new requester tag feature. The WebForms Core Advantage WebForms Core enables server-driven interactions that manipulate the DOM without requiring manually written JavaScript. The framework handles the client-side behavior through structured server responses, making development more streamlined and maintainable. Example using the CodeBehind framework Below, we break down the process into two parts: the HTML (View) and the Controller code. Enjoy this enhanced walkthrough on creating an FAQ page without writing manual JavaScript! This HTML page defines your FAQ section. Notice that the answer paragraphs are hidden by default using CSS: Html page (View) @page @controller FaqController CodeBehind Framework - Frequently Asked Questions .faq p { display: none; } CodeBehind Framework - Frequently Asked Questions Q: What is this website about? A: This website provides useful information on various topics. Q: How can I contact support? A: You can reach out to our support team via email or phone. Q: Is there a subscription fee? A: No, our services are completely free. The controller sets up the FAQ behavior. On the initial page load, we attach click events to each FAQ question. When a user clicks, the browser sends a query (?answer#show or ?answer#hide), and the server responds with instructions on whether to show or hide the answer. Controller using CodeBehind; public partial class FaqController : CodeBehindController { public void PageLoad(HttpContext context) { if (context.Request.Query.ContainsKey("answer")) { ShowAnswer(context); return; } WebForms form = new WebForms(); form.SetGetEvent(InputPlace.QueryAll(".faq b"), HtmlEvent.OnClick, "?answer#show"); Control(form); } private void ShowAnswer(HttpContext context) { new ClientCache(context.Response.Headers).Set(31536000); // One years WebForms form = new WebForms(); form.StartIndex("show"); form.SetStyle("$/", "display", "unset"); form.RemoveGetEvent("$", HtmlEvent.OnClick); form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#hide"); form.StartIndex("hide"); form.DeleteStyle("$/", "display"); form.RemoveGetEvent("$", HtmlEvent.OnClick); form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#show"); Control(form, true); } } The GIF image below shows how the above code works. How It Works The initial page load sets up click events on all FAQ questions (.faq b elements) When clicked, the browser requests ?answer#show or ?answer#hide The server responds with instructions to: Show/hide the answer (by setting display: unset or removing the style) Toggle the click event between show/hide states Note: In this example, client caching is used so that we only need to request the server once. What does the server send? In WebForms Core, the server plays a crucial role in handling user interactions efficiently. When users click on FAQ elements, the framework dynamically adjusts the visibility of answers without requiring manually written JavaScript. Instead, WebForms Core sends structured responses that guide how elements are displayed and behave. [web-forms] #=show ss$/=display:unset Rg$=onclick Eg$=onclick|?answer#hide #=hide ds$/=display Rg$=onclick Eg$=onclick|?answer#show In the following example, we will get the same results on the client side using the SetTagEvent event without having to request from the server. Here we have only changed the controller slightly. Example using CodeBehind; public partial class FaqController : CodeBehindController { public void PageLoad(HttpContext context) { WebForms form = new WebForms(); form.SetTagEvent(InputPlace.QueryAll(".faq b"), HtmlEvent.OnClick, "show"); Control(form); WebForms form2 = new WebForms(); form2.SetStyle("$/", "display", "unset"); form2.RemoveTagEvent("$", HtmlEvent.OnClick); form2.SetTagEvent("$", HtmlEvent.OnClick, "hide"); Write(form2.DoneToWebFormsTag("show")); form2.Clean(); form2.DeleteStyle("$/", "display"); form2.RemoveTagEvent("$", HtmlEvent.OnClick); form2.SetTagEvent("$", HtmlEvent.OnClick, "show"); Write(form2.DoneToWebFormsTag("hide")); } } This approach generates client-side instructions during the initial page load, eliminating the need for subsequent

May 11, 2025 - 00:32
 0
Creating an FAQ Page Without JavaScript

Version 1.8 of WebForms Core technology is coming soon. In this version we will be able to access the requester tag. Using the Dollar sign
($) character we can specify the requester tag. In this tutorial, we'll teach you how to build a dynamic FAQ page using the new requester tag feature.

The WebForms Core Advantage

WebForms Core enables server-driven interactions that manipulate the DOM without requiring manually written JavaScript. The framework handles the client-side behavior through structured server responses, making development more streamlined and maintainable.

Example using the CodeBehind framework

Below, we break down the process into two parts: the HTML (View) and the Controller code.

Enjoy this enhanced walkthrough on creating an FAQ page without writing manual JavaScript!

This HTML page defines your FAQ section. Notice that the answer paragraphs are hidden by default using CSS:

Html page (View)

@page
@controller FaqController



    </span>CodeBehind Framework - Frequently Asked Questions<span class="nt">
    
    


    

        
CodeBehind Framework - Frequently Asked Questions

         class="faq">
            Q: What is this website about?
            
A: This website provides useful information on various topics.
class="faq"> Q: How can I contact support?

A: You can reach out to our support team via email or phone.

class="faq"> Q: Is there a subscription fee?

A: No, our services are completely free.