i have a div tag within a content tag as i am using a masterpage which has the forms and body tags.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<div id="xxx" style="overflow:scroll; height:450px;">
<asp:GridView ID="GridView1" runat="server" ...>
</asp:GridView>
</div>
</Content>
I wish to maintain the scroll position of the div when any postback happens.
There are jscripts when i search for it but i dont know
how do i apply them with the masterpage.
please help if there is an easier way. or how to use javascript with the above code.
Any help is appreciated.. thanks
You can use AJAX to remove postbacks which will keep your position. More specifically you can take a look at the UpdatePanel control.
Update:
A non-AJAX solution would be to add the following attribute in your page tag.
<%# Page MaintainScrollPositionOnPostback="true" %>
Try this it worked for me.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<div id="divScroll" style="overflow:auto; height:450px;">
<asp:GridView ID="GridView1" runat="server" ...>
</asp:GridView>
</div>
</Content>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
</script>
</asp:UpdatePanel>
javascript file add the following code:
var scrollTop;
function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divScroll');
scrollTop = m.scrollTop;
}
function EndRequestHandler(sender, args) {
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
Related
I'm working on an ASP.NET site and I'm using HttpGetRequest & HttpGetResponse to place the contents of https://news.google.com/news into a literal control on one of my pages.
The problem is that the stream is covering the entire page. I can't manage to control the size with a div or container. So the stream from the literal is covering a label that is above it (in its own div) and a menu that's inherited from SiteMaster.Master.
How can I keep the menu and label above the literal control?
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
HttpWebRequest googRequest = (HttpWebRequest)HttpWebRequest.Create("https://news.google.com/news");
HttpWebResponse resp = (HttpWebResponse)googRequest.GetResponse();
string googNews = new System.IO.StreamReader(resp.GetResponseStream()).ReadToEnd();
Literal1.Text = googNews;
Label1.Text = DateTime.Now.ToLongTimeString();
}
ASP:
<%# Page Title="" Language="C#" MasterPageFile="~/SiteMaster.Master" AutoEventWireup="true" CodeBehind="Literally.aspx.cs" Inherits="DNut.Literally" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p>
<asp:Label ID="Label1" runat="server" Font-Names="Arial" Font-Size="Larger" Font-Italic="true"></asp:Label>
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</asp:Content>
The content, based on how you are receiving it, will likely include an html tag, head tag and body tag. This isn't valid markup to inject into the middle of an existing html document. The typical way to include a whole page like this in another html document is via an iframe tag.
Iframe's are frowned on a bit in the web dev world and not used alot but in this case it's its a good fit for what you are trying to do. It's also helps protect your site against Cross-site scripting (XSS) attacks (verses trying to inject markup into a div via literal tag.
With an iframe tag you set the 'src' attribute to the url you want to display and you won't need the literal or the related c# code to set it.
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<iframe src='https://news.google.com/news'></iframe>
</asp:Content>
You can style up the iframe to have a desirable height and width.
I have an update panel on a page which contains nested Panels. It has a Panel with a small form (like a log-in form) and a button. When the button is clicked, a few conditions are checked, and if passed, the first Panel is hidden and the second Panel with a larger form is displayed.
Because the larger form can take some time to load (it pulls data from other sources), the small form panel contains an UpdateProgress control.
All of this works fine.
Then I added a nested Panel within the login form Panel, placed under the UpdateProgress that will display a meaningful error message, such as if the login code is incorrect. This displays as expected. However, if the user then corrects their information and clicks the button again, the UpdateProgress displays properly, but the error message remains visible, even though I try to set it to Visible = false in code-behind.
This page does not use a master page.
Debugging shows that the Visible property does get set to false, although it still displays in the browser.
ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="custom_Default" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<!-- meta and link tags -->
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<!-- h1 and all that -->
<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="pnlUpdate" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlLogin" runat="server">
<!-- label and text field -->
<asp:Button ID="btnBegin" runat="server" OnClick="btnBegin_Click" />
<asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpdate">
<ProgressTemplate>
<p>Loading, please wait... </p>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Panel ID="pnlMessage" runat="server" Visible="false">
<asp:Literal ID="ltlMessage" runat="server" />
</asp:Panel>
</asp:Panel>
<asp:Panel ID="pnlMainForm" runat="server" Visible="false">
</asp:Panel>
<asp:Panel ID="pnlConfirmation" runat="server" Visible="false">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<!-- javascript - jquery and bootstrap -->
</body>
</html>
Code Behind (I've tried setting visible to false in the Page_Load, in the pnlUpdate_Load event, and in the btnBegin_Click event - but that error message will not go away.
protected void btnBegin_Click(object sender, EventArgs e)
{
pnlMessage.Visible = false;
Page.Validate();
if (Page.IsValid)
{
// check some conditions. if fails:
ltlMessage.Text = "Reason for failure";
pnlMessage.Visible = true; // works
}
}
I have tried removing the Visible="false" from the pnlMessage on the ASPX page and placing it in the code behind in Page_Load but I still can't hide it after the message has already been displayed.
How can I hide the pnlMessage Panel after the btnBegin is clicked the second time?
I managed to find the solution to this. Apparently there isn't a way to do it in .NET - it has to be done in JavaScript.
Here is the code I used to accomplish this.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_endRequest(endRequest);
var _postBackElement;
function initializeRequest(sender, e) {
if (prm.get_isInAsyncPostBack()) {
e.set_cancel(true);
}
$get('pnlMessage').style.display = 'none';
}
function endRequest(sender, e) {
$get('pnlMessage').style.display = 'block';
}
</script>
I know this must sound really basic but I'm really stumped here. What I'm trying to do is to show a Hyperlink once a process has completed. And this process is the AsyncFileUpload. In the ASPX page, I want to create an but have it hidden on the initial page load. If I set the Style="display: none;" seems to work but after the file upload, nothing I do, will make the control visible again. When the file is uploaded, it calls a function called FileUploadComplete. It's in here that no matter what I do, the Hyperlink won't display.
Any help is greatly appreciated :)
Thank you,
dave
Here is the ASPX Code (with recently added javascript)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="OptionsPlaceHolder" runat="server">
<script language="javascript" type="text/javascript">
function ShowLink() {
$("#openFile").show();
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server">
<asp:UpdatePanel ID="updImportFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="pageHeader">
<asp:Literal runat="server" ID="pageTitle" Text="<%$ Resources:Resources, ImportFile %>" />
</div>
<ajaxToolkit:AsyncFileUpload ID="FileUpload1" runat="server" Width="600px"
UploaderStyle="Traditional" OnUploadedComplete="FileUploadComplete" ThrobberID="throbber"
CompleteBackColor="#E9F2FD" OnClientUploadComplete="ShowLink" />
<asp:Image runat="server" ID="throbber" ImageUrl="images/loading.gif" />
<br />
<asp:Hyperlink runat="server" ID="openFile" NavigateUrl="~/OpenFile.aspx" Text="Open"
style="display:none;"/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
And here is the code behind:
protected void FileUploadComplete(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string importName = Server.MapPath(#"Uploads\") + FileUpload1.FileName;
FileUpload1.SaveAs(importName);
// Import the JSA
JSA jsa = new JSA();
jsa.Import(importName);
// Show the Hyperlink
ShowLink();
}
}
private void ShowLink()
{
openFile.Attributes["Style"] = string.Empty;
}
I didn't include the master page code. It has the ToolkitScriptManager in it.
Are you trying to show on client-side or server-side? Is the link a client-side, or server-side object? Javascript would be the standard way.
If the control is a client-side object:
document.getElementById("hyperlink_name").style.display = "block";
Or if it is a server-side object:
document.getElementById("<%= hyperlink_name.ClientID %>").style.display = "block";
I would recommend getting jQuery and using the following though:
$('#hyperlink_name').show();
Or you can use an ASP.Net Link Button and do it server-side:
linkButton.Visible = true;
It would be more helpful if you would post some of the code you have tried already so that we can get a better idea of where you are.
{first answer deleted}
[EDIT :I didn't catch that you are using AsyncFileUpload when I first read the question]
Using AsyncFileUpload inside an update panel the server is being accessed via a partial postback, as a result other controls (the hyperlink) cannot be affected on the server. This will require that you make use of javascript (or preferably jquery) to make the change on the client.
You can do it on OnClientUploadComplete function, but you have to reference the hyperlink like this: <%= hyperLink.ClientID %>.style.display = 'block';
Another more asp.net way is to use update panels. Put the hyperlink into an UpdatePanel and set a trigger on the UpdatePanel when the file is uploaded. then change the visibility on the server at UploadedComplete event.
I have a component in my application that show in my aspx page a x nurmbers of imagens get from my datasource of a repeater. I want to create a button and make this button print this images. I'd tried window.print() in my aspx, but it's only print the HTML information.
as far as i know,
u can't print directly to the printer.
u need to show the separate window with only img surrounded with div tag.
here is the eample:
<%# Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="PrintImage.aspx.cs" Inherits="PrintImage" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script language="javascript" type="text/javascript">
function PrintImage()
{
printWindow = window.open ("", "mywindow", "location=1,status=1,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<img id='img' src='" + document.getElementById('ctl00_MainContent_ImgMyPhoto').src + "'/>");
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.print();
}
</script>
<div>
<asp:Image ID="ImgMyPhoto" runat="server" Width="100px" Height="90px" />
<br />
<input type="button" id="btnPrint" value="Print Image" onclick="PrintImage()" />
</div>
</asp:Content>
ref: this coding is get from Thirumalai_pm
Hope it works!
I have the following user-control:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FadingMessage.ascx.cs" Inherits="includes_FadingMessage" %>
<asp:PlaceHolder Visible="false" runat="server" ID="plhMain">
<span id="<%= this.ClientID+"_panel" %>" style="background-color:yellow; padding:10px;">
<b><%= Message %></b>
</span>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert("never gets here??");
jQuery('#<%= this.ClientID+"_panel" %>').fadeOut(1000);
});
</script>
</asp:PlaceHolder>
Which is used in an asp:UpdatePanel. My problem is that $(document).ready is never fired?
How can I detect when a partial rendering has finished?
Put a method in your head tags and then in your placeholder call it. The problem here is that your PlaceHolder Visible="false" so it's never rendered. If you show it dynamically via ajax the script won't run. You'd have to rebind it when you dynamically show the placeholder. I would suggest not using document(ready) ...