需要帮助在ASP.NET中使用javascipt函数添加动态文本框 [英] Need help in adding textbox dynamic using javascipt function in ASP.NET
问题描述
我有一个小项目，用于练习如何将JavaScript代码集成到
ASP.NET Web应用程序中，以执行客户端处理和验证。开发
a简单的单页Web应用程序，允许用户填写航空公司预订
详细信息。
网页必须使用JavaScript提供以下功能：
o提供下拉选项单向，往返，多城市。
如果用户选择单向选项，请提供以下控件：
o文本框输入FROM city
o文本框进入TO城市，确认FROM和TO城市不同
o文本框进入DEPARTURE日期，确认出发日期是在今天之后
如果用户选择往返选项，请提供以下控件：
o文本框以进入FROM city
o文本框进入TO城市，确认FROM和TO城市不同
o文本框进入DEPARTURE DATE，验证出发日期是
之后今天
o文本框输入RETURN DATE，验证返回日期之后
出发日期
如果用户选择多城市选项，请提供以下控件：
o文本框输入FROM city of第一次飞行
o文本框进入第一个航班的TO城市，验证第一班航班的FROM和TO
城市是不同的
o文本框进入第一个航班的DEARTURE DATE，确认
出发日期是在今天之后
o文本框进入第二个航班的FROM城市，并自动填写与
到第一班航班的城市
o文本框进入第二航班城市，验证FROM和TO城市
的第二班航班是不同的
o文本框进入第二次航班的离开日期，确认第二次航班的出发日期是在第一次航班之后
o提供一个名为Add Another Flight的按钮，点击它会自动显示新文本框以输入FROM，TO和DEPARTURE DATE o航班
我尝试过的事情：
这是我的到目前为止的代码：
I have a small project that is to practice how to integrate JavaScript code into an
ASP.NET web application to perform client-side processing and validation. Develop
a simple one-page web application that allows the user to fill airline reservation
details.
The webpage must provide the following functionality using JavaScript:
o Provide a dropdown with the options One-way, Round-trip, Multi-city.
If the user selects One-way option, provide the following controls:
o text box to enter FROM city
o text box to enter TO city, verify that the FROM and TO cities are different
o text box to enter DEPARTURE DATE, verify that the departure date is after today
If the user selects Round-trip option, provide the following controls:
o text box to enter FROM city
o text box to enter TO city, verify that the FROM and TO cities are different
o text box to enter DEPARTURE DATE, verify that the departure date is
after today
o text box to enter RETURN DATE, verify that the return date is after
departure date
If the user selects the Multi-city option, provide the following controls:
o text box to enter FROM city of the first flight
o text box to enter TO city of the first flight, verify that the FROM and TO
cities of first flight are different
o text box to enter DEPARTURE DATE of the first flight, verify that the
departure date is after today
o text box to enter FROM city of the second flight, and automatically fill it with
TO city of the first flight
o text box to enter TO city of second flight, verify that FROM and TO cities
of second flight are different
o text box to enter DEPARTURE DATE of the second flight, verify that the departure date of the second flight is after the first flight
o Provide a button called Add Another Flight, clicking on which automatically shows new text boxes to enter FROM, TO and DEPARTURE DATE of the flight
What I have tried:
This is my code so far:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Assignment05.Home" %>
<title>
function onFlightChange() {
var flight = document.getElementById("ddFlights").value;
var oneWay = document.getElementById("oneWay");
var roundTrip = document.getElementById("roundTrip");
var multiCity = document.getElementById("multiCities");
if (flight == 1) {
oneWay.style.display = "block";
roundTrip.style.display = "none";
multiCity.style.display = "none";
}
else if (flight == 2) {
roundTrip.style.display = "block";
oneWay.style.display = "none";
multiCity.style.display = "none";
}
else if (flight == 3) {
multiCity.style.display = "block";
roundTrip.style.display = "none";
oneWay.style.display = "none";
}
}
function addTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
<script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddFlights" runat="server" onchange="onFlightChange()">
<asp:ListItem Value="0" Text="Please Select Your Flight"></asp:ListItem>
<asp:ListItem Value="1" Text="One-Way"></asp:ListItem>
<asp:ListItem Value="2" Text="Round-Trip"></asp:ListItem>
<asp:ListItem Value="3" Text="Multi-cities"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
<table style="display:none;" id="oneWay">
<tr> <td> <asp:Label ID="Label1" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label3" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox3" runat="server" Text=""></asp:TextBox>
</td> </tr> </table>
<table id="roundTrip" style="display:none;">
<tr> <td> <asp:Label ID="Label4" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox4" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label5" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox5" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label6" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox6" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label7" runat="server" Text="Return Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox7" runat="server" Text=""></asp:TextBox>
</td> </tr> </table>
<table id="multiCities" style="display:none;">
<tr> <td> <asp:Label ID="Label8" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox8" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label9" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox9" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label10" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox10" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label11" runat="server" Text="Return Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox11" runat="server" Text=""></asp:TextBox>
</td>
</tr> <tr> <td><asp:Button ID="Button2" runat="server" Text="Add Another Flight" onclick="AddTextBox()"/></td> </tr> </table>
</div>
<asp:Button ID="Button1" runat="server" Text="Display" />
</form>
</body>
</html>
I am stuck in creating another flight function and how to verify the date required in text boxes. Please Help Me !!!
推荐答案
您可以轻松添加文本框。但你不能做的是让它们存在，以便它们具有观点。你无法在后端轻松访问这些值。
ASP.NET已经过时了十多年，你为什么不至少使用MVC？
我认为问题是你使用javascript进行验证，而不是创建控件
You can easily add text boxes. But what you can't do, is have them exist so they have viewstate. You can't access the values easily on the back end.
ASP.NET is over a decade obsolete, why aren't you using MVC at least?
I think the question is that you use javascript to do validation, not create the controls
这篇关于需要帮助在ASP.NET中使用javascipt函数添加动态文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
