如何在ASP.NET中单击按钮时不重新加载应用程序 [英] How to make the app not reload when clicking button in ASP.NET

问题描述

您好，我在asp.net中有一个项目，使用javascript来显示不同的文本框。但是，当我单击按钮时，网页只是重新加载它并且什么都不显示。单击提交按钮后如何才能重新加载网页？



我尝试过：



JavaScript代码：

函数onFlightChange（）{
 
 var flight = document.getElementById（ddFlights） 。值; 
 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; 
} 
 
} 
 
 
函数anotherFlight（）{
 var anotherFlight = document.getElementById（flight）; 
 anotherFlight.style.display =block; 
} 
 
函数validateCity（）{
 //从城市获取
 var fromCity = document.getElementById（txtFromCity）。value; 
 //上市
 var toCity = document.getElementById（txtToCity）。value; 
 //出发日期
 
 //检查两个城市是否为空
 if（fromCity ==|| toCity ==）{
 / /如果任何一个来自或来自城市的人是空的
 alert（输入From和To city。）; 
} 
 //检查两个城市
 else if（fromCity == toCity）{
 //显示消息
 alert（从城市到城市需要变得不同）; 
} 
 
} 
 
函数validateDate（）{
 var departureDate = document.getElementById（txtDepartDate）。value; 
 //获取返回日期
 
 var returnDate = document.getElementById（txtReturnDate）。value; 
 var nowDate = new Date（）; 
 var today ='0'+ nowDate.getDate（）+' -  0'+（nowDate.getMonth（）+ 1）+' - '+ nowDate.getFullYear（）; 
 
 if（departureDate === today）{
 //如果departureDate等于今天
 alert（出发日期不能是今天。）; 
}否则if（departureDate == returnDate）{
 //返回日期应该是离开日期后
 alert（返回日期和出发日期不能相同）; 
} 
否则if（departureDate> returnDate）{
 //返回日期应为出发日期后
提醒（返回日期应在出发日期之后）; 
} 
} 
函数validate（）{
 validateCity（）; 
 validateDate（）; 
} 

ASP.NET：

<％@ Page Language =C＃AutoEventWireup =trueCodeBehind =Home.aspx.csInherits =Assignment05.Home％> 
 
<！DOCTYPE html> 
 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head runat =server> 
< title>< / title> 
< / head> 
< body> 
< form id =form1runat =server> 
< div> 
< asp：DropDownList ID =ddFlightsrunat =serveronchange =onFlightChange（）> 
< asp：ListItem Value =0Text =请选择您的航班>< / asp：ListItem> 
< asp：ListItem Value =1Text =One-Way>< / asp：ListItem> 
< asp：ListItem Value =2Text =Round-Trip>< / asp：ListItem> 
< asp：ListItem Value =3Text =Multi-cities>< / asp：ListItem> 
< / asp：DropDownList> 
< br /> 
< br /> 
< table style =display：none; ID = 单向 > 
< tr> 
< td> 
< asp：Label ID =Label1runat =serverText =From>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox1runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label2runat =serverText =To>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox2runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label3runat =serverText =Depart Date>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox3runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< / table> 
< asp：表ID =roundTriprunat =serverstyle =display：none; > 
< asp：TableRow> 
< asp：TableCell>来自City< / asp：TableCell> 
< asp：TableCell> 
<％ - 来自城市的文本框 - ％> 
< asp：TextBox runat =serverID =txtFromCity>< / asp：TextBox> 
< / asp：TableCell> 
< / asp：TableRow> 
< asp：TableRow> 
< asp：TableCell> To City< / asp：TableCell> 
< asp：TableCell> 
<％ - 城市的文本框 - ％> 
< asp：TextBox runat =serverID =txtToCity>< / asp：TextBox> 
< / asp：TableCell> 
< / asp：TableRow> 
< asp：TableRow> 
< asp：TableCell> DEPARTURE DATE< / asp：TableCell> 
< asp：TableCell> 
<％ -  DEPARTURE DATE的日历 - ％> 
< asp：TextBox runat =serverID =txtDepartDate>< / asp：TextBox> 
< / asp：TableCell> 
< / asp：TableRow> 
< asp：TableRow> 
< asp：TableCell>返回日期< / asp：TableCell> 
< asp：TableCell> 
<％ -  RETURN DATE的日历 - ％> 
< asp：TextBox runat =serverID =txtReturnDate>< / asp：TextBox> 
< / asp：TableCell> 
< / asp：TableRow> 
< asp：TableRow> 
< asp：TableCell> 
< asp：Button Text =SubmitID =btnSubmitrunat =serverOnClientClick =validate（）/> 
< / asp：TableCell> 
< / asp：TableRow> 
< / asp：表> 
 
< table id =multiCitystyle =display：none;> 
< tr> 
< td> 
< asp：Label ID =Label8runat =serverText =From>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox8runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label9runat =serverText =To>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox9runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label10runat =serverText =Depart Date>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox10runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label11runat =serverText =Return Date>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox11runat =serverText =>< / asp：TextBox> 
< / td> 
 
< / tr> 
 
< tr> 
< td> 
< input type =buttonvalue =添加航班onclick =anotherFlight（）/> 
< / td> 
< / tr> 
< / table> 
 
< div id =flightstyle =display：none;> 
< table> 
< tr> 
< td> 
< asp：Label ID =Label12runat =serverText =From>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox12runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label13runat =serverText =To>< / asp：Label> 
 
< / td> 
< td> 
< asp：TextBox ID =txtFlightToCityrunat =serverText =>< / asp：TextBox> 
 
< / td> 
< / tr> 
< tr> 
< td> 
< asp：Label ID =Label14runat =serverText =Depart Date>< / asp：Label> 
< / td> 
< td> 
< asp：TextBox ID =TextBox14runat =serverText =>< / asp：TextBox> 
< / td> 
< / tr> 
< / table> 
< / div> 
 
< / div> 
< / form> 
< script src =Script.js>< / script> 
< / body> 
< / html> 

解决方案

让函数返回false

 function onFlightChange（）{
 
 //你的代码在这里
 
返回false; 
 
} 

并更新您的属性以便返回;

< asp：DropDownList ID =ddFlightsrunat =serveronchange =return onFlightChange（）; > 

除非您启用了自动回复功能，否则通常不应进行回发，因此其他地方也可能存在问题。 / blockquote>

为什么人们在学习ASP.NET？没有工作...



在您调用的函数中返回false以阻止事件冒泡并导致刷新

Hello, I have a project in asp.net using javascript to display different text boxes. However, when I click the button, the web page is just reloaded it and shows nothing. How can I make the web would not reload once clicking the submit button?

What I have tried:

JavaScript Code:

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>

解决方案

Make the function return false

function onFlightChange() {

	// your code here

    return false;
	
}

and update your attribute to return that too;

<asp:DropDownList ID="ddFlights" runat="server" onchange="return onFlightChange();" >

It shouldn't normally do a post-back unless you have autopostback enabled, so there might be issues elsewhere too.

why are people learning ASP.NET? There's no jobs...

return false in the function you call to stop your event bubbling up and causing a refresh

这篇关于如何在ASP.NET中单击按钮时不重新加载应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！