Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Version 1.8 of 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 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
<!DOCTYPE html>
<html>
<head>
<title>CodeBehind Framework - Frequently Asked Questions</title>
<script type="text/javascript" src="/script/web-forms.js"></script>
<style>
.faq p
{
display: none;
}
</style>
</head>
<body>
<main>
<h2>CodeBehind Framework - Frequently Asked Questions</h2>
<div class="faq">
<b>Q: What is this website about?</b>
<p>A: This website provides useful information on various topics.</p>
</div>
<div class="faq">
<b>Q: How can I contact support?</b>
<p>A: You can reach out to our support team via email or phone.</p>
</div>
<div class="faq">
<b>Q: Is there a subscription fee?</b>
<p>A: No, our services are completely free.</p>
</div>
</main>
</body>
</html>
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("$/<p>", "display", "unset");
form.RemoveGetEvent("$", HtmlEvent.OnClick);
form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#hide");
form.StartIndex("hide");
form.DeleteStyle("$/<p>", "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
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$/<p>=display:unset
Rg$=onclick
Eg$=onclick|?answer#hide
#=hide
ds$/<p>=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("$/<p>", "display", "unset");
form2.RemoveTagEvent("$", HtmlEvent.OnClick);
form2.SetTagEvent("$", HtmlEvent.OnClick, "hide");
Write(form2.DoneToWebFormsTag("show"));
form2.Clean();
form2.DeleteStyle("$/<p>", "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 server requests when toggling FAQ answers.
's WebForms Core technology eliminates the stateless nature of HTTP.
The modified example above tells us that: It's not a server-side technology, it's a technology that's managed in a server-side programming language. It's a server technology!
Benefits of This Approach
1. Separation of Concerns
By relying on a server-centric technology like WebForms Core, you maintain a clear distinction between your business logic and the client’s presentation. Instead of scattering interactive scripts throughout your codebase, you centralize interactivity on the server. This not only keeps your code more organized but also makes it easier to update the logic without worrying about disparate JavaScript modules spread across the client side.
2. Streamlined Development and Maintenance
Eliminating the need for manual JavaScript reduces the complexity of your development process. Instead of juggling the quirks and incompatibilities of various browser-based scripting environments, you delegate the behavior to structured server-side responses. This enables:
Simpler Debugging: With less JavaScript running on the client side, there's reduced risk of encountering obscure script errors, making troubleshooting considerably more straightforward.
Cleaner Code Base: Developers can focus on crafting robust server logic rather than managing tangled client-side scripts, leading to more maintainable projects over time.
3. Enhanced Performance
When client interactions are driven by server-generated instructions, you can achieve more efficient performance:
Reduced Browser Load: The client receives pre-compiled responses that simply adjust the DOM, rather than having to execute complex logic on the fly.
Fewer Server Roundtrips: As seen in the FAQ example, initial instructions can be embedded into the page load, minimizing the need for additional requests and thereby speeding up the interactive experience.
4. Consistency Across Browsers
Manual JavaScript can sometimes lead to inconsistencies due to different browser behaviors. With a server-driven approach, the interaction logic is standardized and delivered uniformly to all clients. This helps ensure consistent behavior regardless of the user's browser or device.
5. Lower Vulnerability Surface
By minimizing manual JavaScript, you potentially reduce the avenues for client-side vulnerabilities such as cross-site scripting (XSS). With controlled server responses and comprehensive input validation on the server, the risk associated with client-written scripts can be mitigated.
WebForms Core continues to evolve as a powerful alternative for developers who prefer server-centric web development without sacrificing modern interactive experiences.
($) 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 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
<!DOCTYPE html>
<html>
<head>
<title>CodeBehind Framework - Frequently Asked Questions</title>
<script type="text/javascript" src="/script/web-forms.js"></script>
<style>
.faq p
{
display: none;
}
</style>
</head>
<body>
<main>
<h2>CodeBehind Framework - Frequently Asked Questions</h2>
<div class="faq">
<b>Q: What is this website about?</b>
<p>A: This website provides useful information on various topics.</p>
</div>
<div class="faq">
<b>Q: How can I contact support?</b>
<p>A: You can reach out to our support team via email or phone.</p>
</div>
<div class="faq">
<b>Q: Is there a subscription fee?</b>
<p>A: No, our services are completely free.</p>
</div>
</main>
</body>
</html>
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("$/<p>", "display", "unset");
form.RemoveGetEvent("$", HtmlEvent.OnClick);
form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#hide");
form.StartIndex("hide");
form.DeleteStyle("$/<p>", "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
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$/<p>=display:unset
Rg$=onclick
Eg$=onclick|?answer#hide
#=hide
ds$/<p>=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("$/<p>", "display", "unset");
form2.RemoveTagEvent("$", HtmlEvent.OnClick);
form2.SetTagEvent("$", HtmlEvent.OnClick, "hide");
Write(form2.DoneToWebFormsTag("show"));
form2.Clean();
form2.DeleteStyle("$/<p>", "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 server requests when toggling FAQ answers.
's WebForms Core technology eliminates the stateless nature of HTTP.
The modified example above tells us that: It's not a server-side technology, it's a technology that's managed in a server-side programming language. It's a server technology!
Benefits of This Approach
1. Separation of Concerns
By relying on a server-centric technology like WebForms Core, you maintain a clear distinction between your business logic and the client’s presentation. Instead of scattering interactive scripts throughout your codebase, you centralize interactivity on the server. This not only keeps your code more organized but also makes it easier to update the logic without worrying about disparate JavaScript modules spread across the client side.
2. Streamlined Development and Maintenance
Eliminating the need for manual JavaScript reduces the complexity of your development process. Instead of juggling the quirks and incompatibilities of various browser-based scripting environments, you delegate the behavior to structured server-side responses. This enables:
Simpler Debugging: With less JavaScript running on the client side, there's reduced risk of encountering obscure script errors, making troubleshooting considerably more straightforward.
Cleaner Code Base: Developers can focus on crafting robust server logic rather than managing tangled client-side scripts, leading to more maintainable projects over time.
3. Enhanced Performance
When client interactions are driven by server-generated instructions, you can achieve more efficient performance:
Reduced Browser Load: The client receives pre-compiled responses that simply adjust the DOM, rather than having to execute complex logic on the fly.
Fewer Server Roundtrips: As seen in the FAQ example, initial instructions can be embedded into the page load, minimizing the need for additional requests and thereby speeding up the interactive experience.
4. Consistency Across Browsers
Manual JavaScript can sometimes lead to inconsistencies due to different browser behaviors. With a server-driven approach, the interaction logic is standardized and delivered uniformly to all clients. This helps ensure consistent behavior regardless of the user's browser or device.
5. Lower Vulnerability Surface
By minimizing manual JavaScript, you potentially reduce the avenues for client-side vulnerabilities such as cross-site scripting (XSS). With controlled server responses and comprehensive input validation on the server, the risk associated with client-written scripts can be mitigated.
WebForms Core continues to evolve as a powerful alternative for developers who prefer server-centric web development without sacrificing modern interactive experiences.