Managing State on Stateless HTTP and Form Validation Using jQuery

Part 1: Managing State on Stateless HTTP (5 marks)

What is the Problem?

HTTP is a stateless protocol, meaning each request from a client to the server is independent. The server does not remember any previous request. However, real-world web applications (like shopping carts, login sessions, etc.) need to remember user data across multiple requests. This is called state management.

State Management Approaches in ASP.NET

The following storage approaches are used to manage state on stateless HTTP:

Detailed Explanation of Each Approach

1. Cookies

• Small pieces of data stored on the client's browser.
• Sent automatically with every HTTP request to the server.
• Used to remember user preferences, login tokens, etc.

// Setting a cookie in ASP.NET MVC
Response.Cookies.Append("Username", "JohnDoe");

// Reading a cookie
string username = Request.Cookies["Username"];

Limitation: Cookies can be tampered with by the client, so sensitive data should not be stored directly.

2. Session State

• Data is stored on the server side.
• A unique session ID is stored in a cookie on the client side.
• The server uses this ID to retrieve the corresponding session data.

// Storing data in session
HttpContext.Session.SetString("UserName", "JohnDoe");

// Retrieving data from session
string name = HttpContext.Session.GetString("UserName");

Advantage: More secure than cookies since actual data stays on the server.

3. TempData

• Used to pass data between two consecutive requests (e.g., from one action to another after a redirect).
• Internally uses cookies or session state.

// Storing in TempData
TempData["Message"] = "Record saved successfully!";

// Reading in the next request
string msg = TempData["Message"].ToString();

4. Query Strings

• Data is passed as part of the URL.

https://example.com/products?category=electronics&page=2

string category = Request.Query["category"];

Limitation: Visible in the URL, not suitable for sensitive data.

5. Hidden Fields

• Data is stored in HTML form fields that are not visible to the user but are submitted with the form.

<input type="hidden" name="UserId" value="101" />

Limitation: Can be viewed and modified by inspecting the page source.

6. Cache

• Data is stored server-side in memory for fast access.
• Suitable for data that is expensive to compute and shared across users.

// Using IMemoryCache
_cache.Set("ProductList", products, TimeSpan.FromMinutes(10));

Summary Diagram

Client (Browser)                    Server
     |                                 |
     |--- HTTP Request (stateless) --->|
     |                                 |
     |  State managed via:             |
     |  - Cookies (client-side)        |
     |  - Session (server-side)        |
     |  - TempData (redirect)          |
     |  - Query Strings (URL)          |
     |  - Hidden Fields (form)         |
     |  - Cache (server memory)        |
     |<-- HTTP Response ---------------|

Part 2: Form Validation Using jQuery (5 marks)

What is jQuery Form Validation?

jQuery provides a simple and powerful way to validate HTML forms on the client side before the data is submitted to the server. This improves user experience by giving instant feedback without a page reload.

The most commonly used plugin is the jQuery Validation Plugin.

Assumptions

• We have a Student Registration Form with fields: Name, Email, Age, and Password.
• jQuery and jQuery Validation plugin are included via CDN.
• Validation is done client-side before form submission.

Step 1: HTML Form Structure

<!DOCTYPE html>
<html>
<head>
    <title>Student Registration</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include jQuery Validation Plugin -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
    <style>
        .error { color: red; font-size: 12px; }
        input { display: block; margin: 8px 0; padding: 5px; }
    </style>
</head>
<body>

<h2>Student Registration Form</h2>

<form id="registrationForm">
    <label>Full Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" />

    <label>Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" />

    <label>Age:</label>
    <input type="number" id="age" name="age" placeholder="Enter your age" />

    <label>Password:</label>
    <input type="password" id="password" name="password" placeholder="Enter password" />

    <label>Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword"
           placeholder="Confirm password" />

    <button type="submit">Register</button>
</form>

</body>
</html>

Step 2: jQuery Validation Script

<script>
$(document).ready(function () {
    $("#registrationForm").validate({
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            age: {
                required: true,
                number: true,
                min: 16,
                max: 100
            },
            password: {
                required: true,
                minlength: 6
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        },
        messages: {
            name: "Please enter your full name (at least 3 characters).",
            email: "Please enter a valid email address.",
            age: "Age must be between 16 and 100.",
            password: "Password must be at least 6 characters long.",
            confirmPassword: "Passwords do not match."
        },
        submitHandler: function (form) {
            alert("Registration form is valid! Submitting...");
            form.submit();
        }
    });
});
</script>

The jQuery Validation Plugin's .validate() call attaches a rules object (what each field must satisfy) and a matching messages object (what to show when a rule fails) directly to the form, and it re-checks every field automatically on blur and on keyup, so the student sees an inline error the moment a field becomes invalid, without any page reload. The submitHandler only fires once every rule passes, at which point the form is genuinely submitted to the server, giving the registration page instant client-side feedback backed by the plugin's built-in required, email, number, minlength, and equalTo validators.

Two Types of Services Managed by IoC Container and Their Registration

Types of Services (Lifetimes)

