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.
Related
I have a master page Header.master which contains a logout button, due to this reason I have to include a form with run at server in my master form.
Again I am using a form in my page because I want to use controls and asp.net compiler says that you cant use controls with form tag with run at server.
Header.master
<form runat="server"><asp:ImageButton ID="btn_logout" runat="server" OnClick="btn_logout_Click" Height="22px" ImageUrl="~/img/logout.png" Width="43px" /></form>
My Page
<%# Page Title="" Language="C#" MasterPageFile="~/Header.Master" AutoEventWireup="true" CodeFile="student_registration.aspx.cs" Inherits="SCMS.student_registration" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="frm_sr" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</form>
</asp:Content>
Remove Form tag from your page (My Page)
<form id="frm_sr" runat="server">
Form tag in master page is already enclosing all the code written in page itself
(<asp:Content ID=...>)
How to implement two forms one in header and other in body of an ASP.net page with one master page, or how can I display the same form at both the places with only one form?
As to your question:
How to implement two forms one in header and other in body of an ASP.net page with one master page, or how can I display the same form at both the places with only one form?
If you need to choose: Concentrate on the second part.
The general method in Web Forms is to have only one <form> in your page, which is .NET's default <form> that surrounds all the content of your .aspx/.master page.
As the rules of HTML state: You cannot have two nested forms in an HTML page.
It means that if you want to have multiple <form> tags in your page, you will have to use it outside of .NET's default <form>.
Basically it means that all of the forms outside of .NET's one will not be part of the View State and you will not be able to use ASP.NET web controls.
However, if you are still considering the first method, you can read some more about it here:
Can we use multiple forms in a web page?
And you can see a really good example implementing it here:
Using multiple forms on an ASP.NET web forms page
Display the same form at two places
Basically, it is an essential part of Web Forms and is used many times.
You can create as many forms as you like by associating as many <asp:Button> elements as you like to different Click events.
To make two forms in the master, one in the header and one in the body:
Put the form contents in the two sections and use two different submit button handlers in the code behind (See example below)
Put in your MasterPage multiple ContentPlaceHolder elements. Use one for each place you would like to load content from your .aspx file.
In your .aspx refer to the ContentPlaceHolder elements with the corresponding ContentPlaceHolderIDs
In this example you can see one form in the Header section and another in the Body section like you wanted:
MasterPageTwoSections.master
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageTwoSections.master.cs" Inherits="MasterPageTwoSections" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style>
header {
background-color:red;
}
.body {
background-color:green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<header>
<asp:ContentPlaceHolder id="HeaderPlaceHolder" runat="server">
<%--Placeholder for the pages--%>
</asp:ContentPlaceHolder>
<h5>
This is form #1 from the master
</h5>
<asp:TextBox runat="server" ID="txtFirstForm"></asp:TextBox>
<asp:Button runat="server" ID="btnFirstFormSubmit" OnClick="btnFirstFormSubmit_Click"
Text="Submit first form" />
</header>
<section class="body">
<asp:ContentPlaceHolder id="BodyPlaceHolderBeforeForm" runat="server">
<%--Placeholder for the pages--%>
</asp:ContentPlaceHolder>
<h5>
This is form #2 from the master
</h5>
<asp:TextBox runat="server" ID="txtSecondForm"></asp:TextBox>
<asp:Button runat="server" ID="btnSecondFormSubmit" OnClick="btnSecondFormSubmit_Click"
Text="Submit first form" />
<asp:ContentPlaceHolder id="BodyPlaceHolderAfterForm" runat="server">
<%--Placeholder for the pages--%>
</asp:ContentPlaceHolder>
</section>
</div>
</form>
</body>
</html>
MaterPageTwoSections.master.cs
Notice the two submit handlers:
using System;
public partial class MasterPageTwoSections : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnFirstFormSubmit_Click(object sender, EventArgs e)
{
}
protected void btnSecondFormSubmit_Click(object sender, EventArgs e)
{
}
}
FirstPage.aspx
Notice Content2 refers to HeaderPlaceHolder in the MasterPage.Content3 and Content4 refer to BodyPlaceHolderBeforeForm and BodyPlaceHolderAfterForm
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPageTwoSections.master"
AutoEventWireup="true" CodeFile="FirstPage.aspx.cs" Inherits="FirstPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderPlaceHolder" Runat="Server">
<p>
This header content is from the FirstPage.aspx
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="BodyPlaceHolderBeforeForm" Runat="Server">
<p>
This body content is from the FirstPage.aspx
</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceHolderAfterForm" Runat="Server">
<p>
This body content is from the FirstPage.aspx
</p>
</asp:Content>
I have a Default.aspx and a web user control that adds in Default.aspx
Is there any way that i can change value of a div in Default.aspx from web user control?
for example :
<meta name="description" content="" id="MetaDescription" runat="server"/>
<meta name="keywords" content="" id="MetaKeywords" runat="server"/>
or :
<div id="test" runat="server"></div>
Thank you
You can change value of parent page's any control, I made my sample for label control by using the following code. I have made one sample please check it.
Main Page ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="UseUsercontrol.WebForm1" %>
<%# Register TagPrefix="My" TagName="UserInfoBoxControl" Src="~/WebUserControl1.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" />
<asp:Label ID="Label1" runat="server" Text="Main Page"></asp:Label>
</div>
</form>
</body>
</html>
User control ASCX:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="UseUsercontrol.WebUserControl1" %>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
User Control CS:
protected void Button1_Click(object sender, EventArgs e)
{
Label parentPanel = this.Parent.FindControl("Label1") as Label;
parentPanel.Text = TextBox1.Text;
}
Here i am updating parent page's Label control value with child's textbox latest value which enter by user.
Hope it will help you. if i am going wrong then please let me know i will try to update it.
You can access a dive from codebehind but you cannot manipulate it's inner html.
If you want to ad a div and it's inner html from codebehid,
Create a user control and add a literal control
<asp:Literal Text="" ID="literal" runat="server" />
Add it to the aspx page
From the code behind of the aspx page,
Literal litereal = MyUserControl1.FindControl("literal") as Literal;
litereal.Text = string.Format("<div id=\"test\" runat=\"server\">{0}</div>", "any text or html");
I have a scenario like this (simplified for this question):
I have a master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Ads.master.cs" Inherits="ActiveDigitalSignage.Ads" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="wrapper">
<form id="form1" runat="server">
<header>
</header>
<section>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</section>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="script" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
I have a default.aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Ads.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div><p>Test</p></div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">
</asp:Content>
The way its setup is, any header stuff can go in the "head" section. The main stuff goes in the "ContentPlaceHolder" and any javascript goes into the "script" place holder. Everything is working fine as is right now.
The issue I'm running into is I want to use a User Control (.ascx) in my Default.aspx page. However there is javascript in the user control. Because the jQuery is at the bottom of the page (in the "script" section), the javascript in the user user control is breaking. Is there a way to make the javascript in the user control render inside the "script" placeholder?
I know I can just copy and paste the code into a .js file and load the javascript in my master page. The problem with doing that is there are a bunch of ASP.NET tags (e.g. <%= %>) in the javascript that reference controls in the user controls, so copying and pasting this into a .js file would break this.
I'm thinking, off the top of my head, there might be a way in the global.asax page, during prerender, that can detect javascript in a user control and dynamically move it into the proper section?
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