Develop Reference

Changing the text of a hyperlink in asp.net on click?

I am trying to change the text of my hyperlink after the user has clicked it. Here is the hyperlink:
<asp:hyperlink id="OpenClose" runat="server" onclick="OpenClose_Click" AutoPostBack="true">Close</asp:hyperlink>
And here is my code behind:
protected void Page_Load(object sender, EventArgs e)
{
OpenClose.Attributes.Add("onclick", "OpenClose_Click");
}
protected void OpenClose_Click(object sender, EventArgs e)
{
if (OpenClose.Text == "Close")
OpenClose.Text = "Open";
else
OpenClose.Text = "Close";
}
The problem is that it does not seem to see the function OpenClose_Click. I am not sure why. Is there another method to do this or am I missing something?
EDIT
Here is the entire aspx code
<%# Page Title="" Language="C#" MasterPageFile="../MasterPageLite.master" AutoEventWireup="true" CodeFile="testPageLoad2.aspx.cs" Inherits="BuilderPages_testPageLoad2" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div class="left_side">
<form id="form1" runat="server">
This is the second test page I am making. Practice collapse and expand panels!
<div class="msg_list">
<h3 class="msg_head">Header-1</h3>
<div class="msg_body">
Collapse this panel!!
<asp:button runat="server" text="Can you see me?" />
</div>
<h3 class="msg_head">Header-2</h3>
<div class="msg_body">
Congratulations you opened the panel!!
</div>
<h3 class="msg_head">Header-3</h3>
<div class="msg_body">
The third panel has been opened!!
</div>
</div>
</form>
</div>
<div class="right_side">
<div class="lBorder">
<asp:Panel ID="OpenClosePanel" runat="server"></asp:Panel>
<asp:HyperLink id="OpenClose" runat="server" AutoPostBack="true" style="cursor:pointer; text-decoration:underline;">Show/Hide</asp:HyperLink>
</div>
<div class="rscontent">
<p>
Lorem ipsum...
</p>
<p>
Nulla...
</p>
<p>
Vivamus...
</p>
<p>
Phasellus...
</p>
<p>
Aenean...
</p>
</div>
</div>
</asp:Content>

You should use a LinkButton instead of a HyperLink control, like this:
Markup:
<asp:LinkButton id="OpenClose"
runat="server"
OnClick="OpenClose_Click"
AutoPostBack="true"
Text="Close"></asp:LinkButton>
Code-Behind:
protected void OpenClose_Click(object sender, EventArgs e)
{
if (OpenClose.Text == "Close")
{
OpenClose.Text = "Open";
}
else
{
OpenClose.Text = "Close";
}
}
The LinkButton class derives from the Button class thus it has similar events to a button, which is the effect you want, but it renders like a hyperlink.

<asp:hyperlink ... is not a valid type of control since .NET is case sensitive. Try changing it to:
<asp:HyperLink ...
I would also get rid of the code in your page load event.

Want to be able to close a Modal Popup when clicked outside of it

I have a modal popup extender and a panel inside of an update panel. I do have a Close button which I bind with the CancelControlId. I however, would like to be able to click outside of my modal/panel to close the panel. (instead of using the close button).
I tried a couple things and a plugin clickoutside. Nothing seems to help. Any help or advice is much appreciated. Thanks.
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="mls_title" class="MLS_Title">
<asp:Label ID="lblTitle1" Text="Tasks" runat="server" class="MLS_titleLbl" /><br />
</div>
<asp:UpdatePanel ID="pnlMap" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="btnMap" runat="server" Text="MAP" CausesValidation="false" CssClass="btnMap" />
<ajax:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
TargetControlID="btnMap"
PopupControlID="panel1"
PopupDragHandleControlID="PopupHeader"
Drag="true"
BackgroundCssClass="ModalPopupBG">
</ajax:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div class="popup_large">
<asp:Label ID="Label7" Text="Floor Plan" runat="server" stle="float:left"></asp:Label>
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="No" ImageUrl="~/Images/no.png" Style="float: right; margin-right: 20px" />
<br />
<asp:ImageButton ID="img" runat="server" Height="30em" Width="45em" />
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Here is a link to an example that adds to the background onclick to close the modal:
http://forums.asp.net/t/1528820.aspx
Copied the key bits here for reference:
function pageLoad() {
var mpe = $find("MPE");
mpe.add_shown(onShown);
}
function onShown() {
var background = $find("MPE")._backgroundElement;
background.onclick = function() { $find("MPE").hide(); }
}
<AjaxToolKit:ModalPopupExtender ID="mdlPopup" BehaviorID="MPE" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />

