Develop Reference

OnKeyPress or some type of event that happens as soon as a value has changed in a textbox?

I'm working in C# /ASP.Net and I'm trying to figure out a way to write some code that will run as soon as a textbox's value changes. In Access this would probably be done with a KeyPress event, but I'm using C#. I know nothing about Javascript, and I know there's an OnBlur event for a textbox but it only takes Java.
Is there any way to do this using only C# code-behind and ASP.Net, or am I going to have to suck it up and teach myself Javascript?
What I want to do is determine if any change has been made to a textbox at the moment of the keystroke, and if so I need to change the "Visible" properties of two buttons so that button1 is visible and button2 is not. If no change has been made by the time I get to the OnTextChanged event, then button2 is visible and button1 is not.

There is no way to do this that is native to Asp.Net. You will have to learn a little javascript or jQuery. For example, in native js:
<asp:TextBox runat="server" ID="txt" ClientIDMode="Static" onkeyup="onEnterText()"></asp:TextBox>
<asp:Button runat="server" ID="btnOne" ClientIDMode="Static" Text="One" style="display:none;" />
<asp:Button runat="server" ID="btnTwo" ClientIDMode="Static" Text="Two" />
<script type="text/javascript">
function onEnterText() {
var text = document.getElementById("txt").value,
one = document.getElementById("btnOne"),
two = document.getElementById("btnTwo");
if (text.length > 0) {
one.setAttribute("style", "display:inline;");
two.setAttribute("style", "display:none;");
} else {
one.setAttribute("style", "display:none;");
two.setAttribute("style", "display:inline;");
}
}
</script>
ClientIDMode="Static" is important because it ensures that the control's ID is unchanged (Asp.Net usually creates a client id based on the control hierarchy), enabling you to find the control in javascript.
Also bear in mind that your buttons' visibility will need to be managed during postbacks to mirror the client-side logic.

Changing An iframe source from the listbox

I want to change the source of the iframe from a listbox. And here is my code.
<iframe id="iframeID" frameborder="0" width="100%" height="300px"></iframe>
<asp:Button ID="btnView" runat="server" Text="Pop Up HTML Preview"
OnClientClick="ShowPopUp();" />
ShowPopUp = function() {
var x = document.getElementById('<%=ListBox1.ClientID %>');
var val = x.options[x.selectedIndex].Value;
document.getElementById("iframeID").src = val;
But error says I have an undefined iframe.
What is wrong?
Please help me. Thanks :)

You may change the source using jquery:
$("#content").attr('src', 'http://your new source here');
so you can invoke this method when the selected item in the listbox is changed.

If it doesn't do anything from C#, make a normal button - ASP tends to add fancy prefixes to its controls' IDs (like ContentPlaceHolder1_btnView), and those can't be accessed that way by .ID from C# code. So you can either chceck these IDs (which are able to change if you move them somewhere else) by browser's source code inspector, or use
<input type="button" ID="btnView" Value="Pop Up HTML Preview"
OnClick="ShowPopUp();" />
(Modify your JS accordingly)

use value, JavaScript is case sensitive
var val = x.options[x.selectedIndex].value;
and change OnClientClick as below
<asp:Button ID="btnView" runat="server" Text="Pop Up HTML Preview"
OnClientClick="ShowPopUp(); return false;" />
Button click event make full post back request to server. So again your Ifram will have default src value after postback. Here you have not given value as default src. So nothing will get after click on button. after you add return false button click will not postback after click.

How to make an html element contain text when an ASP:Button is pressed?

I've got a DIV which contains some text in it.
Ive also got an asp:Button, which when pressed I would like to retrieve this text. However, it appears that as soon as I press the button, the DIV's contents is reset - most likely due to postback.
The DIV has got runat=server". Does anyone have any idea as to what may be done to make this DIV retain its contents on pressing the button? The data is manipulated countless times before the button is pressed, so I would like to try avoiding updating a Session every time.

Try something like this:
getText = function(){
alert($("#<%=Panel1.ClientID%>").text());
return false;
}
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<asp:Button ID="Button1" runat="server" OnClientClick="return getText();" ... />
You can also try this:
$("#<%=Button1.ClientID%>").click(function(){
alert($("#div1").text());
return false;
});

One way would be grabbing button click event in your makrkup, store your DIV content in a hidden field, then fire postback manually in your button click.

Try using an asp:Panel. It renders as a DIV and you have access to all of its properties at all points in the page life cycle.

another way is to use Ajax. specifically - updatepanel control

You can store you DIV content in a hidden field by calling a JavaScript function in onClientClick event of the button - it will execute just before OnClick event, before postback. This way, there's no need to fire postback manually.
Let's say you have one div, one hidden field and button with onClientClick and OnClick events. You use simple JavaScript function for the job:
<div id="myDiv" runat="server" ></div>
<asp:Button ID="btnGetDiv" runat="server" Text="Get div value" OnClick="getValueOnServer" OnClientClick="setHiddenFieldF()"/>
<asp:HiddenField ID="hf" runat="server" />
<script type="text/javascript">
function setHiddenFieldF() {
var nevValue = document.getElementById('<%= myDiv.ClientID %>').innerHTML;
document.getElementById('<%= hf.ClientID %>').value = nevValue;
}
</script>
Then, on the server, just use the value of the hidden field.

