Как сделать так, чтобы приложение не перезагружалось при нажатии кнопки в ASP.NET
Здравствуйте, у меня есть проект в asp.net использование javascript для отображения различных текстовых полей. Однако, когда я нажимаю кнопку, веб-страница просто перезагружается и ничего не показывает. Как я могу сделать так, чтобы веб не перезагружался после нажатия кнопки Отправить?
Что я уже пробовал:
код JavaScript:
function onFlightChange() {
var flight = document.getElementById("ddFlights").value;
var oneWay = document.getElementById("oneWay");
var roundTrip = document.getElementById("roundTrip");
var multiCity = document.getElementById("multiCity");
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";
roundTrip.setAttribute("AutoPostBack","false");
}
else if (flight == 3) {
multiCity.style.display = "block";
roundTrip.style.display = "none";
oneWay.style.display = "none";
}
}
function anotherFlight() {
var anotherFlight = document.getElementById("flight");
anotherFlight.style.display = "block";
}
function validateCity() {
//taking from city
var fromCity = document.getElementById("txtFromCity").value;
//taking to city
var toCity = document.getElementById("txtToCity").value;
//taking departure date
//checking both the cities if empty
if (fromCity == "" || toCity == "") {
//if any one from or to city is empty
alert("Enter From and To city.");
}
//checking for both the cities
else if (fromCity == toCity) {
//display message
alert("From City and To city need to be different");
}
}
function validateDate() {
var departureDate = document.getElementById("txtDepartDate").value;
//taking return date
var returnDate = document.getElementById("txtReturnDate").value;
var nowDate = new Date();
var today = '0' + nowDate.getDate() + '-0' + (nowDate.getMonth() + 1) + '-' + nowDate.getFullYear();
if (departureDate === today) {
//if departureDate is equal to today
alert("Departure date can not be today.");
} else if (departureDate == returnDate) {
//return date should be sfter departure date
alert("return date and departure date can not be same");
}
else if (departureDate > returnDate) {
//return date should be sfter departure date
alert("return date should be after departure date");
}
}
function validate() {
validateCity();
validateDate();
}
ASP.NET:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Assignment05.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</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>
<asp:Table ID="roundTrip" runat="server" style="display:none;" >
<asp:TableRow>
<asp:TableCell>From City</asp:TableCell>
<asp:TableCell>
<%-- textbox for from city --%>
<asp:TextBox runat="server" ID="txtFromCity"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>To City</asp:TableCell>
<asp:TableCell>
<%-- textbox for to city --%>
<asp:TextBox runat="server" ID="txtToCity"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>DEPARTURE DATE</asp:TableCell>
<asp:TableCell>
<%-- calender for DEPARTURE DATE --%>
<asp:TextBox runat="server" ID="txtDepartDate"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>RETURN DATE</asp:TableCell>
<asp:TableCell>
<%-- calender for RETURN DATE --%>
<asp:TextBox runat="server" ID="txtReturnDate"></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:Button Text="Submit" ID="btnSubmit" runat="server" OnClientClick="validate()" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<table id="multiCity" 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>
<input type="button" value="Add Flight" onclick="anotherFlight()" />
</td>
</tr>
</table>
<div id="flight" style="display:none;">
<table>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="From"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox12" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="To"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFlightToCity" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label14" runat="server" Text="Depart Date"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox14" runat="server" Text=""></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
</form>
<script src="Script.js"></script>
</body>
</html>