asp.net images in image buttons to remain stationary - c#

I have 3 image buttons on the left, top and right of the main body content.
I want these fixed in position so that when I scroll up or down, these remain in position.
This page has a master page. I'm using ContentPlaceHolders:
<asp:Content ID="Content1" ContentPlaceHolderID="left_col_fbodyContentPlaceHolder"
runat="Server">
<asp:ImageButton ID="LeftImageButton" runat="server" Width="233px" Height="100%" ImageUrl="~/images/100_3445sr194k.jpg" PostBackUrl="~/test1.aspx" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="upper_body_ContentPlaceHolder" runat="Server">
<asp:ImageButton ID="TopImageButton" runat="server" Width="770px" Height="40px" ImageUrl="~/images/100_3496sr194k.jpg" PostBackUrl="~/test1.aspx" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="right_col_fbodyContentPlaceHolder"
runat="Server">
<asp:ImageButton ID="RightImageButton" runat="server" Width="233px" Height="100%" ImageUrl="~/images/100_3496sr194k.jpg" PostBackUrl="~/test1.aspx" />
</asp:Content>
If it's possible, I'm hoping someone can show me how.

AjaxControlToolkits's AlwaysVisibleControl solves your problem. For more details see this

Option 1.: use Fixed position in css
<div class='fixedDiv'>
<asp:ImageButton ID="LeftImageButton" runat="server" Width="233px" Height="100%" ImageUrl="~/images/100_3445sr194k.jpg" PostBackUrl="~/test1.aspx" />
</div>
In css:
.fixedDiv{
position:fixed;
}
Another option is set fixed height to body, and overflow:auto to the div which contains the content. the scroll appears on the content div while the screen stay fixed.
<asp:Content ID="Bodycontent" ContentPlaceHolderID="BodyContent"
runat="Server">
<div style='height:900px;overflow:auto'>
</div>
</asp:Content>

Related

Modal Popup Extender Not Working

I have this piece of code in my aspx page open a modal popup. I found this code online but for some reason the page refreshes and the popup does not appear. I tried several code snippets but the issue keeps on occurring. It must be an issue with my page.
This is my .aspx code
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<style type="text/css">
.ModalPopupBG
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.popup
{
background:white;
}
</style>
<script>
function onAgree() {
alert("Thank you for your approval")
}
function onDisagree() {
alert("I appreciate your feedback; i will work harder next time")
}
</script>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<asp:Button ID="Button1" runat="server" Text="feedback"/>
<asp:Panel ID="Panel1" runat="server" CssClass ="popup">
please give me your feedback about the paragraph above?
<hr />
<asp:Button ID="btnagree" runat="server" Text="Agree" />
<asp:Button ID="btndisagree" runat="server" Text="Disagree" />
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
TargetControlID ="Button1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="btnagree"
CancelControlID="btndisagree"
OnOkScript="onAgree()"
OnCancelScript ="onDisagree()">
<Animations>
<OnShown>
<Fadein />
</OnShown>
<OnHiding>
<Fadeout />
</OnHiding>
</Animations>
</asp:ModalPopupExtender>
</div>
</asp:Content>

Content is not appearing in PlaceHolder?

I have the below Place holder between the head tags on a master page which all pages at some stage inherit from:
<asp:ContentPlaceHolder ID="cphHead" runat="server" />
I then have the below content on a page that inherits from the master page:
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">
<asp:Literal ID="litMetaTitle" runat="server" />
<asp:Literal ID="litMetaDescription" runat="server" />
<asp:Literal ID="litMetaKeywords" runat="server" />
<asp:ContentPlaceHolder ID="CphHeaderContent" runat="server" />
</asp:Content>
As you can see this has another place holder in it, from this page inherits another page with the below content:
<asp:Content ID="ContentHeader" runat="server" ContentPlaceHolderID="CphHeaderContent">
<asp:Literal ID="TheId" runat="server" />
</asp:Content>
The literal is being built with a string builder in the code behind:
private void xxx(Order order)
{
//...Building string with string builder
TheId.Text = xxx.ToString();
}
This literal is not appearing in the head of this page when I view it in the browser? Does anyone have any idea as to why? If I add something like below between the content tags:
<asp:Content ID="ContentHeader" runat="server" ContentPlaceHolderID="CphHeaderContent">
<asp:Literal ID="TheId" runat="server" />
<script src="/Media/Javascript/xxx.js"></script><--ADDED!
</asp:Content>
The <script src="/Media/Javascript/xxx.js"></script> will appear in the head? Its just the literal that wont? Why is this?

UpdatePanel cause error: PageRequestManagerServerErrorException

I have a page that works fine with multiple a grid and multiple buttons. The page works fine until I add an asp:UpdatePanel. Then I get the following message pushing any of my buttons:
Sys.WebForms.PageRequestManagerServerErrorException: Input string was not in a correct format.
There is no javascript on the page just straight html.
Here is the page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPages/Site.Master" AutoEventWireup="true"
CodeBehind="TestUpdatePanel.aspx.cs" Inherits="ASCWeb.TestUpdatePanel" %>
<asp:Content ID="mHeadContent" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="mBodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="pnlUpdate" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtUser" runat="server" />
<asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/Images/Add.png" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
If I take the TextBox out, it works fine. Nothing is in the code behind.
What would cause this?
Thanks
As per experience, I only encounter that exception when calling Javascript from codebehind, like when using ScriptManager.RegisterClientScriptBlock() to call window.alert(), for instance. But for this issue, I think this resolves it: http://forums.asp.net/t/1823287.aspx/2/10.

fire a textbox's OnTextChanged while enabled=false

