Delay on Modal pop up in master page - web forms - c#

My modal pops up with a delay and its weird. In debug mode, the line ModalPopupExtender2.Show(); is already executed.
Master.Master.cs
protected void Page_Load(object sender, EventArgs e)
{
ModalPopupExtender2.Show();
}
Master.Master
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Label ID="lbldummy" runat="server" Text=""></asp:Label>
<act:ModalPopupExtender ID="ModalPopupExtender2" runat="server" BackgroundCssClass="modalpop" TargetControlID="lbldummy" PopupControlID="button">
<div class="modal-dialog modal-md modal-scrollable" id="button" runat="server">
// some content
</div>
</form>
Why my modal pop up slowly? I think within 2-3 seconds.
For troubleshooting, I already tried to show ModalPopupExtender using javascript and it works fine.
Thank you.

As per the ASP.NET - Life Cycle, Page Load is called quite soon. Before the rest of the server function calls are completed and then your browser finishes rendering html on the client, popup is not shown.
That's I guess is the source of the delay until you provide what's happening on the rest of the code.

Related

ASP.NET Webform OnClick event not firing properly

I have a Default page (initial landing page) with a bunch of asp controls and everything works great. I also have an Admin page with one asp button control (I simplified for the post). Both are wrapped in form element on a Site.Master page. The button click event does not fire on my Admin page. Here is my button event and page code/code behind:
Page code
<%# Page Title="Admin1" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="Admin1.aspx.cs"
Inherits="HPRMWebClientReporting.Admin1" %>
<asp:Content runat="server" ID="AdminContent"
ContentPlaceHolderID="AdminContent">
<asp:Button ID="ButtonGo" runat="server" Text="Button" Width="111px"
OnClick="ButtonGo_Click" />
</asp:Content>
Code Behind
public partial class Admin1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void ButtonGo_Click(object sender, EventArgs e)
{
this.Context.Items["Msg"] = "It worked!!!.";
Server.Transfer("MessagePage.aspx");
}
}
Here is what happens:
Goes through Page_Load of Default page
Goes through Page_Load of Site.Master page
Refreshes my site and shows the Default page
At no point does it go my click event or Page_Load of my Admin page when the button is clicked? The button click should be taking it to the MessagePage page.
This is driving me crazy. I did try turning Causes Validation to false on the button with no luck. Any ideas?
Note: Also, maybe this will help someone determine what I'm doing wrong. I changed the Page Code so it does not use the MasterPageFile Site.Master and I just wrapped the button in its own form element and it worked fine but I don't want it to work that way as I want to use the Master page.
I found something that worked although I am not entirely sure why without further research. In my Site.Master page and in the form element I mentioned in the post I pulled out the action="/" and now my controls work on Admin page as I expected them too.
<form id="Form1" action="/" method="post" runat="server">
<asp:ContentPlaceHolder ID="HomeContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContactContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="AboutContent" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="AdminContent" runat="server">
</asp:ContentPlaceHolder>
</form>

How to change the form action in C# .NET through code?

