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.
Related
I have this error - Control 'txtUserName' of type 'TextBox' must be placed inside a form tag with runat=server. I am unable to get rid of it, my text box is placed inside a form tag with runat=server.
The page which I am getting this on is my 'reset password' page I want the users to be able to enter their username and once they press the reset password button it takes them to a page which allows them to change their password.
Here is the code that I am currently working with.
<head runat="server">
<title></title>
</head>
<body>
<div style="font-family:Arial">
<table style="border: 1px solid black; width:300px">
<tr>
<td colspan="2">
<b>Reset my password</b>
</td>
</tr>
<tr>
<td>
User Name
</td>
<td>
<form action="ChangePassword.aspx" method="get">
<asp:TextBox ID="txtUserName" Width="150px" runat="server"
ontextchanged="txtUserName_TextChanged">
</asp:TextBox>
</form>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnResetPassword" runat="server"
Width="150px" Text="Reset Password" onclick="btnResetPassword_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</body>
</html>
As the error message says, you need to add a runat="server" in the form tag. This is just something ASP.NET demands to work.
The way ASP.NET handles events and postbacks forces this requirement. It tries to keep the page's state inside the actual page (called the 'view state'), and on form submission it sends it back. This was invented to make the stateless web stateful.
Just put in the runat="server" inside the form tag and you will be set.
<form runat="server" action="ChangePassword.aspx" method="get">
Add < form> tag like this...,
it will work..
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"
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>
Can we submit a form in ASP.NET with AjaxToolkit ?
e.g:
below in our form:
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div id="mainDiv">
<table style="width: 40%;" cellspacing="3" cellpadding="3">
<tr>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="*"
SetFocusOnError="True" Text="*" ControlToValidate="TextBoxUsername"
ValidationGroup="login"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBoxUsername" runat="server"></asp:TextBox>
</td>
<td align="left">
: UserName
</td>
</tr>
<tr>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
SetFocusOnError="True" Text="*" ControlToValidate="TextBoxPass"
ValidationGroup="login"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBoxPass" runat="server" TextMode="Password"></asp:TextBox>
</td>
<td align="left">
: Pass
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="ButtonSubmit" runat="server" Text="Login"
ValidationGroup="login"/>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="LabelResult" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
I wanna log-in a user with Ajax so I have to send username and pass to a Webservice and get the result and show the result in LabelResult.
Can we do it with AjaxToolkit in ASP.Net?
I'm using ajax for a cascading dropdown menu set and i don't know how to submit the contents of the form to a controller. I think this is a related question becausewht I did was generate a hidden ajax control that triggered upon the change in value of the final ajax control in the form. The webservice that the control triggered then saved al of the form information to a database at which point the submitbuton was more of a comforting decoration for the user. Once the user submitted the form the values were available in a meta data field in the database and the submit handler accessed those values rather than reading them from the postback.
I didthis because it ended up being faster than learning what I needed to in order to read them form the postback using java script or some other method of retrieval form the postback so I wouldn't claim thatthisis the best approach but it worked for me. Hope this helpsyou somehow.
D.A.P.
for working of AJAX script manager must appear before the form which i think not possible and also
Cos Callis says very well
"If you want to submit the form, that is what a post back is for"
So, If we wanna send a form to server with Ajax, we have to use something like JQuery, and we can't do it with AjaxControlToolkit.
I've a simple page in one of our web applications, which has the following markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NewUpload.aspx.cs" Inherits="Mass_Upload.NewUpload" MasterPageFile="~/Master" Title="Document Mass Upload" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="Stylesheet" type="text/css" href="./../CSS/ScrollingTable.css" />
<script type="text/javascript" src="../Help/HelpPopup.js" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CenterH1" runat="server">
Document Mass Upload <img style="Border:None;" src="../Help/help_icon.gif" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CenterBody" runat="server">
<h3>Add New Upload</h3>
<table class="list">
<tr>
<td class="label" style="text-align:right;">Local File:</td>
<td class="normal">
<asp:FileUpload ID="fuFilename" runat="server" Width="405" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Text="*"
ErrorMessage="A file to upload is required"
Display="Dynamic"
ControlToValidate="fuFilename"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="text-align:right;">Document Description:</td>
<td class="normal">
<asp:TextBox ID="txtDescription" runat="server" Width="405" MaxLength="50" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" Text="*"
ErrorMessage="Document Description is a required field"
Display="Dynamic"
ControlToValidate="txtDescription"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="text-align:right;">Document Type:</td>
<td class="normal">
<asp:DropDownList ID="ddDocType" runat="server" Width="405"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Text="*"
ErrorMessage="Document Type is a required field"
Display="Dynamic"
ControlToValidate="ddDocType"
ValidationGroup="DocumentUpload"
runat="server" />
</td>
</tr>
<tr>
<td class="label" style="vertical-align:top;text-align:right;">Customer Types:</td>
<td class="normal">
<asp:Label ID="lblSingleCustomer" Text="Specific Code:" runat="server" /><asp:TextBox ID="txtSingleCustomer" runat="server" Width="100px" /><br />
<asp:CheckBoxList ID="cblCustomerTypes" runat="server" Width="405px" RepeatDirection="Horizontal" RepeatColumns="5" RepeatLayout="Table" CellPadding="10" CellSpacing="0" />
</td>
</tr>
<tr>
<td class="normal" colspan="2"> </td>
</tr>
<tr>
<td class="normal" colspan="2"><asp:Label ID="lblError" runat="server" Text="" ForeColor="Red"/></td>
</tr>
<tr>
<td class="normal" colspan="2">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="BtnCancel_Click" CssClass="medium" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="BtnUpload_Click" CssClass="medium" />
</td>
</tr>
</table>
</asp:Content>
It USED to work fine, but now, and without apparent change to code/design, both the "Upload" and "Cancel" buttons no longer work.
Putting a breakpoint in the codebehind's Page_Load() method shows that it is only called when the page is initially loaded, and not when the button is pressed.
Similarly, putting a breakpoint in the "BtnUpload_Click" event shows it is never called.
This is now not working both on my own development machine AND on the client's server (both when browsing to the servers page from my machine AND from the server itself).
It's important to stress that, between this working and it now not working, I am 90% sure nothing has changed in regards to the code.
Any help would be greatly appreciated, as the customer is rightly anxious - and i'm clueless as to what's causing it!
EDIT #1
Here's the codebehind for one of the buttons:
protected void BtnUpload_Click(object sender, EventArgs e)
{
if (DataAccess.CheckIfMassUploadAlreadyExists(fuFilename.FileName))
{
lblError.Text = "A file with the specified name already exists within the system.";
return;
}
else
{
try
{
UploadFile();
}
catch(Exception ex)
{
lblError.Text = ex.Message;// +"\nUsername:" + System.Web.HttpContext.Current.User.Identity.Name;
return;
}
}
}
.
Here's the reason.. and it's a really annoying reason too!
THIS:
<script type="text/javascript" src="../Help/HelpPopup.js" />
Should be THIS:
<script type="text/javascript" src="../Help/HelpPopup.js"></script>
Whoever decided the script tag needs to be treated differently to every other HTML tag, needs to be locked in a room with Justin Bieber.
First off all you should check your Validators and perhabs, comment them out for a test.
Is it possible that there are JavaScript-Errors showing on your page?
An ASP-Button is calling a JavaScript-Funktion (WebForm_DoPostBackWithOptions), if there is a JavaScript-Error "before" this line, sometimes you can't press a button.
apparently a client side "return false" is preventing the callback, this could be one of two reasons:
1-the validators always return not valid
2-some client script being called on the button returns false;
At the risk of being down voted for posting an answer to the title question which does not appear to be the OP's problem... I will offer this suggestion which fixed my similar problem:
<body background="images/GlobeBg.png" bgproperties="fixed">
</body>
Problem is, 'bgproperties' is NOT a valid attribute name even though some guys on the internet said it was. Other than an unnoticed squiggle underline in VWD 2008 Express, no error was emitted and the page otherwise looked normal. Simply, the update button and other input controls didn't work.
The cause for this for me was that a validator on another view in the same page was being fired, due to it being apart of the same validation group.So this prevented the post back.