You can't read your DIV's content because it is not send to the server in the postback. Only values of form elements (<input>, <textarea>, <select>, etc.) are send.
If you really want to read DIV's content, you can copy it to the hidden input (as wrote Kavousi).
Just add hidden field to your page:
<asp:HiddenField ID="hidden" runat="server" />
And then in code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Page.Form.Attributes["onsubmit"] = string.Format(#"$(""#{0}"").val($(""#{1}"").html());", hidden.ClientID, div.ClientID);
}
}
(div is your div's name).
You can then read div's content by reading hidden.Value.

How to show/hide buttons contain in a template by javascript

I have two asp.net buttons inside a template (Expand and Collapse)
I want to implement a simple client side javascript function to hide the expand button after press it and show the collapse button and vice versa.
<asp:Button ID="btnExpand" runat="server" CommandName="Expand"
CommandArgument='<%# Container.DataElement("Id")%>' Text="+" />
<asp:Button ID="btnCollapse" runat="server" CommandName="Collapse"
CommandArgument='<%# Container.DataElement("Id")%>' Text="-" />
I tried OnClientClick event but I didn't know how to get the sender button and the second button from javascipt because they're in a template and their IDs will be generated.
I tried also to change their visibility from the code behind in the server (by Visible property) but the problems is the event handler will be fired after the postback and the changes will not be applied in the client.
Any help !!
sorry if the question is silly, I'm new in the web development.
Thanks in advance.

Use ClientID like:
<!-- Supposing you have the following button control -->
<asp:button id="myButton" runat="server" />
<script type="text/javascript">
var theID = '<%= myButton.ClientID %>';
// Now do whatever you like with it.
</script>

Be careful where you place that code. You need to make sure that the html client renderer has finished creating that item.

In the function where you are implementing the hide and show template, put $("#buttonID").hide();.

PostingBack from ModalPopup, but keeping it visible?

I have a ModalPopup that will contain a gridview and 4 fields to enter items into the gridview itself.
Is it possible to postback to the server and update the gridview while keeping the modal open?
When you submit the fields and the postback occurs the modal closes has anyone done this before? Someone mentioned a solution using jQuery, but this was long ago.

Wrapping the popup's content (i.e. not the popup itself!) in an UpdatePanel worked for me.
My popup content is a search panel with sortable/pageable grid of results. The UpdatePanel gave me the exact behaviour I require with no additional code.
Thanks to Patel Shailesh for the idea.
<asp:Panel runat="server" ID="PopupPanel" Height="650" Width="900" Style="display: none">
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<!-- popup content -->
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajax:ModalPopupExtender runat="server" ID="PopupExtender" PopupControlID="PopupPanel"
TargetControlID="PopupButton" />
<asp:Button runat="server" ID="PopupButton" Text="Popup" />

The key to doing this is going to be using AJAX of some flavor -- Microsoft.Ajax or jQuery Ajax. If the UpdatePanel is not working, then I'd suggest using jQuery to submit back to the server using AJAX. This would involve creating a WebMethod to accept the AJAX post on the server side and instrumenting the client-side with jQuery to send the request/receive the response. Without seeing your HTML it's a little hard to be very specific.
Basic idea:
$(function() {
$('#modalSubmitButton').click( function() {
$.ajax({
url: 'path-to-your-web-method',
dataType: 'json', // or html, xml, ...
data: function() {
var values = {};
values['field1'] = $('#field1ID').val();
...
values['field4'] = $('#field4ID').val();
return values;
},
success: function(data,status) {
... update page based on returned information...
}
... error handling, etc. ...
});
return false; // stop any default action from the button clicked
});
});

I am not sure if this would work, but try to put whatever inside the modalpopup in a UpdatePanel
Please if this works don't hate me after you release, I hate updatepanels too

A kind of ugly option is to force a postback when showing the modal popup in the first place and setting a ViewState["ModelPopupOn"] = true; and then check that on page load and finally postback again and set it to false/remove it from viewstate when closing the popup.
(these kind of issues are why I hate the ajax toolkit)

I was experimenting with the modalpopupextender, and find a ugly solution.
If the modal panel has a button that makes the postback to happen
<asp:Panel runat="server" ID="PopupPanel" Height="650" Width="900" Style="display: none">
<asp:Button ID="OkButton" runat="server" Text="OK" OnClick="OkBtn_Click" />
</asp:Panel>
If the OkBtn_Click in the code-behind has a call to:
System.Web.HttpContext.Current.Response.Write("<script></script>");
Then the modalpopupextender is not closed.
This happened too to this guy:
http://forums.asp.net/t/1591860.aspx