The built-in IoC container in ASP.NET Core supports three kinds of service lifetimes, of which the two most commonly highlighted types are:

1. Singleton

• The IoC container creates and shares a single instance of a service throughout the application's lifetime.
• The instance is created the first time it is requested, and every subsequent request uses that same instance.
• Suitable for services that maintain global state or are expensive to create.

2. Transient

• The IoC container creates a new instance of the specified service type every time it is requested.
• This lifetime works best for lightweight, stateless services.
• Each request gets a completely fresh object.

3. Scoped (also managed by IoC)

• The IoC container creates one instance per HTTP request.
• The same instance is shared within a single request but a different instance is created for different requests.

How Services Are Registered

Services are registered inside the ConfigureServices method using the IServiceCollection interface. Registration is done using ServiceDescriptor:

public void ConfigureServices(IServiceCollection services)
{
    // Singleton registration
    services.Add(new ServiceDescriptor(typeof(ILog), new MyConsoleLogger()));

    // Transient registration
    services.Add(new ServiceDescriptor(
        typeof(ILog),
        typeof(MyConsoleLogger),
        ServiceLifetime.Transient));

    // Scoped registration
    services.Add(new ServiceDescriptor(
        typeof(ILog),
        typeof(MyConsoleLogger),
        ServiceLifetime.Scoped));
}

Summary Table

Once registered, the IoC container automatically performs constructor injection wherever the service type is used as a constructor parameter.

Short Notes (Any Two)

a. Lambda Expression

Definition

A lambda expression is an anonymous function that can be used to create delegates or expression tree types. Lambda expressions are a concise way to write inline functions and are heavily used in LINQ (Language Integrated Query) in C#.

Syntax

(parameters) => expression

or for a block body:

(parameters) => { statements; }

Key Characteristics

• The => operator is called the lambda operator and is read as "goes to".
• Lambda expressions can have zero, one, or multiple parameters.
• They can be used wherever a delegate type is expected.
• They are a core part of LINQ support in C#, alongside query expressions, object initializers, and collections.

Example

// Simple lambda expression
Func<int, int> square = x => x * x;
Console.WriteLine(square(5)); // Output: 25

// Lambda with LINQ
int[] scores = new int[] { 97, 92, 83, 60 };
var highScores = scores.Where(score => score > 80);
foreach (int s in highScores)
    Console.WriteLine(s);
// Output: 97 92 83

Why Use Lambda Expressions?

• Makes code shorter and more readable.
• Eliminates the need to define a separate named method for simple operations.
• Integrates seamlessly with LINQ to query collections, databases, XML, and more.
• Supports functional programming style in C#.

b. Cross Site Request Forgery (CSRF)

Definition

Cross-Site Request Forgery (CSRF) is a web security attack where an attacker tricks an authenticated user into unknowingly submitting a malicious request to a web application on which the user is currently authenticated.

How CSRF Works

1. The user logs into a trusted website (e.g., a banking site) and a session cookie is stored in the browser.
2. Without logging out, the user visits a malicious website.
3. The malicious site contains a hidden request (e.g., a form or image tag) that sends a request to the trusted website.
4. Since the browser automatically includes the session cookie, the trusted website processes the request as if it came from the legitimate user.

Example Attack Scenario

<!-- Malicious page sends a hidden request to the bank -->
<img src="http://bank.com/transfer?amount=10000&to=attacker" />

The browser automatically sends the authenticated cookie along with this request.

Difference from XSS

Prevention Techniques

• Anti-CSRF Tokens: Include a unique, secret token in every form that the server validates.
• SameSite Cookie Attribute: Restricts cookies from being sent with cross-site requests.
• Re-authentication: Require password confirmation for sensitive actions.
• Checking Referer/Origin headers: Validate that requests originate from the expected domain.

c. Single Page Application (SPA)

Definition

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates the content as the user interacts with the app, without requiring a full page reload from the server.

How SPA Works

• On the first request, the server sends a single HTML page along with all necessary JavaScript and CSS.
• Subsequent interactions (navigation, data loading) are handled via AJAX calls to the server, which returns only data (typically JSON), not full HTML pages.
• The browser's JavaScript framework (e.g., Angular, React, Vue.js) updates the DOM dynamically.

Architecture Diagram

User Action --> JavaScript (Client Side) --> AJAX Request --> Server API
                        |                                         |
                   DOM Updated <-------------- JSON Response -----+

Key Characteristics

• Only one full page load occurs (at the start).
• Uses client-side routing to simulate navigation between pages.
• Heavy use of JavaScript frameworks like Angular, React, or Vue.js.
• Communicates with the backend via REST APIs or GraphQL.

Advantages

Disadvantages

• SEO challenges: Search engines may struggle to index dynamically loaded content.
• Initial load time can be slow as all JavaScript is loaded upfront.
• Browser history management requires extra handling.
• Security: Requires careful handling of authentication tokens (e.g., JWT).

Example Technologies

• Frameworks: Angular, React, Vue.js
• Communication: AJAX, Fetch API, Axios
• Routing: React Router, Angular Router