I've got an issue with a messagebox user control. I wish for a control which can be given a message and the user can dismiss with a click of a button, which can be inserted into many places.
I have applied the javascript into the messagebox control in a hope i can keep everything to do with the messagebox centralized, however when browsing to a page with the messagebox control added i get this error:
CS1061: 'ASP.components_messagebox_ascx' does not contain a definition for 'HideBox' and no extension method 'HideBox' accepting a first argument of type 'ASP.components_messagebox_ascx' could be found
The control is as thus:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("PNL_Messagebox").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
I'm fairly certain i've done this right but obviously i've done something wrong if it's not working. Any light on the situation at all would be grand.
Addendum: If i comment out the Button control the page loads fine, and the script loads fine too (Viewed page source)
The control ID's you're referencing are not the client ID's, but server ID's. So retrieve the 'ClientID' from the control in the JavaScript function and second, use the 'OnClientClick' property to show the JavaScript message.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
Onclick looks for a server side function, and not javascript. either, define your button as <input type='button' onclick='HideBox' or change the current code to:
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
return false;
}
</script>
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="return HideBox()" runat="server" />
returning false in OnClientClick, prevents the asp button from postback.
Edit: as Monty mentioned, your panel control's client id is not correctly set in your code.
Related
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 am new to web programming. I have a pretty standard page that accepts contact information and I am trying to add validation controls to it. When the user clicks the cancel button nothing is saved so I just want to unload the page and go back to the previous page. My problem is, even the the cancel button has CausesValidation="false the validation events are still firing and a post back does not occur. I am using Visual Studio 2012 and C#. I've created a test page to reduce the code I'm working with to the minimum required code to demonstrate the issue. I have tried the javascript disableValidation() function with both Page_Validation = false; and the loop to disable the individual validation controls without success. When I check Page_Validation it is false, and the loop throws the exception Page_Validators is undefined.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestMe.aspx.cs" Inherits="ElmoWeb.TestMe" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Simple Little Test Form</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="uxEmail" runat="server" placeHolder="email address" type="email" AutoCompleteType="Email"></asp:TextBox>
<asp:RegularExpressionValidator ID="uxEmailValidator" runat="server"
ControlToValidate="uxEmail"
ValidationExpression="^[a-zA-Z][\w\._%+-]*[a-zA-Z0-9]#[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$"
ErrorMessage="The email address is invalid"
EnableClientScript="false" ValidationGroup="testing"
Display="Static"/>
</div>
<div>
<asp:Button ID="Submit" runat="server" Text="Submit" CausesValidation="true" UseSubmitBehavior="true" ValidationGroup="testing" />
<asp:Button ID="Cancel" runat="server" Text="Cancel" CausesValidation="false" UseSubmitBehavior="true" ValidationGroup="FakeValidationGroup" />
</div>
<div>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" DisplayMode="List" HeaderText="You must correct the following errors." ValidationGroup="testing" />
</div>
</form>
</body>
</html>
Currently the code behind just writes a message to the output window so I can see if the post back occurred.
protected void Page_Load(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine("TextMe.aspx Page_Load event, sender = " + sender.ToString() + ", EventArgs = " + e.ToString());
}
The natural way of solving issues where two or more submit buttons should behave in a different way is to use validation groups.
A validation group is set with the ValidationGroup attribute on both a submit button and a group of validators. The same value binds a button and validators and only validators with the same value of the attribute fire when the button is clicked.
In your case, setting the ValidationGroup on the accept button and your validators to "Accept" and leaving the default (empty) value on the cancel button would solve your issue. This is much simpler than any of the workarounds you tried.
I have an asp:textbox
<asp:textbox ID="NewName" runat="server" />
and when a user clicks the "Cancel" button, I want to erase whatever is in that text box by making the value just be "". If it were a an input field of type text, I could just do this in javascript:
document.getElementById('NewName').value= "";
But I can't just do this because it is an asp:textbox.
When your asp:textbox is rendered to the UI, then yes, it is just an input field of type text. The only part that may be an issue is the ID, but that can be set using ClientIDMode:
<asp:textbox ID="NewName" runat="server" ClientIDMode="Static" />
renders to:
<input type="text" id="NewName" />
and thus the JavaScript you use should work perfectly.
<asp:TextBox> renders to an <input type="text"> which you can use as you would, the only complication is the id="" attribute is rewritten, but you can do this:
document.getElementById("<%= NewName.ClientID %>").value = "";
Assuming that this script is in the same page as the textbox. If this is in a referenced <script src=""> then you'll need to use a global script variable of the element's ID.
Try setting the textbox's ClientIDMode to Static
That way the javascript should be able to find them with the same ID as in ASPX.
Here a whole test page
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
function ClearTB1() {
document.getElementById("TextBox1").value="";
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<p>
<asp:TextBox ID="TextBox1" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ClearTB1()"
CausesValidation="False" UseSubmitBehavior="False" /><br />
</p>
</asp:Content>
I had the same problem. I solved it once I remembered there is a mangling going on with asp.net on the Ids.
within my aspx, i had:
<input type="text" id="sessSubs"/>
further down, within a gridview (hence the use of "class" instead of "id"), i had a column which had an asp:TextBox:
<asp:TextBox runat="server" class="paid" />
once i recalled the id mangling issue, it was just a case of changing the way i referenced the textbox:
<script type="text/javascript">
$(document).ready(function() {
function updateSubs()
{
var sub = parseFloat($('[id$=sessSubs]').val());
$('.paid').val(sub);
}
$(document).on('change, keyup', '[id$=sessSubs]', updateSubs);
});
</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 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) ...