Develop Reference

how to add hide event to the button in webform?

im trying to hide div by clicking the button, but it does hide it for a second and return the div (looks like it refreshing page).here is my html code :
<div id="page">
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
and here is my jquery code:
$(document).ready(function () {
$("#Button1").click(function () {
$("#page").hide();
});
});

What Rick said in his answer AND you need to add Type="Button" to your button.
<Button ID="Button1" type="button">Button</button>
The default button type is submit, which will cause the page refresh. AND, as Rick mentioned, ASP buttons will also submit. So, you need to use an HTML button and set the type="button" attribute.
From MDN
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute
is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are
triggered when the events occur.

An ASP Button with runat="server" causes a server post-back. If you aren't going to be acting on that click from the server, just use a client-side button like:
<button id="Button1" type="button">Button</button>

Set the client id mode to static on the button, then it'll work. It's not working because that hasn't been specified so the name is changing.
<asp:Button ID="Button1" ClientIDMode ="Static" runat="server" Text="Button" />
If you wanted to disable the postback to simply hide something without processing anything, then just using a client side button is the best option.

ASP.NET postback: where is code-behind method called

I am new to C# and ASP.NET. I have a jQuery yes/no dialog that calls serverside methods (code-behind) using postback.
I put the code together using some snippets I've found on the internet, but I don't fully understand how the code is working.
If I click "yes" in the jQuery dialog, then the server-side C# method DeleteConfirmedServerside is called.
However I don't understand why it works because in the rendered html code I don't see a reference to the server-side method.
I've read some articles about javascript postback... but still I don't understand why the following code works:
.aspx file
// jQuery code (Dialog with yes/no Buttons)
buttons: [
{
id: "Yes",
text: "Yes",
click: function ()
{
$("#btnDeleteConfirmedClientside").click();
}
},
....
<asp:Button ID="btnDeleteCanceledClientside" runat="server"
OnClick="DeleteCanceledServerside" Text="DeleteCanceled"
UseSubmitBehavior="false" style="display:none"/>
<asp:Button ID="btnDeleteConfirmedClientside" runat="server"
OnClick="DeleteConfirmedServerside" Text="DeleteConfirmed"
UseSubmitBehavior="false" style="display:none" />
<div id="myDialog" style="display: none" >
Do you want to delete this record?
</div>
Code-behind (server side)
protected void DeleteConfirmedServerside(object sender, EventArgs e)
{
// called by postback from clientside
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Delete confirmed (YES).')", true);
}
Rendered HTML client side:
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
...
<input type="button" name="btnDeleteCanceledClientside" value="DeleteCanceled"
onclick="javascript:__doPostBack('btnDeleteCanceledClientside','')"
id="btnDeleteCanceledClientside" style="display:none" />
<input type="button" name="btnDeleteConfirmedClientside" value="DeleteConfirmed"
onclick="javascript:__doPostBack('btnDeleteConfirmedClientside','')"
id="btnDeleteConfirmedClientside" style="display:none" />
<div id="myDialog2" style="display: none" >
Do you want to delete this record?
</div>
If the user clicks "yes" in jQuery dialog, then btnDeleteConfirmedClientside is "clicked" and then __doPostBack('btnDeleteConfirmedClientside&...) is called (at least this is what I understand)
What I don't understand is this in the rendered html:
onclick="javascript:__doPostBack('btnDeleteConfirmedClientside','')
Why is __doPostBack using btnDeleteConfirmedClientside and not the server-side code-behind method DeleteConfirmedServerside?
DeleteConfirmedServerside is called - but how is this happening, since nowhere in the HTML I see a reference to serverside methods... so how is the C# code-behind method DeleteConfirmedServerside called ?

The __doPostBack javascript method makes a post back to the server, effectively requesting that your server side method be called.
The hanlding of this HTTP post request is handled behind the scenes and calls your server side method.
If you're new to asp.net, I recommend that you start by having a look at http://www.asp.net/mvc and use asp.net mvc rather than asp.net webforms which is what you're using. MVC is the latest and greatest and has many advantages over webforms.

asp.net controlIDs

I have the following code:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
function beginRequestHandle(sender, Args) {
//Do something when call begins.
document.getElementById("btn1").style.visibility = "hidden";
document.getElementById("btn2").style.visibility = "hidden";
}
function endRequestHandle(sender, Args) {
if (document.getElementById('<%= hfResultsCount.ClientID %>').value != 0) {
document.getElementById("btn1").style.visibility = "visible";
document.getElementById("btn2").style.visibility = "visible";
}
else {
document.getElementById("results").innerHTML = "<br><b><center><font style='font-family:Haettenschweiler; font-size:xx-large'>No data found, please try again.</b></font></center>";
}
}
</script>
and the code for btn2:
<input type="button" runat="server" name="btn2" id="btn2" value="New Window"
style="visibility:hidden;font-weight:bold;width:200" onclick="window.open('http://microsoft.com');" />
I am using Js to show/hide buttons (needs to be done like this so don't suggest otherwise) and while btn1 is asp:button it always works but for <input type=button> I keep getting this error
Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined
The way to fix that for btn1 was to just add ClientID=Static but how to do that for <input> button? (I do not want to make it asp:button since I need it to not postback)
Everything is in an UpdatePanel with ClientID=Static also.
I know its something to do with the IDs and the master page since it works fine on a page on its own.

If you do not need to access button on server side then you should not put runat="server", This will make your script to find button and it will not generate error.
<input type="button" name="btn2" id="btn2" value="New Window"
style="visibility:hidden;font-weight:bold;width:200" onclick="window.open('http://microsoft.com');" />
OR, If you want to make runat="server" you can access it like this
document.getElementById(<%= btn1.ClientID %>).style.visibility = "visible";

After the page rendering go to view source and check how ID is appearing with master page you may get some idea
It might not be btn directly....master_xxx

This should work :
<input type="button" runat="server" ClientIDMode="Static"
name="btn2" id="btn2" value="New Window"
style="visibility:hidden;font-weight:bold;width:200"
onclick="window.open('http://microsoft.com');"/>
or, if you don't need to access the control in your code behind :
<input type="button" name="btn2" id="btn2" value="New Window"
style="visibility:hidden;font-weight:bold;width:200"
onclick="window.open('http://microsoft.com');"/>

asp post back issue and html controls

My html.
<input id="rdb1" type="radio" name="rdbData" checked="checked" />
<input id="rdb2" type="radio" name="rdbData" />
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
Button is only asp:button but radio buttons are not.First time when page is load rdb1 is selected.But when i click the button btnTest with check rdb2, page is refreshed and select 1st redio button.To prevent this i try jquery like this.
Inside Document.ready:
var btnTest = "<%=btnTest.ClientID %>";
$('#' + btnTest).bind("click", function() {
if ($('#rdb1').attr("checked")) {
$('#rdb2').attr("checked", false);
$('#rdb1').attr("checked", true);
}
else {
$('#rdb1').attr("checked", false);
$('#rdb2').attr("checked", true);
}
});
But its not work.How can we handle this type of situation.Where i am getting wrong.Any idea or any alternative.Thanks.

If that is the request I would suggest you have a hidden field (server side) which will keep the state of which input radio button is selected (use jquery to update the hidden field when user clicks on the radio buttons). Then on postback as the hidden field is set at runat="server" it will maintain its value (viewstate) and you can simply use jquery to set the right radio button as selected. Does that make sense ?

I repeat that the requirement is ABSURD. How are they going to tell you used server-side controls without looking at the code anyway. This is like requiring that you write the code using chopsticks or something.
However just as an exercise I provide the following solution:
<input id="rdb1" type="radio" name="rbdData" value="rbd1" <%= Rdb1Checked %> />
<input id="rdb2" type="radio" name="rbdData" value="rbd2" <%= Rdb2Checked %> />
<asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />
And the code behind:
protected string Rdb1Checked
{
get
{
if (IsPostBack)
{
if (Request["rbdData"] == "rbd1")
{
return "checked";
}
else
{
return "";
}
}
return "checked";
}
}
protected string Rdb2Checked
{
get
{
if (IsPostBack)
{
if (Request["rbdData"] == "rbd2")
{
return "checked";
}
else
{
return "";
}
}
return "";
}
}
Ask why they have these requirements. Maybe they don't want to see the client IDs in which case you may set the ClientIDMode to Static and avoid auto generated IDs. You can remove them completely by setting them to null, etc. Maybe they don't like what Web Forms renders for Radio buttons in which case using server side inputs would be OK. The requirement on its own simply does not make sense.

Shree
The fact is that client click (added by jQuery) executes before the call to server. If you want to persist the selectin, try using server sided controls:
<input id="rdb1" type="radio" name="rdbData" checked="true" runat="server" />
<input id="rdb2" type="radio" name="rdbData" runat="server" />
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
Try this if it does work for you.
Hope it helps.

When the "Test" button is clicked, the page posts back to the server, which re-renders all client-side controls just as if the page has been loaded for the first time. Since the entire page is reloaded, jQuery will also "forget" about the state of the controls, so that approach won't work either. The simplest way to prevent this is to ensure the radio buttons run on the server side. For instance:
<asp:RadioButton id="rdb1" Checked="True" GroupName="RadioGroup1" runat="server" />
<asp:RadioButton id="rdb2" GroupName="RadioGroup1" runat="server" />
Hope that helps!

What do you mean? That you have a requirement that does not let you use "servr side controls" or that your IDE does not allow that?
By definition, in ASP.NET all HTML controls inherit from a server control. Simply adding runat="server", you can access that control from codebehind, although it will still render in page as a normal HTML control.

Calling c# function from javascript

I want to call a c# function from my javascript function.
I have a link button in my ascx (please see the code below). The problem is that if you press enter in firefox is not working however it is working fine in internet explorer.
<li class="clearfix border_top">
<label for="title" class="first_column bold">Search For</label>
<div class="contactUs_details">
<input type="text" id="advanced_txtBox1" name="advanced_txtBox1" class="searchbox" runat="server" style="width:300px;" />
<asp:CheckBox ID="chkSearchBDJ" runat="server" Text="Search BDJ" CssClass="checkboxlistnoborder" />
</div>
</li>
<div class="img_SearchNow">
<asp:LinkButton ID="btnSearchNow" CausesValidation="true" runat="server" OnClick="btnSearchNow_Click"></asp:LinkButton>
</div>
I have linkButton see above on which I have called on c# function on Click, But if you pree some text in above textbox and press "Enter" it should automatically call function "btnSearchNow_Click". It is working fine in IE but not working in Firefox.

A javascript function to click a button...
function clickMyButton() {
var ele = document.getElementById('btnSearchNow');
if ((ele !== null) && (ele != 'undefined')) {
ele.click();
}
}
The wording of your question could use some cleaning up, or some additional information.
If you are looking for pseudo-submit behavior from inside a text box, take a look at this post. Submit Login control button when I hit Enter
You will have to generate the javascript from the server side, since you are using an ASCX and the ID's are not the ones you defined.

You need to have a submit type on the page for it to work properly in firefox.
<input id="mysubmit" runat="server" type="submit" onclick="return false;" style="display: none;" />
Edit: Here's a google cached page that has more information. The original post doesn't seem to be available ATM, but good old google had it.