asp:Button not displaying correctly - c#

this is my scenario:
I want to display a button(btnGenerate) based on the amount of rows displayed in my gridview. I've gotten it to display for a second then it goes away again. I'm using the onclientclick of one of my other buttons(btnImport). What I think is causing the problem is that on the same button(btnImport)'s OnClick event two gridview's performs for each a databind. Could this be the problem? I have written a script using javascript to perform this task from the client side. Is there a better way to do it? What can I do to fix my problem?
Here is my code that I have so far:
<asp:Button runat="server" ID="btnImport" Text="Load Data from File"
BackColor="#990000" ForeColor="White" nowrap OnClick="btnImport_Click"
style="display:none" OnClientClick="DisplayButtonGenerate()"/>
<asp:Button ID="btnGenerate" runat="server" Text="Generate New Stock Codes"
BackColor="#990000" ForeColor="White" OnClick="btnGenerate_Click"
style="display:none" />
I have two gridviews : ErrorsGrid that displays all the faulty records and InventoryGrid that displays the records that are correct. Like I said above, the idea is to display btnGenerate if ErrorsGrid has rowCount=0.
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
FinalMessage.AppendLine(_InsertWrapper.PostData());
}
Here is the script:
<script language="javascript" type="text/javascript">
function DisplayButtonGenerate() {
var rowCount = <%=ErrorsGrid.Rows.Count %>;
var buttonGen = document.getElementById("<%=btnGenerate.ClientID%>");
if(rowCount == 0)
{
buttonGen.style.display = "block";
}
}
</script>

Your btnImport has server-side OnClient and client-side OnClientClick both set. I guess what's happening is the client-side is called first, shows the button, then the server-side one kicks in, the page gets refreshed from the server, and your button is hidden again. You can do it in one way or another, but not both:
Server-side: Remove the OnClientClick & style="display:none" & JavaScript, set the Visible property of the button to false, and in the code-behind click event on the server add:
if(ErrorsGrid.Rows.Count == 0)
btnImport.Visible = True;
Client-side: Return false from the JavaScript function to the OnClientClick:
OnClientClick="return DisplayButtonGenerate()"
function DisplayButtonGenerate() {
....
return false;
}

If you want to update InventoryGrid,ErrorsGrid grid controls in code after you click a button, you need to keep those in a UpdatePanel
<asp:UpdatePanel ID="upnl" runat="server" UpdateMode="Conditional">
<contenttemplate>
InventoryGrid,ErrorsGrid mark up
</contentTemplate>
<Triggers>
//set async trigger as btnImport
</Triggers>
</asp:UpdatePanel>

Let's breakdown your problem into steps.
you click on btnImport, it first calls the OnClientClick, does client side processing
and then does a full postback, goes to server side and processes its server side handler OnClick.
after the OnClick handler is processed, the page again renders, the unconditioned code in the btnGenerate display:none again runs, and the default state is again rendered.
you see the problem? even if you are manipulating certain logic in your clientClick, it all resets on page reload, because your btnImport is doing that.
Solutions:
there are couple of things I can suggest.
Use UpdatePanel to prevent Postback of the entire page or
make your btnImport a client side button altogether, and do a post using xhr or jQuery's ajax.
Set the visibility of btnGenerate on the server side itself
most simple would be the 3rd one i.e. remove the onclientclick event from the code and change your btnImport to do this:
protected void btnImport_Click(object sender, EventArgs e)
{
InventoryGrid.DataBind();
ErrorsGrid.DataBind();
//set visibility of btnGenerate in Page_Load also;
btnGenerate.Visible = ErrorsGrid.Rows.Count == 0;
}
and remove display:none from btnGenerate from client

There's no need for a JS function here.
Simply check the datasource for ErrorsGrid if count != 0 and if it's not just set the visibility of your button in codebehind.

If i've understood your req. correctly, setting 'Visbible' property of button to true or false should work. i.e btnGenerate.Visible=true/false. Initially you can set the button visibility as false then based on the record count you can modify it in the required event handler.

Related

How to change button's onclientclick property server side?

