This lab demonstrates the implementation of a simple web application using ASP.NET Web Forms. The application includes a hidden field, a button, and a label to display a system identifier dynamically.
This file contains the front-end design of the web application, including HTML, CSS, and JavaScript for dynamic behavior.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>System Identifier Tool</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f4f7fa;
margin: 0;
padding: 0;
}
header {
background-color: #ff6f61;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.container {
max-width: 480px;
margin: 60px auto;
background-color: white;
padding: 40px 30px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
text-align: center;
}
.btn {
background-color: #ff6f61;
color: white;
padding: 12px 25px;
border: none;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #e65c4f;
}
.output-label {
display: block;
margin-top: 25px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<header>System Identifier Tool</header>
<form id="form1" runat="server">
<div class="container">
<!-- Hidden System Value -->
<asp:HiddenField ID="HiddenSysValue" runat="server" Value="InitialValue" />
<!-- Button to display hidden value -->
<asp:Button ID="btnRevealValue" runat="server" CssClass="btn" Text="Reveal Identifier" OnClick="btnRevealValue_Click" />
<!-- Output label -->
<asp:Label ID="lblOutput" runat="server" CssClass="output-label" />
</div>
</form>
<script type="text/javascript">
window.onload = function () {
// Assign new value to hidden field using its ClientID
document.getElementById('<%= HiddenSysValue.ClientID %>').value = "99999";
};
</script>
</body>
</html>
This file contains the back-end logic for the button click event to display the hidden field value.
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub btnRevealValue_Click(sender As Object, e As EventArgs)
' Show the updated hidden field value
lblOutput.Text = "Current System ID: " & HiddenSysValue.Value
End Sub
End Class
The lab demonstrates how to use ASP.NET Web Forms to create a dynamic web application with server-side and client-side functionality. The hidden field value is updated using JavaScript and displayed using a server-side event.