简体   繁体   中英

ASP.NET page should not post back the whole page on Submit

I have an ASP.NET page with a Submit button. When I click the button my code runs and then the page reload/refresh....the whole page gets posted back.

What must I use or do to prevent the page from reload? AJAX? How would this be done?

Code examples would be great!

Check the below code with AJAX and Without AJAX

Case 1 With AJAX

In this we added following controls

1. Script Manager
2. Ajax Update Panel with Trigger and Content Template
3. Button

In this case, you will notice that on clicking the button, the controls which are outside the Update Panel will not be updated. That means controls inside the Update Panel will be updated on clicking the button. That means complete page will not be refreshed. I hope this fulfill your requirement....


Output

Date outside the update panel will not be updated and date inside the update panel will only be updated because it is inside the update panel so complete page will not be refreshed.


Source Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%=DateTime.Now %>
        <br />
        <asp:ScriptManager ID="scr" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="Upd" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <%=DateTime.Now %>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="btn" runat="server" Text="Click Me" />
    </div>
    </form>
</body>
</html>

Case 2 Without AJAX

The below case will also update the date but this time page will be refreshed completely due to absence of Update Panel <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%=DateTime.Now %>
        <asp:Button ID="btn" runat="server" Text="Click Me" />
    </div>
    </form>
</body>
</html>

Hope this article will help you understand the quick basics

如果您不想重新加载页面,则应该查看UpdatePanel控件: http//msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx

If you want to avoid that your code is run again you can do in your page_load event

If(!page.IsPostBack())
{
  your code here
}

and ajax to avoid reload in jquery with the example here

or with asp ajax panel

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM