This is the scenario : I have a screen that has a AsyncFileUpload and a button on it. Now the problem is that an error pops up if the user clicks the button before the file is finished uploading so what I want to achieve is to disable the button on page load and as soon as the file's upload is complete it has to make the button visible again. Now I've went through problems and solutions on the web and what I could make out is that the button is processed on the server side so I can't use javascript to do this. So when I do it in the code behind of the screen it disables the button successfully but it doesn't enable it successfully after the file upload is complete. The assumption that I have is because that no postback takes place and the button does not appear to be enabled because no screen refresh has taken place.
How do I get past this and how do I get that button to enable after the file upload is complete?
Here is what I have so far, it isn't much code but here it is anyway:
BulkInsert.aspx
<%# Page AspCompat="true" Title="MainPage" MasterPageFile="~/MasterPage.master" Language="C#"
AutoEventWireup="true" CodeFile="InventoryBulkInsert.aspx.cs" Inherits="content_inventory_InventoryBulkInsert" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<table border="0" class="tablebody" width="100%">
<tr>
<td class="title" colspan="2">
Bulk insert
</td>
</tr>
<tr>
<td class="headercell" colspan="2">
File Upload
</td>
</tr>
<tr>
<td class="style1">
File
</td>
<td class="style2" style="height: 26px">
<asp:AsyncFileUpload ID="AsyncUpload" runat="server" OnUploadedComplete="AsyncUpload_UploadedComplete"
OnClientUploadComplete="UploadComplete" OnUploadedFileError="AsyncUpload_UploadedFileError"
colspan="1" />
</td>
</tr>
<tr>
<td class="style1">
</td>
<td align="left">
<asp:Button runat="server" ID="btnImport" Text="Import" BackColor="#990000" ForeColor="White"
nowrap Width="214px" OnClick="btnImport_Click" />
</td>
</tr>
BulkInsert.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.btnImport.Enabled = false;
}
}
protected void AsyncUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
this.btnImport.Enabled = true;
}
I would suggest using javascript only for showing the button, you will not use it in processing. You can use the AjaxFileUpload OnClientUploadComplete="UploadComplete" which is already included in your design, it would achieve your goal perfectly.
Create the function like this in markup:
function UploadComplete(sender, args) {
var control = document.getElementById("<%=btnImport.ClientID%>");
control.style.display = "block";
}
</script>
And then modify your button to have style="display:none"
Related
I'm in the process of converting an application into an ASP.NET Website. The way the page works is that the user puts in a list of machines in the box then click start, it goes through the list runs the checks and outputs the status and results to a text box on the left. In addition it puts a processing icon beside the check mark as it runs a check and removes it when the check is done. In my .NET application it works fine, but I can't figure out how to do it in ASP.NET
I've tried using Ajax controls to do this so I enclosed the status box in an update panel and put a timer that updates the panel every second.
In the code behind, right now I have a function that just rights out some test text to the results text panel, along with a 3 second pause to simulate the code in the back ground. However it doesn't update the panel until the function finishes instead of each time the text is updated.
In classic ASP I would have written the status out to either a text file or a DB and just set the page to reload on a regular basis and retrieve the information until done flag was hit and then stop the reloads. I was trying to avoid making all those call backs if I could help it. I was hoping there was a better way to do it, but if there isn't I could make just the update panel call back but I'm still not entirely sure how to turn the processing icons on and off.
Page Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<table class="Standard">
<tr>
<td colspan="2">
<div class="Title">
Title
</div>
</td>
</tr>
<tr>
<td class="Column1">
<div style="text-align: center;">
Input Devices to Check<br />
<br />
<asp:TextBox ID="txtMachineList" runat="server" TextMode="MultiLine" Rows="12"
Width="200px"></asp:TextBox>
<asp:Button ID="btnStart" CssClass="button_blue_small" runat="server" Text="Start" OnClick="StartCheck" /><br />
<br />
</div>
<table>
<tr>
<td>
<asp:CheckBox runat="server" ID="chkOne" Text="Check 1" />
</td>
<td>
<asp:Image ID="Load1" runat="server" ImageUrl="Images/flower-loader.gif" Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:CheckBox runat="server" ID="chkTwo" Text="Check 2" />
</td>
<td>
<asp:Image ID="Load2" runat="server" ImageUrl="Images/flower-loader.gif" Visible="false" />
</td>
</tr>
</table>
</td>
<td class="Column2">Status:<br />
<asp:UpdatePanel ID="StatusPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="StatusPanelTimer" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtStatus" runat="server" Columns="300" Enabled="True" ReadOnly="True"
Width="800px" TextMode="MultiLine" Rows="35"></asp:TextBox>
<asp:Timer ID="StatusPanelTimer" runat="server" Interval="1000" OnTick="StatusTimer_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void StartCheck(object sender,EventArgs e)
{
Load1.Visible = true;
Load2.Visible = true;
txtStatus.Text = "Test 1";
System.Threading.Thread.Sleep(3000);
txtStatus.Text += "Test 2";
System.Threading.Thread.Sleep(3000);
txtStatus.Text += "Test 3";
System.Threading.Thread.Sleep(3000);
Load1.Visible = false;
Load2.Visible = false;
}
protected void StatusTimer_Tick(object sender, EventArgs e)
{
StatusPanel.Update();
}
So it seems the problem is in your "Start" button's function.
If you just add:
txtStatus.Text += "Tick\n";
to your tick event, you can see that your page is updating.
The problem is that After you click the button, the page doesn't receive a response until the StartCheck function finishes (Even the ticking stops).
What's the best way to send a username and password via ajax to the code behind page in .net.
I have an index.aspx page like so:
<asp:TemplatedWizardStep>
<CustomNavigationTemplate>
<div style="margin-bottom:7px;text-align:left;">To create an account, simply send us your e-mail address. A password will be sent to this address upon submission.</div>
<table border="0" cellpadding="3" cellspacing="0" style="width:99%;">
<tr>
<td style="text-align:left; vertical-align:middle;width:90px;">E-Mail:</td>
<td style="text-align:left; vertical-align:middle;">
<asp:TextBox ID="UserName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align:left; vertical-align:middle;width:90px;padding-top:5px;">Screen name:</td>
<td style="text-align:left; vertical-align:middle;padding-top:5px;">
<asp:TextBox ID="ScreenName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align:left; vertical-align:middle;"> </td>
<td style="text-align:right; vertical-align:middle;padding-top:5px;">
<asp:imagebutton ID="CreateUser" CommandName="CreateUser" Enabled="true" runat="server" AlternateText="OK" ImageUrl="powerstats/inc/img/ok_up.png"></asp:imagebutton>
<img src="powerstats/inc/img/cancel_up.png" style="cursor:pointer;" onmouseover="SwapImageIndex(this,'cancel_ov.png')" onmouseout="SwapImageIndex(this,'cancel_up.png')" />
</td>
</tr>
</table>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
I want the imagebutton to be clicked and send an ajax call with the username and screenname (and eventually password), to the back end page. If I do onClick=X the page refreshes. I want the page NOT to refresh and send an alert back if something is wrong.
You would need to use an UpdatePanel with a ScriptManager. If a submit happen inside the UpdatePanel, it's gonna return only what's inside the UpdatePanel itself through AJAX.
If you want to handle possible Error, you can use the AsyncPostBackError Event of the ScriptManager. See MSDN page for a complete exemple of error handling.
Code would look like (+ your error handling logic):
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TemplatedWizardStep>
<CustomNavigationTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
/* Your login controls here ...
Make sure to include all the fields
to be refreshed + the submit button */
</ContentTemplate>
</asp:UpdatePanel>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
I am developing one ASP.NET Web Page in that I Want to show data, as it is in the attached link. So Please go through it.
So I want the similar functionality in my We Page also.
As We can see here I have separate section for Store Details, POS Details, Registered Banks Details and so on. And If I click on +/- symbol, I should be able to maximize and minimize that particular section.
Actually I am very new to Asp.net, I have learned things by myself only so far, Nobody here to guide me.
So I have no idea how to do this?
What to do and what items I need to select from toolbox in Visual Studio.
I have idea about PAnel Control , but with panel control I am not able to get maximize and minimize functionality here.
Please help me out .
Thanks
!(http://imageshack.us/content_round.php?page=done&l=img542/4391/spx1.png)
For this you can use AJAX Toolkit controls (ToolkitScriptManager and CollapsiblePanelExtender). And for that do following steps:
(1)Learn and Download AJAX Toolkit from http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/ or http://www.asp.net/ajaxlibrary/act.ashx or
http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
(2)Add toolkit into your project and create one example with any one control of the toolkit
(3)Try below example as you want
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlCPTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
POS DETAILS
</td>
<td align="right" valign="top">
<asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
<asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
TID :
</td>
<td>
abc...
</td>
<td>
Name :
</td>
<td>
xyz ...
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
TextLabelID="lblTop">
</cc1:CollapsiblePanelExtender>
In web config
<system.web>
<pages>
<controls>
<add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
I hope this may helps you. I suggest to first learn AJAX Toolkit and then add to tool box and then try above code.
Another way is using javascript like below:
javascript
<script type="text/javascript">
function funHide() {
document.getElementById('imgShow').style.display = 'block';
document.getElementById('trPOSDETAILS').style.display = 'none';
document.getElementById('imgHide').style.display = 'none';
}
function funShow() {
document.getElementById('imgShow').style.display = 'none';
document.getElementById('trPOSDETAILS').style.display = 'block';
document.getElementById('imgHide').style.display = 'block';
}
</script>
aspx or html
<table width="500px">
<tr>
<td colspan='3'>
POS DETAILS
</td>
<td align="right">
<img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
<img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
</td>
</tr>
<tr id="trPOSDETAILS">
<td>TID :</td>
<td>abc...</td>
<td>Name :</td>
<td>xyz ...</td>
</tr>
</table>
Please mark this answer useful if this solve your problem.
Here's a my Default.aspx page (with unnecessary details excised):
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="login">
<!-- a bunch of markup has been removed, so this html will appear wrong and not valid, but it actually is -->
<table align="center" width="80%" cellpadding="0" cellspacing="0" class="loginBg">
<tr>
<td colspan="2"><img src="images/Login_top.jpg" /></td>
</tr>
<asp:Panel runat="server" ID="pnlLoginIn">
<tr>
<td style="padding-left:20px;">Username</td>
<td style="padding-right:15px;" align="right"><asp:TextBox id="txtUsername" runat="server" /></td>
<asp:RequiredFieldValidator runat="server" ID="rfvUserName" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
</tr>
<tr>
<td style="padding-left:20px;">Password</td>
<td style="padding-right:15px;" align="right"><asp:TextBox ID="txtPassword" TextMode="Password" runat="server" /></td>
<asp:RequiredFieldValidator runat="server" ID="rfvPassword" ErrorMessage="*" ControlToValidate="txtPassword" ValidationGroup="credentials" Display="Dynamic" />
</tr>
<!-- BUT THE PANEL IS HERE?! -->
<asp:Panel ID="pnlInvalidCredentials" runat="server">
<tr>
<td colspan="2" align="center" style="color: Red;"><asp:Literal runat="server" ID="litInvalidCredentials" Text="Invalid Username or Password" />
</td>
</tr>
</asp:Panel>
<!-- more code has been removed down here...I just left the block commented in where the pnlInvalidCredential lives -->
</asp:Content>
Here's the code-behind (with unnecessary details excised):
namespace webapp
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
(webapp.MasterPages.MasterPage)Page.Master).headerImage = "default";
this.Master.headerImage = "default";
if (!Page.IsPostBack)
{
this.pnlInvalidCredentials.Visible = false; // error is here
this.BindPressRoomItem();
}
}
}
}
This page/code-behind is top level, it's not it any folder or anything. Also this project is an ASP.NET Web Application that is borrowing code from a legacy web site project. I didn't "Add Existing" to any files, all files were "Add New" to prevent compatibility problems. Tried this, didn't work.
In the code-behind, every attempt to manipulate items declared in the aspx page results in an error like:
'_Default' does not contain a definition for 'pnlInvalidCredentials'
or
The name 'txtUsername' does not exist in this context.
Since I refreshed this page you've removed the line with the page directive at the top of your html file, but it looked like you maybe need to include the namespace.
Try:
Inherits="webapp._Default" instead of Inherits="_Default"
Try changing the "CodeBehind" attribute in your Default.aspx page to "CodeFile."
If this is a web application, sometimes it happens that the *.designer.cs file is not updated with your latest changes.
Try this:
Remove the panel (just cut it)
Save
Undo
Save again (this will regenerate the *.designer.cs file)
Rebuild
Edit:
Other possibilities that will fail the regeneration of the *.designer.cs file are syntax errors such as missing end tags in your aspx pages.
I just had the same problem. What fixed it for me was:
in my code behind file, the class was defined as 'Public class'. Changing this to 'Partial Class', then clicking 'Convert to Web Application' regenerated the 'Designer' file and fixed the problem.
I have a standard asp:login control:
<asp:Login ID="mbLogin" runat="server" TitleText=""
DestinationPageUrl="~/Default.aspx"
PasswordRecoveryText="Forgot your password?"
PasswordRecoveryUrl="~/LostPassword.aspx"></asp:Login>
In Internet Explorer, pressing Enter does not submit the form, but IE beeps at me 10 times rapidly. In other browsers Enter works perfectly fine and submits the forum as you'd expect.
I've seen this question but that only works when you have actual form element with an actual button, not the login control as a whole.
Why is it being blocked in IE (and why 10 times for some reason)? Is there a workaround?
In the designer of your Login control: "Convert To Template". Then in the Page Load set the defaultButton of your form by finding the LoginButton.
ASPX:
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server" OnAuthenticate="Login1_Authenticate">
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
.....
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</div>
</form>
Code-Behind:
protected void Page_Load(object sender, EventArgs e)
{
Button lbButton = Login1.FindControl("LoginButton") as Button;
form1.DefaultButton = lbButton.UniqueID;
}
This is a hack, but it will provide a work around for your issue with Internet Explorer.
Add a text box to your page that is hidden from view.
<!-- Hack for Internet Explorer browsers to allow the page to post back when the enter key is pressed-->
<asp:TextBox ID="txtIEHackBox" runat="server" style="visibility: hidden; display: none;" />
This will cause Internet Explorer to send back the Button Web control's name/value pair upon hitting Enter.
Button lbButton = Login1.FindControl("LoginButton") as Button;
ContentPlaceHolder contentPlaceHolder = (ContentPlaceHolder)Master.FindControl("ContentPlaceHolder1");
contentPlaceHolder.Page.Form.DefaultButton = lbButton.UniqueID;
I know this is a super old post, but another way to do this is by using an asp:Panel with DefaultButton set to the ID of the button that the user would normally click on to log in:
<asp:Login ID="LoginUser" runat="server">
<LayoutTemplate>
<asp:Panel ID="LoginPanel" runat="server" DefaultButton="LoginButton">
<other stuff here like username and password textboxes>
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"/>
</asp:Panel>
</LayoutTemplate>