I am working on a project in C# .NET that allows me only one form in the .aspx file.
<form id="form1" runat="server" action="#1">
How can I change the form action through the C# code in a method?
I have tried this:
protected void Button1_Click(object sender, EventArgs e)
{
form1.Action = "#2";
}
but it didn't work. Thanks in advance...
Based on the comments to you question. asp:Panel Controls could help you out.
A very rough example
ASPX:
<form id="form1" runat="server">
<asp:Panel id="Form1" runat="server">
<!-- Form 1 Stuff -- >
<asp:Button ID="Button1" runat="server" Text="Submit"
OnClick="Button1_Click" />
</panel>
<asp:Panel id="Form2" runat="server" Visible="false">
<!-- Form 2 Stuff -- >
<asp:Button ID="Button2" runat="server" Text="Submit"
OnClick="Button2_Click" />
</panel>
</form>
C#
protected void Button1_Click(object sender, EventArgs e)
{
//HIde "Form"1
Form1.Visible = false;
//Show "Form"2
Form2.Visible = true;
//Do other stuff
}
protected void Button2_Click(object sender, EventArgs e)
{
//Do Final Processig
}
Also look at the DefaultButton property of the Panel
(Moving this to the top because it's an answer to the newly understood question. It's not how to change the form action, but how to have multiple forms.)
If you want a server form on a page that already has a server form then perhaps that second "form" should be a User Control. That way it sits inside the host page's server form but doesn't require its own form. And it's self-contained, able to contain whatever logic it needs when handling a postback.
Here's an example of a simple User Control. You can create one from Add > New Item > Web > Web Forms User Control.
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="OtherForm.ascx.cs" Inherits="WebApplication1.OtherForm" %>
<label for="<% = OtherFormTextInput.ClientID %>">
This is some other form on the same page
</label>
<asp:TextBox runat="server" ID="OtherFormTextInput"></asp:TextBox>
<asp:Button runat="server" ID="Submit" Text="Submit this other form"/>
It looks like an .aspx page but it has no form. It can still have its own code behind which can interact with with the other server controls it contains, just like an .aspx page would.
Then you add that control to your "main" page:
<%# Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!-- Register the user control -->
<%# Register TagPrefix="uc" TagName="other" Src="~/OtherForm.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<!-- This form has its own stuff, but also contains the "other" form. -->
<uc:other runat="server" ID="TheOtherForm"></uc:other>
</form>
</body>
</html>
I recommend this over using panels (which still works) because if you're putting two forms on one page, it's likely that you might at some point want to move the secondary form to another page or re-use it. This approach keeps it completely self-contained. Its code-behind isn't in the same file as the the .aspx page. You can place this on as many pages as you want.
Original "literal" answer which addresses the question as originally understood.
The runat="server" form exists entirely for the purpose of allowing ASP.NET to interact with the page and its server controls during postbacks. It's central to the way webforms works. If you change the action then technically what you have isn't a webforms page any more.
That's fine (I don't even like webforms) but it can lead to some weird behavior. If you have controls that trigger postbacks then normally they'd be handled on the same page and your user would just see a (hopefully) fast refresh. Now they might get sent to another page.
What if you just removed that form entirely and added your own form instead? Then your .aspx page will just behave more like an .html page.
Having added all the disclaimers about why not to do it, you can change the action using JavaScript. Here's a sample:
<%# Page Language="C#" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" ClientIDMode="Static">
<asp:Button runat="server" text="Causes postback"/>
<asp:CheckBox runat="server" AutoPostBack="True"/>
</form>
<script>
document.getElementById("form1").action = "http://stackoverflow.com";
</script>
</body>
</html>
Some browsers might not allow changing the form's action.
I put the checkbox there just for fun (I must be really bored) to show the odd side effects it could have, that you might click on a checkbox and get redirected to a different page.
You can write a response.write() in your Asp.net side that print some javascript or jQuery code! As #Scott Hannen wrote some javascript like this :
Response.Write("<script>document.getElementById('YOURFORMID').action = 'YOUR URL';</script>");
or with jQuery
Response.Write("<script>$('#YOUR FORM ID').attr('action', 'YOUR URL');</script>");
btw if you have access to .html or .js files u can directly put this jQuery code without any C# code!

Update ASP.net UpdatePanel Control with a thread in C#