I have a button as follows:
<asp:Button ID="btnNext" runat="server" Font-Bold="true" Text="Next"
onclick="btnNext_Click" style="text-align: center" Width="80px" />
and a RadNumericTextBox:
<telerik:RadNumericTextBox ID="txtTotal5" runat="server" Width="50px" AutoPostBack="true"
MinValue="0" ontextchanged="txtTotal5_TextChanged"><NumberFormat DecimalDigits="0" /></telerik:RadNumericTextBox>
I need to set the onClientClick property based on whether a telerik RadNumericTextBox has text in it or not. If it does not have a value, the onClientClick property needs to be set as shown below. If there is a value in the box, I want to just go on to the onclick event which directs it to the next form.
protected void txtTotal5_TextChanged(object sender, EventArgs e)
{
if (txtTotal5.Value.ToString() == "")
{
btnNext.OnClientClick = "javascript: return confirm('Please have the employee complete this form.')";
}
else
{
btnNext.OnClientClick = "";
}
}
Now I have used the debugger several times to step through the code, and the value changes as I expect within the function, but even when it sets the OnClientClick property to "", the box still pops up when the button is clicked. Is the value not being passed to the client somehow? Any suggestions would be appreciated. Thanks in advance!
You need to add the OnClientClick to the Attributes collection of the button, like this:
btnNext.Attributes.Add("OnClientClick", "YourJavaScriptFunction();");
I have found a solution for my issue. I left the function above as is, but I basically copied the if-else into my page_load event inside if(IsPostBack).

Disable buttons onclick in asp wizard

I have an asp wizard on my page with three steps.
<asp:Wizard ID="wizardBestellen" runat="server" ActiveStepIndex="0" DisplaySideBar="False" onfinishbuttonclick="wizard_NextButtonClick" onnextbuttonclick="wizard_NextButtonClick" onpreviousbuttonclick="wizard_PreviousButtonClick">
<StartNavigationTemplate></StartNavigationTemplate>
<StepNavigationTemplate></StepNavigationTemplate>
<FinishNavigationTemplate></FinishNavigationTemplate>
<WizardSteps>
<asp:WizardStep runat="server" ID="step1" StepType="Start">
<uc1:control ID="uc1" runat="server" />
</asp:WizardStep>
<asp:WizardStep runat="server"ID="step2" StepType="Step">
<uc2:control ID="uc2" runat="server" />
</asp:WizardStep>
<asp:WizardStep ID="step3" runat="server" StepType="Finish">
<uc3:control ID="uc3" runat="server" />
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
Now every control has a next and a previous button which after the click validates your data and sends you to the next step. The buttons all look like:
<asp:LinkButton ID="bntPrevious" runat="server" CommandName="MovePrevious" CssClass="buttonOrange" CausesValidation="false"><span>Previous</span></asp:LinkButton>
<asp:LinkButton ID="btnNext" runat="server" CommandName="MoveNext" CssClass="buttonOrange" CausesValidation="true"><span>Next</span></asp:LinkButton>
So far it all works perfectly..
Now i wanted to disable the buttons after clicking on it and show a div with a loader image. So i created a div named divLoader and a javascript function which hides the div the buttons are in and shows the div with the loader.
function ToggleDiv(divButton, divLabel)
{
if (divButton.style.display == 'block')
{
divButton.style.display = 'none';
divLabel.style.display = 'block';
}
else
{
divButton.style.display = 'block';
divLabel.style.display = 'none';
}
}
But i can't get this to work. The ToggleDiv function works great in another situation, so thats not the problem.
I've tried calling the function from the OnClick attribute in the linkbutton but this gave me an error. I tried the OnClientClick, but this didn't work and i also tried setting the onclick attribute in the code behind, this also was a dead end.
Can anybody explain to me what i am doing wrong or is there another way to prevent users clicking the button twice?
Sounds like you're not getting the binding to work.
The first thing I would do is check the emitted control IDs by doing a view-source. Some implementation of the .NET framework add extra fluff to these control IDs, so can't guarantee that it will be the same as appears on the form.
Next, I would try some JavaScript late binding. If you have a JavaScript file, put it there. If not create one or add a JavaScript block to the foot of your form (create a new file for preference).
All this would be much easier with a JAvaScript lbrary such as jQuery, but for the moment lets assume you don't have one.
Add a window onload event handler
window.onload = function(){
//code to go here
}
Now add the click binding for your button:
window.onload = function(){
document.getElementById("***YOUR BUTTON ID***").onclick = function(){
ToggleDiv(this, document.getElementById("***YOUR LABEL ID***"));
}
}
I said this would be a little easer with jQuery, well, this is the equivalent implementation:
$(document).ready(function(){
$("#***YOUR BUTTON ID***").click(function(){
$(this).toggle();
$("#***YOUR LABEL ID***")).toggle();
});
});
The above sample removes the need for your ToggleDiv function entirely.

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.

