<%@ Page Title="Multi-Step Form with Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Multi-Step Form with Upload - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Multi-Step Form with Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .steps-bar { display: flex; gap: 0; margin-bottom: 16px; }
 .step-item {
 flex: 1; padding: 8px; text-align: center; font-size: 0.82rem;
 background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
 }
 .step-item.active { background: #2563eb; color: #fff; border-color: #2563eb; }
 .step-item.completed { background: #dcfce7; color: #166534; }
 .step-panel { display: none; }
 .step-panel.active { display: block; }
</style> 
<div class="demo-card"> <div class="demo-card-header">Multi-Step Form with Upload</div> <div class="demo-card-body"> <p class="demo-description"> A three-step registration form where step 2 requires document upload.
 Navigation between steps is controlled, and the form collects data across all steps.
 Uses Web Forms controls for form fields.
 </p> <div class="steps-bar"> <div class="step-item active" id="si1">1. Personal Info</div> <div class="step-item" id="si2">2. Documents</div> <div class="step-item" id="si3">3. Review</div> </div> <div class="step-panel active" id="sp1" style="max-width:420px;"> <div class="mb-3"> <label class="form-label">Name</label> <asp:TextBox ID="txtName" runat="server" CssClass="form-control" placeholder="Full Name" ClientIDMode="Static" /> </div> <div class="mb-3"> <label class="form-label">Email</label> <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" TextMode="Email" placeholder="you@example.com" ClientIDMode="Static" /> </div> <button type="button" class="btn btn-primary" onclick="msGoStep(2)">Next</button> </div> <div class="step-panel" id="sp2" style="max-width:420px;"> <p>Please upload your ID document:</p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onDocUploaded" /> <div id="msUploadStatus" class="small text-muted mt-2"></div> <div class="mt-3"> <button type="button" class="btn btn-secondary me-2" onclick="msGoStep(1)">Back</button> <button type="button" class="btn btn-primary" id="msNext2" disabled onclick="msGoStep(3)">Next</button> </div> </div> <div class="step-panel" id="sp3" style="max-width:420px;"> <div class="alert alert-success">All steps complete. Ready to submit!</div> <button type="button" class="btn btn-secondary me-2" onclick="msGoStep(2)">Back</button> <asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary"
 OnClientClick="alert('Submitted!'); return false;" /> </div> <div class="code-panel"> <pre><code>&lt;!-- Step 1: Web Forms controls --&gt;
&lt;asp:TextBox ID="txtName" runat="server" CssClass="form-control" /&gt;
&lt;asp:TextBox ID="txtEmail" runat="server" TextMode="Email" /&gt;

&lt;!-- Step 2: AjaxFileUpload --&gt;
&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onDocUploaded" /&gt;

&lt;script&gt;
function onDocUploaded(file) {
 document.getElementById('msNext2').disabled = false;
}
&lt;/script&gt;

&lt;!-- Step 3: Submit --&gt;
&lt;asp:Button ID="BtnSubmit" runat="server" Text="Submit" /&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> function msGoStep(n) {
 for (var i = 1; i <= 3; i++) {
 document.getElementById('sp' + i).classList.toggle('active', i === n);
 var si = document.getElementById('si' + i);
 si.classList.remove('active', 'completed');
 if (i < n) si.classList.add('completed');
 if (i === n) si.classList.add('active');
 }
 }
 function onDocUploaded(file) {
 document.getElementById('msUploadStatus').textContent = 'Uploaded: ' + file.name;
 document.getElementById('msNext2').disabled = false;
 }
</script>
</asp:Content>