I have an ajax toolkit calendar extender attached to my textbox and i a trying to fire the OnTextChanged after the date was entered into the textbox.
The thing is i don't want the user to enter data manually so i disabled the textbox but the event won't fire for a disabled text box.
is there anyway around it? i thought about changing to a label but is doesn't have OnTextChanged event.
Thanks
<asp:TableCell CssClass="cssWidth" Width="150px">
<asp:CalendarExtender ID="CalendarExtender1" PopupButtonID="Image1" runat="server" TargetControlID="TextBoxAddDate" Format="dd/MM/yyyy"></asp:CalendarExtender>
<asp:TextBox ID="TextBoxAddDate" ReadOnly="true" CssClass="cssWidth" ToolTip="תאריך הוספה" runat="server" Style="font-size: large;background-color:aliceblue;" AutoPostBack="true" AutoCompleteType="Search" MaxLength="0" TextMode="SingleLine" OnTextChanged="txtSearch_TextChanged" ViewStateMode="Enabled" autocomplete="off" >
</asp:TextBox>&nbsp
<asp:ImageButton runat="Server" ID="Image1"
ImageUrl="~/Calendar_scheduleHS.png" AlternateText="Click to show calendar" /><br />
</asp:TableCell>
Can you use ReadOnly instead of Enabled = false?
UPDATE:
Ok, this is the complete solution that worked for me:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
function dateSelectionChanged(x) {
debugger;
javascript: __doPostBack('TextBoxAddDate', '')
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CalendarExtender ID="CalendarExtender1" PopupButtonID="Image1" runat="server" TargetControlID="TextBoxAddDate" Format="dd/MM/yyyy" OnClientDateSelectionChanged="dateSelectionChanged" ></asp:CalendarExtender>
<asp:TextBox ID="TextBoxAddDate" CssClass="cssWidth" ToolTip="תאריך הוספה" runat="server" Style="font-size: large;background-color:aliceblue;" AutoCompleteType="Search" MaxLength="0" TextMode="SingleLine" OnTextChanged="txtSearch_TextChanged" ViewStateMode="Enabled">
</asp:TextBox>&nbsp
<asp:ImageButton runat="Server" ID="Image1"
ImageUrl="~/Calendar_scheduleHS.png" AlternateText="Click to show calendar" /><br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
It seems that the CalendarExtender "steals" away the events from the texbox it uses.
Using this approach I managed to fire up the OnTextChanged event and the handler txtSearch_TextChanged gets executed.
Did you make the textbox ReadOnly?

How to use form with method="post" in asp.net web form

I am using ajax toolkit asyncFileUpload control
I had problem that my server side events does not fired and found this posts Hidden/Shown AsyncFileUpload Control Doesn't Fire Server-Side UploadedComplete Event
I inserted my uploader inside form and with this attributes enctype="multipart/form-data" method="post"
This uploader is inside my webs form which is inside master page
After adding this attributes i got this error
A page can have only one server-side Form tag.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: A page can have only one server-side Form tag.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace:
And here is my web form
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<form id="Form1" enctype="multipart/form-data" method="post" action="target_url"
runat="server">
<div id="Div1" runat="server">
Just some time to make sure that the page doesn't get reloaded after uploading:
<%=DateTime.Now %><br />
<ajaxToolkit:AsyncFileUpload ID="FileUpload" runat="server" OnUploadedComplete="FileUpload_UploadCompleted"
OnClientUploadComplete="FileUpload_ClientUploadCompleted" OnClientUploadError="uploadError"
OnLoad="FileUpload_OnLoad" />
<asp:Image runat="server" ID="imgUpload" src="" />
<asp:Label runat="server" ID="lblerror" Text="" />
</div>
</form>
</asp:Content>
Your MasterPage already has a form element. Nested forms aren't allowed...
I don't know much about the ajaxToolkit:AsyncFileUpload but, since it is a server control, it should change the parent forms properties. Have you tried removing the form like the code below?
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Div1" runat="server">
Just some time to make sure that the page doesn't get reloaded after uploading:
<%=DateTime.Now %><br />
<ajaxToolkit:AsyncFileUpload ID="FileUpload" runat="server" OnUploadedComplete="FileUpload_UploadCompleted"
OnClientUploadComplete="FileUpload_ClientUploadCompleted" OnClientUploadError="uploadError"
OnLoad="FileUpload_OnLoad" />
<asp:Image runat="server" ID="imgUpload" src="" />
<asp:Label runat="server" ID="lblerror" Text="" />
</div>
</asp:Content>
Another Possible Solution:
"Pop" a "modal" form that just contains your form with the file upload control. This will remedy the nested forms issue. But, it does changed the functionality.
As a very dirty hack try adding adding a <form></form> in front of your form, and take the runat="server" out of your nested form.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
**<form></form>**
<form id="Form1" enctype="multipart/form-data" method="post" action="target_url"
>
<div id="Div1" runat="server">
Just some time to make sure that the page doesn't get reloaded after uploading:
<%=DateTime.Now %><br />
<ajaxToolkit:AsyncFileUpload ID="FileUpload" runat="server" OnUploadedComplete="FileUpload_UploadCompleted"
OnClientUploadComplete="FileUpload_ClientUploadCompleted" OnClientUploadError="uploadError"
OnLoad="FileUpload_OnLoad" />
<asp:Image runat="server" ID="imgUpload" src="" />
<asp:Label runat="server" ID="lblerror" Text="" />
</div>
</form>
</asp:Content>
In the past this has worked for me - when forced to work with WebForms. I don't know why but I find that quite a lot with WebForms.
You really should switch to MVC if you want to write code like this however. Even if this does work it's not what I'd call a solution. WebForms just isn't designed to do this.

Categories