I am working on adding a modal popup to ASP.NET pages. The popup will give the user some textboxes to fill in, with a Cancel and Submit button.
The issue I'm running into is that the textboxes are being created dynamically, as the number of textboxes needed and what they are asking for will change depending on what is clicked on the page. When attempting to retrieve the values that have been entered after clicking Submit on the modal window (which is not tied to the modal window so that it will do a postback), the textboxes are gone by that point and the data cannot be retrieved.
Here's the code for the modal popup:
<div id="divModalContainer">
<div id="PromptContentHeader">
<asp:Label ID="lblHeader1" runat="server">
</asp:Label>
<br />
<asp:Label ID="lblHeader2" runat="server">
</asp:Label>
<asp:Label ID="lblPassFileName" runat="server">
</asp:Label>
</div>
<!--<ul id="ulTabModalPrompt" class="tabnav" runat="server">
</ul>-->
<div id="divModalPrompts" runat="server">
<table id="PromptTable" runat="server">
</table>
</div>
<div id="divModalButtons" style="width:230px;">
<div style="float:left">
<asp:Button ID="btnCancelDocPrompts" runat="server" Text="Cancel" OnClick="btnCancelDocPrompts_Click" />
</div>
<div style="float:right">
<asp:Button ID="btnSubmitDocPrompts" runat="server" Text="Submit" OnClick="btnSubmitDocPrompts_Click" />
</div>
</div>
</div>
</asp:Panel>
<ajaxtoolkit:ModalPopupExtender ID="modalDocPrompt" runat="server"
TargetControlID="btnOpenPromptWindow"
PopupControlID="panelPrompts"
OkControlID="btnHiddenOkButton"
CancelControlID="btnCancelDocPrompts"
BackgroundCssClass="ModalPromptBackground"
DropShadow="true" />
<asp:Button ID="btnOpenPromptWindow" runat="server" Text="Test Modal" Style="display: none;" />
<asp:Button ID="btnHiddenOkButton" runat="server" Text="Test Modal" Style="display: none;" />
Before the modal popup is shown, rows will be added to PromptTable, with a label and textbox in each row.
The btnSubmitDocPrompts_Click method will attempt to go through each row in PromptTable and retrieve the values entered, but once Submit is clicked, there are no rows anymore.
Thanks for the help!
You could try using JavaScript to write the values of the textboxes to a HiddenField (which will get posted back if it exists when the page loads).
You'll have to encode the values and comma-separate them (or similar), then parse the values out server-side.
Edit: Example
OK, I'd personally use jQuery for the JavaScript part, but I'll assume you're doing it 'raw'.
Say your markup (with a few added dynamic textboxes) looks like this:
<input type="hidden" id="hdnFormValues" />
<div id="dynamicForm">
<div id="textBoxArea">
<input type="text" id="newField1" /><br />
<input type="text" id="newField2" /><br />
<input type="text" id="newField3" /><br />
<input type="text" id="newField4" /><br />
</div>
<input type="submit" onclick="saveValues()" value="Save Values" />
</div>
and you have a JavaScript function that looks like this:
function saveValues()
{
theBoxes = document.getElementById('textBoxArea').getElementsByTagName('input');
hdnValues = document.getElementById('hdnFormValues');
hdnValues.value = "";
for(var i = 0; i < theBoxes.length; i++)
{
hdnValues.value += escape(theBoxes[i].value) + '|';
}
}
Then when the submit button gets pressed, the value of the HiddenField will become a pipe-delimited string of encoded values.
For example, if text boxes 1 through 4 had the values:
I'm
encoding
dynamic
values!
then the HiddenField's value would become I%27m|encoding|dynamic|values%21|
Remember, you'll need to output the function above from ASP.NET server side. Look at the ScriptManager documentation for how to do this. The reason is that the HiddenField's ID will be dynamic, so you can't (reliably) predict it before runtime.
Finally, in your server-side code that recieves the postback, you split out the delimited string and unencode it, then do what you want with the values.
The biggest caveat here is security and validation - although I've encoded the string, you need to do your own validation and security checks!
Related
I have few Textbox, FileUpload and button controls within the same page. I had tried enabling the EnableViewState to True but it is still not working. The Textbox will lose its value when clicking the button to upload attachments. May I know what's wrong here, should I use ViewState to retain the values of the textboxes?
<div class="form-row">
<div class="form-group col-md-6" >
<asp:Label ID="lblConfiguration" runat="server" Text="Configuration*"></asp:Label>
<asp:TextBox ID="txtConfiguration" runat="server" type="text" class="form-control" EnableViewState="true" ViewStateMode="Enabled" ></asp:TextBox>
</div>
<div class="form-group col-md-12">
<div class="col-md-6">
<asp:FileUpload ID="fuUpload" runat="server" CssClass="nv-file-select uploader" multiple="true" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" CssClass="btn btn-secondary" />
</div>
</div>
Possible reasons
1) You have disable the Viewstate on full page - Check on top of aspx page if its enable or not
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FileName.ascx.cs" EnableViewState="true" %>
2) At some point on code behind you change the value on post back - so check to not change it by adding this check
if (!Page.IsPostBack)
{
TextBox.Text = "";
}
3) For some reason after your post back you do redirect on same page.
4) For some reason you do not make post back, but reload
I have used a login-template for the page in .net application. How can I get the texts from the input text fields of the template and store it in a string variable?
<form id="form1" runat="server" role="form" method="post" class="login-form">
<div class="form-group" runat="server">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form_username" runat="server"/>
</div>
<div class="form-group" runat="server">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form_password" runat="server"/>
</div>
<button type="submit" class="btn" onclick="btn_login_Click" runat="server">LOGIN</button>
</form>
To get the Text in a TextBox you can simply do this:
private void AnyMethod()
{
string textValue = this.MyTextBox.Text;
}
You can access the raw post data with:
string exampleInput = Request.Form["<inputElementName>"];
If your input element is having the attribute 'runat="server"' you should be able to access it with
string exampleInput = <inputElementName>.Value;
If this does not work, you would need to show us a little bit more of your code/page.
Sample form:
<form id="login" runat="server">
<asp:TextBox ID="tbInput1" runat="server"
Width="75px"
TabIndex="1">
</asp:TextBox>
<asp:Button ID="btSubmit" runat="server" Text="Submit" />
</form>
Access with
tbInput1.Text
I guess ,if runat=server is there then it should directly get value using :
form_username.value.Tostring().
After doing little research on above issue got to know that ,
we can't access the login control properties directly .
if we want to access name then we have to use : User.Identity.Name
try doing this ! it might help you .
For further reference please visit below link :
https://msdn.microsoft.com/en-us/library/system.web.security.formsauthentication.redirecttologinpage.aspx
It is not a repeat post, I have already checked all the answers present on net and nothing is working for me so i'm posting this here.
Please find the code.
<form runat="server">
<div class="card">
<ul class="nav nav-tabs Main-Menu" role="tablist">
<li role="presentation" class="active">Check Box - Enabled</li>
<li role="presentation">Check Box - Disabled</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Enabled">
<asp:CheckBoxList runat="server" ID="CheckBoxEnabled" RepeatDirection="Horizontal">
<asp:ListItem Text="Selenium IDE"></asp:ListItem>
<asp:ListItem Text="Selenium RC"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button runat="server" Text="Submit" CssClass="btn btn-success Elements-Text" OnClick="btnEnabled_Click" />
<asp:Label runat="server" ID="lblEnabled" CssClass="label success"></asp:Label>
</div>
<div role="tabpanel" class="tab-pane" id="Disabled">
<asp:CheckBoxList runat="server" ID="CheckBoxDisbled" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5" CssClass="element form-control">
<asp:ListItem Text="Selenium IDE"></asp:ListItem>
<asp:ListItem Text="Selenium RC" Enabled="false"></asp:ListItem>
<asp:ListItem Text="Selenium WebDriver"></asp:ListItem>
<asp:ListItem Text="Selenium Grid" Enabled="false"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button runat="server" ID="btnDisabled" Text="Submit" CssClass="element btn btn-success" OnClick="btnDisabled_Click" />
<asp:Label runat="server" ID="lblDisabled" CssClass="label success"></asp:Label>
</div>
</div>
</div>
</form>
I'm having 2 tabs in my page, when i'm on the second tab, select one checkbox and click on the button with #btnDisabled the page gets postback and navigates to the first tab. I want this to stop.
I have already tried,
1. AutoPostBack = false
2. onClick = "return false;"
but not able to solve the issues.
Any help will be appreciated. :)
You can save the index of active panel in a hidden control and use it after post back.
<input type="hidden" runat="server" id="tabIndex" value="0" />
I do not know how you switch between your tabs, but on each tab change you must save it's index in hidden field(by javascript). For example if you select the second tab, value of hidden field must change to 1.
Finally add this script after all of your tabs.
var tabIndex = $('#tabIndex').val();
$('.tab-pane').removeClass('active');
$('.tab-pane').eq(tabIndex).addClass('active');
You want to do btnDisabled_Click, but not refresh the whole page.
You need Ajax controls around the button or anything needs to be updated. Check the tool list to find it.
( Firstly download and install AjaxControlToolkit if you haven't.)
I have a page that has two separate search forms, one for searching by item ID and one for searching by keywords. It looks like this:
I started with just the top one, I am now adding the bottom one. The bottom one is basically a copy and paste of the first one (both are components in Sitecore). This is the code for each:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SearchByItemNumber.ascx.cs" Inherits="Bayer.CropScience.SC.Internet.US.Website.layouts.Bayer_CropScience.Scope.Country_United_States_Internet.RewardsCatalog.SearchByItemNumber" %>
<div class="form search-item">
<div class="clearfix">
<h3>
<label class="searchByItemNumber" for="item-num">Know your item number?</label></h3>
<div class="input-wrapper search-by-itemnumber-length">
<asp:TextBox runat="server" ID="txtSearchItemNumber" CssClass="search-by-itemnumber-length" placeholder="Search by Item Number" />
<asp:RequiredFieldValidator runat="server" ID="rfvSearchItemNumber" ControlToValidate="txtSearchItemNumber" ValidationGroup="searchCatalog" ErrorMessage="Please fill out this field." CssClass="error"></asp:RequiredFieldValidator>
</div>
<asp:Button runat="server" Text="Go" CssClass="small" OnClick="Search" ValidationGroup="searchCatalog" />
</div>
</div>
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SearchByDescription.ascx.cs" Inherits="Bayer.CropScience.SC.Internet.US.Website.layouts.Bayer_CropScience.Scope.Country_United_States_Internet.RewardsCatalog.SearchByDescription" %>
<div class="form search-item">
<div class="clearfix">
<h3>
<label class="searchByKeywords" for="item-keywords">Search by keywords</label></h3>
<div class="input-wrapper search-by-keywords">
<asp:TextBox runat="server" ID="txtSearchKeyword" CssClass="search-by-keywords" placeholder="Search by keywords" />
<asp:RequiredFieldValidator runat="server" ID="rfvSearchKeyword" ControlToValidate="txtSearchKeyword" ValidationGroup="searchCatalogKeywords" ErrorMessage="Please fill out this field." CssClass="error"></asp:RequiredFieldValidator>
</div>
<asp:Button runat="server" Text="Go" CssClass="small" OnClick="KeywordSearch" ValidationGroup="searchCatalogKeywords" />
</div>
</div>
The problem is that when I fill out an item number and click Go, I get the validation error message "Please fill out this field" under the keywords box, and vice versa. How do I stop this from happening?
EDIT - The validation error occurs when I press "enter" but NOT when I click the "Go" button
EDIT 2 - It was a javascript issue, pressing enter was causing both fields to validate. I overrode it with a custom onkeypress function
You need to have different ValidationGroups. You're using ValidationGroup="searchCatalog" on all fields.
Assign a Unique ValidationGroup to fields that you want to be validated together.
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.