C#
<AjaxToolKit:ModalPopupExtender .... BackgroundCssClass="jsMpeBackground" />
JavaScript (using jQuery)
jQuery('.jsMpeBackground').click(function () {
var id = jQuery(this).attr('id').replace('_backgroundElement', '');
$find(id).hide();
});

I had to do it this way so that I was able to click the actual popup without it closing, as I have functional user controls such as tab sections and textboxes on the popup.
<script type="text/javascript">
//Hide's Doc Center when clicking outside
function pageLoad(sender, args) {
if (!args.get_isPartialLoad()) {
$addHandler($find("MPE")._backgroundElement, "click", closePopup);
}
}
function closePopup(e) {
$find("MPE").hide();
}
//End
</script>
Now just make sure your BehaviorID in your actual ModelPopupExtender matches up with the tag above. Like so:
<ajaxToolkit:ModalPopupExtender ID="Popup" runat="server" PopupControlID="Container" BehaviorID="MPE" TargetControlID="fakeTargetControl" BackgroundCssClass="modalBackground" CancelControlID="btnCancel" />
Basically I think this just handles the 'click' event of the _backgroundElement attr of the modal popup, and on that event runs the closePopup() function.

write a dynamically created script that is added, in my example, when the modal popup extender is loaded. Note: In order to bind this event handler to the ModalPopupExtender.OnLoad event, you need to add a reference (in client-side code, you can add 'OnLoad="mpeExample_Load"' to your ModalPopupExtender tag).
protected void mpeExample_Load(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"hideModalPopupViaClient", String.Format(#"function hideModalPopupViaClient() {
{
var modalPopupBehavior = $find('{0}');
if (modalPopupBehavior) modalPopupBehavior.hide();}}",
mpeExample.ClientID), true);
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "pageLoad", String.Format(#"function pageLoad() {
{
var backgroundElement = $get('{0}_backgroundElement');
if (backgroundElement) $addHandler(backgroundElement, 'click', hideModalPopupViaClient);
}}",
mpeExample.ClientID), true);}

How can I add selected value in an asp.net ajax toolbox autocomplete to a label?

I have got the Ajax toolkit autocomplete working using the following asp.net and C# code.
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
Search our Languages: <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="txtLanguage" MinimumPrefixLength="1"
ServiceMethod="GetCompletionList" UseContextKey="True">
</asp:AutoCompleteExtender>
<br />
<br />
<asp:Button ID="btnAddSelected" runat="server" Text="Add to chosen Languages >"
onclick="btnAddSelected_Click" />
<br />
<br />
<asp:Label ID="lblSelectedLanguages" runat="server" Text=""></asp:Label>
</div>
</form>
This is my codebehind C#:
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
// Create array of languages.
string[] languages = { "Afrikaans", "Albanian", "Amharic", "Arabic", "Azerbaijani", "Basque", "Belarusian", "Bengali", "Bosnian", "Bulgarian" };
// Return matching languages.
return (from l in languages where l.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select l).Take(count).ToArray();
}
protected void btnAddSelected_Click(object sender, EventArgs e)
{
lblSelectedLanguages.Text += txtLanguage.Text += ", ";
}
The selected language is added to the label when the button is clicked, however I would like to remove the button and make the selected item from the autocomplete added to the label automatically, using the partial postback from the Ajax toolkit.
Can someone please advise as to how I can achieve this?
Thanks.

