我有一个简单的页面，该页面分为两个步骤：
步骤1：当我单击下一步按钮时，创建用户名和密码，它必须转到步骤2：输入所有信息。
当我单击下一个按钮时，将加载第2步页面，并立即返回到第1步。我尝试将更新面板放在整个第2步中，但是它不允许我单击上一个按钮或提交按钮。我还尝试用更新面板围绕所有标签和文本框，保留上一个和提交按钮，但是以某种方式也无法正常工作。请帮帮我。
我也有一个bootstrap日期选择器。我不明白如何在后面的代码中在该框中输入日期。
这是我的代码：
Default.aspx
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Template/Main.Master" CodeBehind="Default.aspx.vb" Inherits="Library._Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap1-css">
<link rel="stylesheet" runat="server" media="screen" href="/css/StyleSheet.css" type="text/css" />
<link rel="stylesheet" runat="server" media="screen" href="~/css/StyleSheet3.css" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<%--<script type="text/javascript" src="/js/JavaScript.js"></script>--%>
<script type="text/javascript" src="/js/JavaScript1.js"></script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div class="span12">
<div class="" id="loginModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="col-xs-12 col-md-6" id="Heading1"> Welcome! </h2>
</div>
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a href="#Userlogin" data-toggle="tab">User Login</a></li>
<li><a href="#ManagerLogin" data-toggle="tab">Manager Login</a></li>
<li><a href="#create" data-toggle="tab">Create Account</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="Userlogin">
<div class="form-horizontal">
<fieldset>
<asp:UpdatePanel ID="uplogin" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="click" />
</Triggers>
<ContentTemplate>
<div class="control-group">
<asp:Label ID="lblUsername" runat="server" CssClass="col-xs-12" Text="UserName"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="control-group">
<asp:Label ID="lblPassword" runat="server" CssClass="col-xs-12" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" TextMode="Password" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="control-group">
<div class="controls">
<asp:UpdatePanel ID="upLogin2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:button cssclass="btn btn-success btn-block" ID="btnULogin" runat="server" Text="Login"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane fade" id="ManagerLogin">
<div class="form-horizontal">
<fieldset>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="click" />
</Triggers>
<ContentTemplate>
<div class="control-group">
<asp:Label ID="lblMUserName" runat="server" CssClass="col-xs-12" Text="UserName"></asp:Label>
<asp:TextBox ID="txtMUserName" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="control-group">
<asp:Label ID="lblMPassword" runat="server" CssClass="col-xs-12" Text="Password"></asp:Label>
<asp:TextBox ID="txtMPassword" TextMode="Password" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="control-group">
<div class="controls">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:button cssclass="btn btn-success" ID="btnMLogin" runat="server" Text="Login"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane fade" id="create">
<div class="form-horizontal">
<fieldset>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
<asp:LinkButton ID="lnkbtnstep1" runat="server" CssClass="nav-link active" href="#step-1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1" Text="Step 1"></asp:LinkButton>
</li>
<li role="presentation" class="nav-item">
<asp:LinkButton ID="lnkbtnstep2" runat="server" CssClass="nav-link inactive" href="#step-2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2" Text="Step 2"></asp:LinkButton>
</li>
</ul>
</div>
</div>
</div>
<div role="form">
<div class="row setup-content tab-pane active" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Create Username and Password</h3>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="prevBtn" />
</Triggers>
<ContentTemplate>
<div class="form-group">
<asp:Label ID="lblCUsername" runat="server" CssClass="col-xs-12" Text="UserName" class="form-control"></asp:Label>
<asp:TextBox ID="txtCUsername" runat="server" CssClass="form-control" required="required" placeholder="Enter Username"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblCPassword" runat="server" CssClass="col-xs-12" Text="Password" class="form-control"></asp:Label>
<asp:TextBox ID="txtCPassword" TextMode="Password" runat="server" CssClass="form-control" required="required" placeholder="Enter Password"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:Button ID="prevBtn" runat="server" CssClass="btn btn-primary prevBtn btn-lg pull-left" Text="Previous" />
<asp:Button ID="btnSubmit" runat="server" CssClass="btn btn-primary btn-lg" Text="submit" />
</div>
</div>
</div>
</div>
</div>
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Add Information</h3>
<asp:UpdatePanel runat="server" UpdateMode="conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="nextBtn" />
</Triggers>
<ContentTemplate>
<div class="form-group">
<asp:Label ID="lblFirstName" runat="server" CssClass="col-xs-12" AssociatedControlID="txtFirstName" class="form-control" Text="FirstName"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control" placeholder="Enter First Name"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblLastName" runat="server" CssClass="col-xs-12" AssociatedControlID="txtLastName" class="form-control" Text="LastName"></asp:Label>
<asp:TextBox ID="txtLastName" runat="server" CssClass="form-control" placeholder="Enter Last Name"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblAddress" runat="server" CssClass="col-xs-12" AssociatedControlID="txtAddress" class="form-control" Text="Address"></asp:Label>
<asp:TextBox ID="txtAddress" runat="server" CssClass="form-control" placeholder="Enter Address"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblDOB" runat="server" CssClass="col-xs-12" class="form-control" Text="Date Of Birth" Font-Bold="true"></asp:Label>
<div class="row">
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<div class="form-group">
<div class="col-xs-12 date">
<div class="input-group input-append date" id="datePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#datePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>
</div>
</div>
<div class="form-group">
<asp:Label ID="lblEmail" runat="server" CssClass="col-xs-12" AssociatedControlID="txtEmail" class="form-control" Text="Email"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" placeholder="Enter Email"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblPhoneNumber" runat="server" CssClass="col-xs-12" AssociatedControlID="txtPhoneNumber" class="form-control" Text="Phone Number"></asp:Label>
<asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="form-control" placeholder="Enter Primary Phone Number"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="lblSecondaryNumber" runat="server" CssClass="col-xs-12" AssociatedControlID="txtSecondaryNumber" class="form-control" Text="Secondary Phone Number"></asp:Label>
<asp:TextBox ID="txtSecondaryNumber" runat="server" CssClass="form-control" placeholder="Enter Secondary Phone Number"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div>
<asp:Button ID="nextBtn" runat="server" CssClass="btn btn-primary nextBtn btn-lg pull-right" Text="Next" />
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Default.aspx.vb
Public Class _Default
Inherits Library.Helper
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
txtUsername.Focus()
End If
End Sub
Protected Sub btnULogin_click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnULogin.Click
InitiateULogin()
End Sub
Protected Sub btnMLogin_click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnMLogin.Click
InitiateMLogin()
End Sub
Protected Sub btnSubmit_click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
InitiateCreateUserName()
InitiateAdd()
End Sub
Private Sub InitiateULogin()
Try
Dim conn As New Connection(Connection.EConnectionString.Library)
Using conn.Connection
Actions.ULogin(txtUsername.Text.Trim(), txtPassword.Text.Trim(), "User", conn.Connection)
End Using
Catch ex As Exception
Library.Helper.ShowMessage(ex.Message)
End Try
End Sub
Private Sub InitiateMLogin()
Try
Dim conn As New Connection(Connection.EConnectionString.Library)
Using conn.Connection
Actions.MLogin(txtMUserName.Text.Trim(), txtMPassword.Text.Trim(), "Manager", conn.Connection)
End Using
Catch ex As Exception
Library.Helper.ShowMessage(ex.Message)
End Try
End Sub
Private Sub InitiateCreateUserName()
Try
Dim conn As New Connection(Connection.EConnectionString.Library)
Using conn.Connection
Actions.CreateUserId(txtCUsername.Text, txtCPassword.Text, "User", conn.Connection)
End Using
Catch ex As Exception
Library.Helper.ShowMessage(ex.Message)
End Try
End Sub
End Class