Button need to be click twice to fire an event

I have a simple ASP.NET Button inside of iFrame, for strange reason i have to click it twice in order to fire an event.
<asp:Button ID="btnSaveComment" runat="server" Text="Add Comment"
CssClass="button"
OnClick="btnSaveComment_Click"
ValidationGroup="add" />
protected void btnSaveComment_Click(object sender, EventArgs e)
{
AddComment();
}
I suspect that when you initially click an area above the button you're giving focus to the iframe (that is to say, the page within it), and on the second click the mouse can interact with the button.
On the other hand, if the page seems to be posting back but not actually doing anything until the second click, then it might well be related to the page lifecycle, as suggested in an answer comments by #AndroidHustle.
Edit:
To test the theory of whether or not the frame is focused, try giving it focus via script. Something like the following might help:
<script type="text/javascript">
document.getElementById("iFrameId").focus();
</script>
I had the same problem. Here is how I solved it:
$("#MainContent_Button1").hover(function (event) {
$("#MainContent_Button1").click()
});
Now it only takes 1 click, and the button functions like it's supposed to.
<asp:Button ID="Button1" runat="server" Text="Save Payment Plan" OnClick="Button1_Click" />

Lost Focus method for asp.net textbox?

How to write Lost focus method for asp.net text method? Please anybody have any idea to write this, share with me?
So I know everyone has shown the basic client side approach, and that is fine, but I wanted to at least show a solution for handling a specific client side event on the server.
Lets take a look at the code, and go over it piece by piece.
Since ASP.Net TextBox does not expose a server side event for OnBlur, you will have to do it manually. Fortunately this is pretty easy to achieve. Suppose you have this small bit of code in your .aspx page. You want to update a Label control server side whenever the TextBox loses focus.
<asp:Label ID="lblOnBlur" runat="server">On Blur Example</asp:Label><br />
<asp:TextBox ID="tbOnBlur" runat="server" ClientIDMode="Static" /><br />
<asp:Label ID="lblOutput" runat="server" />
ASP.Net has a built in client side function that gets called to trigger postbacks that takes two parameters:
Target (the ID of the control causing the event)
Argument (optional information you would like to pass to the server)
You could just wireup the event in markup by adding the following attribute and value to your TextBox:
onblur="__doPostBack('tbOnBlur','OnBlur');"
However, the framework has an easy way to generate this script for you server side. In your Page_Init method, simply add a call to GetPostBackEventReference and assign it to the "onblur" attribute for you control like so:
protected void Page_Init(object sender, EventArgs e)
{
var onBlurScript = Page.ClientScript.GetPostBackEventReference(tbOnBlur, "OnBlur");
tbOnBlur.Attributes.Add("onblur", onBlurScript);
}
With standard server control events, the event wireup and invocation is handled automagically for you by implementing IPostBackEventHandler. That is a lot of work for a one-off solution, so lets just handle it manually by inspecting the request params.
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
var ctrlName = Request.Params[Page.postEventSourceID];
var args = Request.Params[Page.postEventArgumentID];
HandleCustomPostbackEvent(ctrlName, args);
}
}
private void HandleCustomPostbackEvent(string ctrlName, string args)
{
//Since this will get called for every postback, we only
// want to handle a specific combination of control
// and argument.
if (ctrlName == tbOnBlur.UniqueID && args == "OnBlur")
{
lblOutput.Text = "On Blur Event Handled Server Side!" + DateTime.Now;
}
}
In the end it isn't terribly difficult to simulate server side events if you don't mind digging into the framework a little.
Hope this helps!
Cheers,
Josh
If you want the server to do something after the textbox loses focus you can add AutoPostback="True" and, if you don't want the postback to reload the whole page, use an UpdatePanel:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"
OnTextChanged="TextBox1_TextChanged" />
</ContentTemplate>
</asp:UpdatePanel>
The function TextBox1_TextChanged can then do something with the text (serverside).
if (!Page.IsPostBack)
{
txtName.Attributes.Add("onblur","alert('Hello world')");
}
Why don't you use that. Lostfocus works same with:
OnTextChanged="TextBox_TextChanged"

Categories

Resources