What I'm trying to do: I'm trying to update an image (in a UpdatePanel control) every .5 seconds using a thread in the code behind the web page (I'm using a ASP.NET Web Forms Site Project)
What I have so far: I have mock images on the screen are the moment. I also have a thread written that gets called with a button click.
Here is that code:
protected void Button1_Click(object sender, EventArgs e)
{
DoThing();
}
public void DoThing()
{
Thread thread = new Thread(() => {
while (true)
{
UpdatePanel1.Update();
System.Threading.Thread.Sleep(500);
if (Image2.ImageUrl == "~/Images/Water3.png")
{
Image2.ImageUrl = "~/Images/Water1.png";
continue;
}
if (Image2.ImageUrl == "~/Images/Water1.png")
{
Image2.ImageUrl = "~/Images/Water2.png";
continue;
}
if (Image2.ImageUrl == "~/Images/Water2.png")
{
Image2.ImageUrl = "~/Images/Water3.png";
continue;
}
}
});
thread.Start();
thread.Join();
}
and here is my HTML:
<%# Page Title="Home Page" Language="C#" Async="true" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Image ID="Image1" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Fauset.png"/><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/><br />
<asp:Image ID="Image2" runat="server" Height="96px" Width="32px" ImageUrl="~/Images/Water1.png" OnLoad="Image2_Load"/><br />
<asp:Image ID="Image3" runat="server" Height="32px" Width="32px" ImageUrl="~/Images/Bucket.png"/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
</asp:Content>
Problem: When i click the button the page is currently doing nothing. When i put a break point in the thread the thread is running. The page just isn't updating for some reason.
Notes: Im trying to stay away from JS, Jquery and JSON as much as possible because i barley know them but if i need to use them i need to use them
Once the page has rendered, you can't change it from code still running on the server without making use of some sort of client-side technology (Javascript/jQuery, etc).
In this case in particular, where you're trying to implement what effectively seems like an image slider, you can do it very easily using jQuery and one of the many slider plugins, which would also give you animated transitions.
You can't do the thing you want to do the way you want to do it. Server side code runs on the server, client side code runs on the client. Updating the content of a server control on the server will only reflect on the client if you can make the client reload the page or the control you've modified. There are many ways to reload pages/parts of the page, but in this case you're best off using some client side JavaScript.
It looks like the images are static, so you can probably get away with using a simple jquery image slider. There are many free ones available, find one that will change the image every 5 seconds and use that instead of trying to build a Goldberg machine just because you're more comfortable with doing it in one way.
This functionality is built in. All you have to do is add an Asynchronous Trigger and timer to your update panel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="upOnLoading" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<ControlToUpdate>
....
</ControlToUpdate
<asp:Timer ID="Timer1" runat="server" Interval="2000" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
and your method...
protected void upOnLoading(object sender, EventArgs e)
{
...
}
While your users are navigating your page elsewhere, upOnloading() will be executed every Timer.Interval milliseconds.

WebForms submitting specific form with enter key (not clicking)

Say I have one full-page form, but within the form, there are two or more events that need to take place on submission: Login & Register
Site.Master:
<%# Master Language="C#" AutoEventWireup="true"
EnableViewState="true" CodeBehind="Site.Master.cs"
Inherits="Site.SiteMasterPage" %>
<!doctype>
<html>
<head runat="server">
<%-- stuff --%>
</head>
<body>
<form ID="MainForm" action="" runat="server">
<asp:Login id="LoginControl" runat="server" />
<asp:CreateUserWizard id="RegisterControl" runat="server" />
</form>
</body>
</html>
If my cursor is focused inside of an input type="text" for asp:Login, and I hit Return (with javascript off), the page submits, but I am not logged in.
The same thing happens when I attempt to register (filling out the createUserWizard and hitting the Return key instead of actually clicking "Register", firing some event)
Is there any non-JavaScript solution for getting the Return key to submit the proper, currently focused portion of the form?
The panel control allows you to define a default button within the scope of it's contents:
<asp:Panel runat="server" DefaultButton="submitButtonA">
<asp:LinkButton ID="submitButtonA" runat="server" Text="Submit A"/>
</asp:Panel>
<asp:Panel runat="server" DefaultButton="submitButtonB">
<asp:LinkButton ID="submitButtonB" runat="server" Text="Submit A"/>
</asp:Panel>
The default button sounds like it might be your friend tonight - http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlform.defaultbutton.aspx
Actually it might not be, I haven't ever tried it with no Javascript.

How do I keep the master page from flickering?

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.

Categories