How to change the position of the Horizontal line dynamically? - asp.net

I am making asp.net website. In that there is a link button (named Landline number).Below that there are three textboxes. And after that there is one horizontal line.
Now at a first time only link button and horizontal will be visible, and textboxes which is bellowed to link button will not be visible.
Now if user will click on the link button then textboxes which is bellowed to link button will be visible. Then horizontal line which is at the first time bellowed to the link button should be adjust to its location and should go after textboxes.
And if user clicks to link button again then textboxes should be visible false. And horizontal line should be displayed its original position that is bellowed to the link button. Of course I am able to do with visibility of textboxes but I can not understand how to change the position of the horizontal line dynamically?

Try this:
Toggle Text<br/>
<div id="divBox" style="display:none">
<input type="text" name="text1"/>
<input type="text" name="text2"/>
<input type="text" name="text3"/>
</div>
<hr/>
<script>
function toggleTextBoxes()
{
var divBox = document.getElementById("divBox");
divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
}
</script>
So you aspx Page would be like:
Toggle Text<br/>
<div id="divBox" style="display:none">
<asp:Textbox runat="server" id="text1"/>
<asp:Textbox runat="server" id="text2"/>
<asp:Textbox runat="server" id="text3"/>
</div>
<hr/>
<script>
function toggleTextBoxes()
{
var divBox = document.getElementById("divBox");
divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
}
</script>

Assuming you're doing more stuff on the server apart of showing/hiding the boxes, you'll need to use "server side" controls so here it is.
First, wrap the text boxes with Panel control like this:
<asp:Panel id="pnlTextboxesPlaceholder" runat="server">
<asp:Textbox runat="server" id="text1"/>
<asp:Textbox runat="server" id="text2"/>
<asp:Textbox runat="server" id="text3"/>
</asp:Panel>
Now, in the Page_Load event in code behind make the panel initially hidden by having such code:
pnlTextboxesPlaceholder.style["display"] = "none";
Next step is to "remember" the last state of the panel i.e. visible or hidden.. for this you can use hidden input:
<asp:HiddenField ID="hdnTextboxPanelState" runat="server" Value="hidden" />
Now in the link button click event, have such code:
void LandlineNumber_Click(object sender, EventArgs e)
{
bool blnHidden = (hdnTextboxPanelState.Value == "hidden");
pnlTextboxesPlaceholder.style["display"] = blnHidden ? "" : "none";
hdnTextboxPanelState.Value = blnHidden ? "visible" : "hidden";
}
Finally, place the <hr /> below the Panel and it will show in the correct place every time.

Related

How do I change the html panel using asp: LinkButton

I got a problem where when the button is clicked, the panel would not change. In the sense of error. I can change the panel using the following hyperlink.
Test
But I want to use an asp:LinkButton and it did not work like this.
<asp:LinkButton ID="btngantipassword" runat="server" CssClass="btn btn-lg btn-primary btn-block" href="#" OnClick="$('#panel1').hide(); $('#panel2').show()">Change Password</asp:LinkButton>
I am still a beginner in using asp.net. Help me to solve this problem.
Almost every Control has a Visibility property. This property can be set on the aspx page in the Control itself
<asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
The property can also be set in code behind
Label1.Visible = false;
The visibility property works different than with JavaScript and CSS. Normally if you define a CSS class with display:none for example, you won't see it in the browser but it DOES exist. If you look at the HTML you can find it.
But in asp.net the hidden control is not rendered to the browser and therefore does not exist in the HTML.
To expand this to your question. The Panel Control can be used like you ask in your question.
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server">
<p>Normal Content here...</p>
</asp:Panel>
This will render in HTML as
<div id="Panel1">
<p>Normal Content here...</p>
</div>
With the OnClick event of LinkButton1, you can change the Visibility of Panel1
protected void LinkButton1_Click(object sender, EventArgs e)
{
if (Panel1.Visible == false)
{
Panel1.Visible = true;
}
else
{
Panel1.Visible = false;
}
}

Hide dropdown box when ASP.NET dropdownlist is empty

since I combined an asp:dropdownlist with an asp:checkboxlist, I have the problem in IE(8) and Firefox (Chrome works fine) that everytime I click the DropDownList, the empty box appears in addition to the popup I manually open when the dropdownlist is clicked.
My question now is: How can I hide this empty box (since there are no entries in it), but keep the dropdown element? I don't want to replace this component, since it still should look like a dropdownlist. If I change it to a text box it's not clear anymore that it can be used as a dropdown.
This is what I currently have in place:
<div style="width: 190px;" class="right">
<!-- the original drop down list -->
<asp:DropDownList CssClass="dropdownbox" ID="ddlCountry" runat="server">
</asp:DropDownList>
<cc1:PopupControlExtender ID="ddlCountry_PopupControlExtender" runat="server" DynamicServicePath=""
Enabled="True" ExtenderControlID="" TargetControlID="ddlCountry" PopupControlID="pnlPopup"
OffsetY="20">
</cc1:PopupControlExtender>
<!-- Popup control extender that maps the country list to the dropdown list -->
<asp:Panel ID="pnlPopup" runat="server" CssClass="dropdowncheckbox">
<!-- List of countries with a checkbox for each entry -->
<asp:CheckBoxList ID="countryList" runat="server"
DataTextField="Countries" DataValueField="Countries" AutoPostBack="True"
OnSelectedIndexChanged="countryList_SelectedIndexChanged">
</asp:CheckBoxList>
</asp:Panel>
</div>
If there is a component that fits my purpose better, please let me know.
Thanks a lot in advance for your suggestions.
Place this code in the event you need to trigger the change
This will work for c#
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Attributes["style"] = "display: none;";
}
else
{
dropdownlist.Attributes["style"] = "";
}
Simply set the Drop Down List Enabled property to false and toggle it to true when it has entries.
dropdownbox.Enabled = false;
do something like this in c#:
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Visible = false;
}
else
{
dropdownlist.Visible = true;
}
Encapsulate the dropdown in a div, give the div an id and the runat="server" property
Check in the code behind of the data to load the dropdown is empty set the div to visible false; if not, set the div to visible true.