Handle OnClientItemSelected on the AutoCompleteExtender control to run a javascript function
All the javascript does is simply fire off the TextChanged event when the selection is made (works on both Enter and left click)
ASPX:
<head runat="server">
<title></title>
<script type="text/javascript">
function ItemSelected(sender, args) {
__doPostBack(sender.get_element().name, "");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Search our Languages:
<asp:TextBox ID="txtLanguage" autocomplete="off" runat="server" OnTextChanged="TextChanged" />
<asp:AutoCompleteExtender OnClientItemSelected="ItemSelected" ID="AutoCompleteExtender1"
runat="server" TargetControlID="txtLanguage" MinimumPrefixLength="1" ServiceMethod="GetCompletionList"
UseContextKey="True">
</asp:AutoCompleteExtender>
<br />
<asp:Label ID="lblSelectedLanguages" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Code behind:
protected void TextChanged(object sender, EventArgs e)
{
lblSelectedLanguages.Text += txtLanguage.Text += ", ";
}

It looks like you just need to hook onto the on text changed event of your text box and then put your logic in code benind.Something like this
Markup
<asp:TextBox ID="txtLanguage" OnTextChanged="txtLanguage_textChanged" AutoPostback="true" />
Then in your code behind
protected void txtLanguage_textChanged(object sender, EventArgs e)
{
//use the retrieved text the way you like
lblSelectedLanguages.Text =txtLanguage.Text;
}
Hope this helps.I would also suggest that you try looking into the JQuery autocomplete widget.It has brought me sheer happiness and I surely did divorce the autocomplete extender.
Jquery Autocomplete

Accessing <div> from both javascript and code-behind

I have a div with style="display:none". The div should become visible on pressing an html button:
function JSAdd() {
document.getElementById('divDetail').style.display = "block";
}
<div style="float:left">
<div id="ctl00_MainContent_upnlLbRD">
<select size="4" name="ctl00$MainContent$lbRD" id="ctl00_MainContent_lbRD" style="width:188px;">
<option value="5">one</option>
<option value="1">two</option>
</select>
<input id="btnAdd" type="button" value="Добавить" onclick="JSAdd();" />
<input id="btnEdit" type="button" value="Редактировать" onclick="JSEdit();" />
</div>
<div id="ctl00_MainContent_divDetail" style="display:none" clientidmode="static">
<div id="ctl00_MainContent_upnlDescription">
<div>
<span id="ctl00_MainContent_lblDescription">Описание:</span>
<input name="ctl00$MainContent$txtDescription" type="text" id="ctl00_MainContent_txtDescription" />
<span id="ctl00_MainContent_txtDescriptionRequiredFieldValidator" style="color:Red;visibility:hidden;">Описание является обязательным для заполнения</span>
</div>
<input type="submit" name="ctl00$MainContent$btnSave" value="Сохранить" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSave", "", true, "", "", false, false))" id="ctl00_MainContent_btnSave" />
I need to be able to make the div invisible again from code-behind. I cannot access the div unless it is runat="server". But when I add runat="server", the div doesn't become visible on pressing the button from the javascript function above. Could you please help me with this?
Thanks,
David

You can access a div in code-behind by adding the runat="server" attribute. Adding this attribute does change the way you access the element in JavaScript though:
var el = document.getElementById("<%=div1.ClientID%>");
if (el){
el.style.display = "none"; //hidden
}
There are two ways to adjust the visibility from code-behind, but since you're setting display:none in JavaScript, you'd probably want to use the same approach in code-behind:
div1.Style["display"] = "block"; //visible
In code-behind, you can also set the Visible property to false, but this is different because it will prevent the element from being rendered at all.
EDIT
If the div is still showing with display:none present, you probably have an unclosed tag or quote somewhere affecting the markup. Double check and make sure that the markup is valid.

Use a Panel, it renders as a classic div
<asp:Panel runat="server" ID="divDetail" ClientIDMode="Static" />

You have a few options, use ClientIDMode="Static" or use the dynamic ClientID at run-time. Both of these options give you server-side access to the object.
Dynamic:
<div id="divDetail" runat="server" />
//or
<asp:panel id="divDetail" runat="server" />
function JSAdd() {
document.getElementById('<%= divDetail.ClientID %>').style.display = "block";
}
//to hide from code-beind
divDetail.Attributes.Add("style","display:none;");
Static(.NET 4.0 +):
<div id="divDetail" runat="server" ClientIdMode="Static">
//or
<asp:panel id="divDetail" runat="server" ClientIdMode="Static" />
function JSAdd() {
document.getElementById('divDetail').style.display = "block";
}

When runat="server" is applied to an element, asp.net ensures that it has a unique ID by mangling it. Simply ask asp.net for the real client id:
function JSAdd() {
document.getElementById("<%=div1.ClientID%>").style.display = "block";
}
Alternatively, you could tell asp.net to leave your ID alone by adding this to your div:
<div id="div1" runat="server" clientidmode="Static">
Resources:
ClientIdMode="Static" docs

In ASP.NET, to make IDs unique (if multiple control loaded where same ID are specified), ID on elements are often follow a convention like ctl00_container1_container2_controlID and this is what returned when you call control.ClientID.
If you consider such a case where there's same ID on the serverside and you loaded those two controls in your page, you may consider using jQuery and life would be easier with runat="server" with just matching the ID with the end part:
function JSAdd() {
$("div[id$=divDetails]").show();
}

Simplest technique will be to use Javascript/Jquery to Changes Display property of the Div. if not that you can use following code
<form method="post" runat="server">
<div style = "display:none" id= "div1" runat ="server" >Hello I am visible</div>
<asp:Button Text="display Div" runat ="server" ID ="btnDisplay" OnClick = "displayDiv" />
<asp:Button Text="display Div" runat ="server" ID ="btnHideDiv" OnClick = "hideDiv" />
</form>
code behind code is as follows
protected void displayDiv(object sender, EventArgs e)
{
div1.Style.Clear();
div1.Style.Add("display", "block");
}
protected void hideDiv(object sender, EventArgs e)
{
div1.Style.Clear();
div1.Style.Add("display", "none");
}
guess you Got your solution

UpdatePanel, ModalPopupExtender, and enter keypress issues

Have an UpdatePanel that contains 2 panels with default buttons set to listen to enter key presses. That UpdatePanel is the PopupControl for a ModalPopupExtender.
Running into an issue when pressing enter in the modal popup in which the entire page posts back. Any ideas? Here are some code snippets (I've removed the extraneous fields...):
<div runat="server" id="divShippingEstimatorPopup" class="shippingEstimatorModalPopup">
<asp:UpdatePanel ID="upPopup" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlShippingEstimator" DefaultButton="lnkbtnGetEstimates">
<div class="title content_title">Shipping Estimator</div>
<asp:Label runat="server" ID="lblMessage" />
<table cellpadding="0" cellpadding="0" class="shipping">
<!-- Removed to shorten code snippet -->
<tr>
<td colspan="2">
<div class="buttonHolder">
<Monarch:LinkButtonDefault runat="server" ID="lnkbtnGetEstimates" CssClass="button_action button_margin_right" CausesValidation="false">Get Estimates</Monarch:LinkButtonDefault>
<asp:LinkButton runat="server" ID="lnkbtnCancel" CssClass="button_secondary button_secondary_fixed" CausesValidation="false">Cancel</asp:LinkButton>
<div class="clear"></div>
</div>
<div class="clear"></div>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="pnlShippingOptions" DefaultButton="lnkbtnSetEstimate">
<div class="shippingOptionsHolder" runat="server" id="divShippingOptionsHolder">
<!-- Removed to shorten code snippet -->
<div class="buttonHolder">
<Monarch:LinkButtonDefault runat="server" ID="lnkbtnSetEstimate" CssClass="button_action">Set Estimate</Monarch:LinkButtonDefault>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the LinkButtonDefault is just this:
public class LinkButtonDefault : LinkButton
{
private const string AddClickScript = "SparkPlugs.FixLinkButton('{0}');";
protected override void OnLoad(EventArgs e)
{
string script = String.Format(AddClickScript, ClientID);
Page.ClientScript.RegisterStartupScript(GetType(), "click_" + ClientID,
script, true);
base.OnLoad(e);
}
}
Finally, here is the rest of the control:
<asp:UpdatePanel runat="server" ID="upGetEstimate">
<ContentTemplate>
<asp:LinkButton runat="server" ID="lnkbtnGetEstimate" CausesValidation="false">Get Estimate</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolKit:ModalPopupExtender ID="shippingEstimatorPopupExtender" runat="server" TargetControlID="lnkbtnFake" PopupControlID="divShippingEstimatorPopup" BackgroundCssClass="monarchModalBackground"></ajaxToolKit:ModalPopupExtender>
<asp:LinkButton runat="server" ID="lnkbtnFake" style="display:none;"/>
<Monarch:PopupProgress ID="popupProgressGetEstimate" runat="server" AssociatedUpdatePanelId="upGetEstimate" />
<Monarch:PopupProgress ID="popupProgressGetEstimates" runat="server" AssociatedUpdatePanelId="upPopup" />
Basically, the user clicks Get Estimate, a progress bar appears while it loads the form, the form shows in a modal popup. I'm guessing this is something simple, but I can't just get the right combination to get this working properly.

First of all try what happens if you use your scriptmanager to register script in the code behind.
I use this method for registering scripts:
public static void RegisterStartupScript(Control c, string script)
{
if ((ToolkitScriptManager.GetCurrent(c.Page) as ToolkitScriptManager).IsInAsyncPostBack)
ToolkitScriptManager.RegisterStartupScript(c, c.GetType(), "Script_" + c.ClientID.ToString(), script, true);
else
c.Page.ClientScript.RegisterStartupScript(c.GetType(), c.ClientID, script, true);
}
This checks if you have ScriptManager in your page. If it doesn't, it uses the full postback version.