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
If you don't want the page to reload, you should take a look at the UpdatePanel Control: 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
Related
I am trying to develop an Ajax based website. where is installed ajax control toolkit on visual studio 2010. I created a page.
Here is the code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="QMSStandard.test2" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
</asp:CalendarExtender>
</div>
</form>
when I run this page its shows error
Error: AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure
the correct version of the scripts are referenced. If you are using an
ASP.NET ScriptManager, switch to the ToolkitScriptManager in
AjaxControlToolkit.dll.
Kindly suggest how can i use these controls.
first remove <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager> and then drag and drop <asp:ToolkitScriptManager> from Ajax Toolbox control
I am facing this issue in my asp.net application when using update panel. The error only with IE9 and for other browser application works fine. For debuging purpose and to conclude the issue only when using update panel I created a sample asp.net web site.
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="Button1" Text="Click Me" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
When I click on the button, I get the following JS error.
The JS error is
From IE's F12 developer tool,
SCRIPT5007: Unable to get value of the property 'tagName': object is null or undefined
frameTracker.js, line 2 character 395
From Visual Studio 2012,
But when I remove the update panel, the JS error is no longer.
Any idea to solve this problem?
Add following line in <head>
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
OR
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;OtherUA=4" />
OR
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> // is will always be rendered in IE's latest and greatest mode
I am having page in that when we click on create button its sends web request to get the all links but mean while it takes some time to get all links working or not so at that time I want to put image load
Button ID="btnRender" runat="server" Text="Page Render" OnClick="btnRender_Click" />
<asp:Button ID="btn_submit" runat="server" Text="Submit" OnClientClick="javascript:finda();" />
<asp:Button ID="btn_createlink" runat="server" Text="Create link" OnClick="btn_createlink_Click" />
i want to call on btn_createlink_Click" button when user clicks the image or text should appear
Without Ajax Tool:
This will call the loading image on button click and hide the image on page load completes.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<script type="text/javascript">
function ShowProgressBar() {
document.getElementById('dvProgressBar').style.visibility = 'visible';
}
function HideProgressBar() {
document.getElementById('dvProgressBar').style.visibility = "hidden";
}
</script>
</head>
<body onload="javascript:HideProgressBar()" >
<form id="form1" runat="server">
<div>
<div style="float:left;">
<asp:Button ID="btn_createlink" runat="server" Text="Create link" OnClick="btn_createlink_Click" OnClientClick="javascript:ShowProgressBar()" />
</div>
<div ID="dvProgressBar" style="float:left;visibility: hidden;" >
<img src="/images/progress_bar.gif" /> resolving address, please wait...
</div>
<br style="clear:both" />
</div>
</form>
</body>
</html>
You can make this happen with the help of Multithreading with the BackgroundWorker Component.
Have a look on Multithreading with Backgroundworker
Backgroundworker
C# backgroundworker
and this
You can call your loading.gif image in _Dowork method. Hope this helps.
EDIT:
You might want to have a look at HttpResponse.Flush
Forces all currently buffered output to be sent to the client. The Flush method can be called multiple times during request processing.
See the following link: HttpResponse.Flush Method
You could show a loading image and call this method every X number of loaded links.
OLD:
Since the question is missing information, I will assume that you are doing an Ajax call in order to get a collection of links from the server and update a table.
I would suggest you to use jQuery and follow this previous answer on SO in order to display an animated loading spinner when a request is made and hide it when it is completed.
See the link: Jquery Ajax Loading image
I've created one aspx page Default.aspx. It contains iframe with child.aspx. File Child.cs contains web methods which should be called by parent page.
As I understand I need to receive the instance of Child class so then I'll be able to them call. How can I make this?
I will be really appreciated for constructive solution,
Default.aspx (Parent page)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Parent_Child_Iframe._Default" %>
<!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>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btGetDataFromChild" runat="server" Text="Get Data from Child" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<iframe id="I1" height="300px" name="I1" src="child.aspx" width="400px"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Child.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="Parent_Child_Iframe.Child" %>
<!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>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Child.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Parent_Child_Iframe
{
public partial class Child : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string getResultData ()
{
return TextBox1.Text + TextBox2.Text;
}
}
}
So How I can call getResultData () from Child.aspx.cs by clicking Button on the parent page.
The main difficulty is that I can't use Javascript to collect the information from TextBoxes because the task is more complicated and I can use only server methods.
Thank you in advance,
Best wishes,
Greg.
Thats not really the way iframes work. Remember, HTTP is a stateless protocol, which means that each request for a page is an independent request, and won't have any context of the previous request. What I think you would need to do, is either request the Child.aspx page with specific form or request variables, and the Child page should output the correct page accordingly.
Could you explain what it is you want to achieve?
I am building an ASP.NET application and would like to use a master page to display branding and navigation info and move through several content pages. However, every time I try to load new content the entire page flickers. Is there anyway to avoid this?
Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Interface.Site" %>
<%# Register TagPrefix="customControl" TagName="NavigationBar" Src="NavigationControl/NavigationControl.ascx" %>
<!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>Registration</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="RegistrationMasterForm" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<%-- Contents of this div span the top of the page for branding --%>
<div id="BrandingBanner">
<asp:Image ID="Banner" runat="server"
ImageUrl="Images/BrandingBanner.png"/>
</div>
<%-- Navigation Bar, the contents of this div should remain unchanged --%>
<div id="NavigationBar">
<customControl:NavigationBar ID="navBar" runat="server"/>
</div>
<%-- Contains any forms or controls that may be uniquie to the page --%>
<div id="FormControls">
<div id="FormContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
</html>
Content:
<%# Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Interface.WebForm2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Check me out! I am content for the master page!
<asp:Button ID="Button1" runat="server" Text="Next" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
content code behind:
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("WebForm3.aspx");
}
}
The control event triggers a post back to your page, which typically creates the "blanking" effect that you see. To mitigate this, you may want to consider using some sort of Ajax solution to cause a partial postback or async postback to prevent the "blanking".
However in the particular case of your button click, if all you are trying to do is bring the use to another page, you really should just use an <a href="WebForm3.aspx"> tag and avoid using Response.Redirect.
You are redirecting the page in your codebehind.
This causes the browser to change pages, and redraw the whole thing, at least IIRC. I haven't used updatepanels in ages.
Isnt this only possible if you're using frames? As far as I'm aware the master page and content pages bind together on the serverside and push down the the client as a whole.
Where what you want sounds like using an page for branding and navigation with an inline frame to serve up your convent. This would prevent the outer page from "flickering" on the client side.
Edit: Though it is not the new way to do things. You'd want to look at something using maybe an UpdatePannel or other AJAX style design.
You don't need to move the updatepanel, your redirect is causing the browser to load a new page.