textboxes are empty on postback with bootstrap modal asp.net

I am using bootstrap modal in my asp.net page like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
</Triggers>
<ContentTemplate>
<p>
textboxes here
<div class="popup-footer-wrapper">
<div class="popup-footer-left">
<%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
<asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />
</div>
</div>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
i see that inside
protected void btnRegister_Click(object sender, EventArgs e)
all the texboxes show empty value. whatever user type in textbox. Please suggest how to fix it. It may be because of UseSubmitBehavior="false" but if i dont use it then control doesnt go to onclick event.
The reason why the you are not seeing your posted values, is because your values are not being posted. The bootstrap modal manager uses the 'body' element as the root element to which it appends your modals. As a result your modals are now outside the 'form' element and the values are not being posted back to the server.
To fix this, change the default value of the 'manager' property as follows:
// Note the manager is passed to the root form element.
// Otherwise, the modals are taken out of the form and
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';
EDIT: This is assuming you are using the Bootstrap-Modal Extension
Steven Anderson is right, values are not posted because modal inputs are outside the form.
I was able to workaround this problem using javascript to copy the value of the modal inputs to hidden asp.net controls.
I create a hidden asp.net control outside of the modal:
<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />
The modal textbox I want to submit:
<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`
My modal submit button looks like this;
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />
My JavaScript function looks like:
function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}
So when I click "submit" in my modal window a postback kicks, the value of the textbox is copied to the hidden control and I can read the value from the hidden control in code-behind:
Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub
I just had similar problem. I resolved this by moving the modal element inside the form element using jquery.
function init() {
var element = $('#myModal').detach();
$($("form")[0]).append(element);
}
window.addEventListener('DOMContentLoaded', init, false);
Use the dotnet text box, or add an id and a runat server tag to the input field.

In Chrome browser, Modal pop up pops up when clicking a button which is disabled

I have a page which has a modal pop up which shows on clicking a link button. I have disabled the link button but on clicking the disabled link button also the modal pop up appears. It works fine in all other browsers except Chrome. How to prevent modal pop up from being shown when the link button(target control) is disabled?
The code is given below:
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="imgbtnCancel" DropShadow="true" PopupControlID="panelTenant"
TargetControlID="lnkbtnTenant">
</cc1:ModalPopupExtender>
<asp:Panel ID="panelTenant" CssClass="modalPopup" Style="display: none" Width="400px"
runat="server">
<asp:Button ID="btnTest" Text="Test" runat="server"></asp:Button>
</asp:Panel>
In page_load event of the code, I have checked a condition and disabled the link button when the condition fails.
if (ds.Tables[3].Rows.Count > 0)
{
lnkbtnTenant.Enabled = true;
lnkbtnTenant.Text = "Click to view Tenant Details";
}
else
{
lnkbtnTenant.Enabled = false;
lnkbtnTenant.Text = "Tenant Details not available.";
}
Edited to include the generated-html, posted by OP in the comments:
This is the resulting HTML of the modal pop up:
<div id="ctl00_head_panelTenant" class="modalPopup" style="width:400px;display: none">
<input type="submit" name="ctl00$head$btnTest" value="Test" id="ctl00_head_btnTest"/>
</div>
This is the resulting HTML of the disabled button:
<a id="ctl00_head_lnkbtnTenant" disabled="disabled" class="para1">Tenant Details not available.</a>
It looks like ASP.NET puts a disabled="disabled" attribute onto the anchor, which is not valid HTML. Chrome ignores this non-standard attribute, hence you can still click on the link.

JQuery BlockUI with UpdatePanel Viewstate Issue

I have an update panel within a div that I modal using the JQuery plugin BlockUI. Inside the UpdatePanel is a textbox and a button. When I enter something in the textbox and click the button I am unable to retrieve the text in the textbox. When I debug it shows the textbox having no value.
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="divTest">
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
SERVER-SIDE:
protected void cmdTest_Click(object sender, EventArgs e)
{
string x = txtTestVS.Text;
}
This should clarify things. Here are the total contents of the page.
SHOW MODAL
<div id="divTest">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTestVS" runat="server" /><br />
<asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is a common problem with dialog plug-ins. The problem is when content is put in the blockUI container, it's appended to the element, and no longer in the form being submitted to the server. To solve this you need to edit the blockUI code a bit:
Here's the source: http://github.com/malsup/blockui/blob/master/jquery.blockUI.js
Change this:
Line 262:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to:
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);
and this:
Line 382:
els = $('body').children().filter('.blockUI').add('body > .blockUI');
to:
els = $('form').children().filter('.blockUI').add('form > .blockUI');
That should get you going and the textbox values coming through.
(Response courtesy of Nick Craver https://stackoverflow.com/users/13249/nick-craver)
If you are trying to use blockUI on a button within an update panel (i.e. you click the button within the update panel and the UI gets blocked), you need to handle it using PageRequestManager events
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function() {
$.blockUI({ message: '<img src="../../Content/images/Busy2.gif" />' });
});
prm.add_endRequest(function() {
$.unblockUI();
});
Or on a button click, if you want to display a modal window with this text box and a button, you can try something like this

Resources