Can I add HTML button triggers to update panel - c#

Is it possible to add HTML input buttons to asp.net triggers, as I have a message box it works perfectly for a gridview which is in update panel,
but when I go to a different page of gridview, message box displays but buttons stops working, I don't know how to debug it, please help.
this is the button,
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" />
and can I add it to,
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
OR should I not ?

with runat server tag you use html controls in c# script.
i.e
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" />
should be
<input type="button" id="Button2" value="Cancel" cssclass="rightButton" runat="server" />
and the when you double click on it(assuming VS as IDE), it will make a new click event in c# snippet. Besides its good practice to use direct html tags when complex functions are not needed, it saves time to display the page, as an asp component first translates itself in the html and then goes to browser; while this approach saves time of translation.
Regards

Yes you can! to see errors ,first remove UpdatePanel from your code and then test elements without it,in this status if any error occurs will be shown, after test you can add it again.

Related

ASP.NET button generated without ID

I am stuck with an issue that puzzled me. Basically i have a custom file *.ascx that is a user control i am writing.
By now it's written as follow
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="...." %>
<div class="btn-group" role="group">
<button type="button" style="height:35px;" runat="server" onserverclick ="Delete_ServerClick" class="btn btn-danger">
<i class="bi bi-trash-fill"></i>
</button>
</div>
In the server side code i have written the following code :
protected void Delete_ServerClick(object sender, EventArgs e)
{
// ---> BREAK POINT HERE FIRST INSTRUCTION <---
//deletion logic
}
In my page i have many instances of such user control and the first thing i note is that the delete button does not have any ID, here the code as it's rendered in the browser (each instance is equal to others) :
<div class="btn-group" role="group">
<button onclick="__doPostBack('ctl00','')" type="button" style="height:35px;" class="btn btn-danger"><i class="bi bi-trash-fill"></i></button>
</div>
When i click on the button, postback is fired, page reload, but the breackpoint in the code behind does not fire. I think the issue is the fact that each button come without ID (even if i put "AutoID"), but it's not clear to me what's wrong here.
Well, be it a plain jane asp.net button, or a simple button?
In BOTH cases, you still ALWAYS BUT ALWAYS want to add a "id" to that control. There no reason to think of omitting the "id" in such cases.
So, for buttons say due to wanting bootstrap icons?
Then this:
<button id="cmdSave" runat="server" class="btn myshadow" type="button"
onserverclick="cmdSave_Click">
<span aria-hidden="true" class="glyphicon glyphicon-floppy-saved">Save</span>
</button>
<button id="cmdCancel" runat="server" class="btn myshadow" style="margin-left: 15px"
type="button"
onclick="MyClose();return false">
<span aria-hidden="true" class="glyphicon glyphicon-arrow-left">Back/Cancel</span>
</button>
<button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left: 15px"
type="button"
onserverclick="cmdDelete_ServerClick"
onclick="if (!confirm('Delete Record?')) {return false};">
<span aria-hidden="true" class="glyphicon glyphicon-trash">Delete</span>
</button>
Only real issue to note?
the standard of the client side click that returns true (or false) AGAIN works the same as a standard asp.net button. But there are 2 noteworthy differences.
Note the 2 events used:
onserverclick="cmdDelete_ServerClick"
onclick="if (!confirm('Delete Record?')) {return false};"
So, compared to a standard asp.net button you have this:
<asp:Button ID="Button1" runat="server" Text="Button"
OnClick=""
OnClientClick=""
/>
Also note that you can (with both buttons) always generate the click event code stub by simple typing in
OnClick= (for asp.net button)
or
onserverclick= (for button)
In both cases, then intel-sense will kick in, and "offer" to create the code stub. (but in both cases, we ALWAYS assume a "id" for the control has be set/used/created like always.
So you get this effect:
the next REALLY BIG important FYI?
While for a asp.net button, as noted, above also works, and as noted, you ALSO have both events. However, for the asp.net button, you can say go:
<asp:Button ID="Button2" runat="server" Text="Button"
OnClick="Button2_Click"
OnClientClick="return confirm('really delete');"
/>
So, if you don't hit ok to confirm, then the server side code stub will not run.
However, WHEN you use the "non" asp button, then BOTH the client side and server side code "generated" behind the scenes is COMBINED!!!!
That means, if the "client" side js code you put in the onclick event "exists", then the server side click code will NEVER run.
So, you have to re-write the above simple "return false" like this:
onclick="if (!confirm('Delete Record?')) {return false};"
So, if you don't return false, think of that "js" expression as having to continue for the 2nd part of the button (the server side click event) to run.
However, if you not using the true/false ability of js to "control" or determine if the server side click runs, then the above does not apply to you.
And if you say drop a button (either kind) into a grid view, repeater etc.?
Then you are Still 100% free to add the click events using the above intel-sense, and in fact for buttons dropped into a grid, you can't double click on the button in the designers to generate the click stub for code behind, and thus you HAVE to use the above "mark-up" example and let inte-sense pop up that context menu and choose "create new event"/
So, your buttons? Yes, they can work, really work much the same as a asp.net button, but in all cases, such buttons need a "id". In fact, even without any server side code, the JavaScript standard is that any such controls should have a "id" assigned to them. The designer does not add the "id" for you, but in most cases one will change/edit the "id" to something more meaningful then the default, and thus in both cases, you tend to wind up having to type in that id by hand anyway.
More FYI:
While the above buttons above look like this:
Do be careful, since due to a lawsuit and ownership issue in regards to those glyph icons?
Versions after bootstrap 4 don't include the glyph icons, and thus you have to grab a set from some place else, or consider say fontawsome, or some such.
In other words, if you decide to "update" your bootstrap version, you find all of a sudden, those icons and the "classes" that define them are no longer included in newer versions of bootstrap.
One more FYI:
i strong but VERY strong suggest that you adopt the habit of adding type="button" when using the standard button. While in "most" cases, they work, and work the SAME as a asp.net button?
in some cases, I think update panels, and other cases? if you do NOT add the type="button", they don't fire the server side code. I don't know the details as to when/why/where/how/what causes this, but it is a wide spread reported issue. So, do keep this in mind.
So, those buttons I posted above?
Note how I added type="button" to them.
As noted, in most cases they just work, but often they might not, so, wrap a string around your finger for this issue - I often attempted to debug a page, only to realize the issue was leaving out the type="button".
Other this the above issue (of using js code to conditional control the post-back, and type="button", both button choices from what I can tell work the same anyway (assuming the runat="server" tag).
So, typing in markup (and there is no button control to drag from the tool box?). They are not generated buttons, but are in fact markup typed by YOU, and thus you need to add/have/use a "ID" for such controls, and you should adopt this for most non asp.net controls (not just buttons), let alone the built in controls.

C# code behind for Button Click Event, ASP.NET

I'm working with HTML provided by coworker in .aspx and I need to program in .aspx.cs(C#) the functionality of the button he created using HTML.
The code I'm dealing with is as follows:
<div>
<button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Ship</button>
<button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Rate</button>
</div>
I'm new to HTML but in looking at solutions to similar questions I often see the HTML code for a functional button looking more like
<button type="submit" runat="server" id="btnLogin" class="button" onclick="btnLogin_Click();">
and sometimes with an
<asp:
at the beginning. I've tried simply adding the runat and onclick fields to the HTML that correspond with a C# method in the aspx.cs code behind but I haven't been able to make the button click actually trigger the method in the code behind. I've assumed that if I add the method with the name that follows onclick to the C# aspx.cs code then it would simply execute this upon the clicking of the button but I'm clearly mistaken.
Can I program the button's functionality in the code behind without changing the HTML provided to me? Or must I alter the HTML first and if so how?
You could probably get away with adding the runat="server" attribute to your buttons but I've never tried it and frankly, using proper web controls would be the best way to go.
Replacing them shouldn't change the look and feel of the page at all. Just add CssClass="xxx" to apply the css if there is any, otherwise they render to standard html elements anyway.
Your markup should look something like this:
<asp:Button runat="server" id="btnLogin" Text="Log In" OnClick="btnLogin_Click" />
The matching event handler in your code would look like this:
protected void btnLogin_Click(object sender, EventArgs e)
{
// Here's where you do stuff.
}
you need to replace the
onclick="btnLogin_Click();"
with
onclick="btnLogin_Click"
because the onClick property of asp.net buttons need to contain the name of the function it calls in the aspx.cs file and not the actual call.
<button type="submit" runat="server" id="btnLogin" onserverClick="btnLogin_Click1">login </button>
just replace the onClick with onserverClick
My suggestion would be to change the HTML control to <asp:Button /> and have the event handler wired up by ASP.NET. Syntax would look something like below
<asp:Button ID="Test" runat="server" Text="Button" OnClick="Test_Click" />
There are ways to reach asp.net code behind handler from html controls. You could try adding onserverclick handler or you could do a postback with arguments and add handler to the postback in contructor.
Few links to help you with it:
https://forums.asp.net/t/1650304.aspx?Calling+code+behind+function+from+a+html+button
calling server side event from html button control
If you are using a tool like Visual Studio/Express bring up the page in question (the aspx page).
From the controls toolbar drag a button over to the page.
If you double click the button in design view it will automatically create the event handler in code behind.
The button control has a couple of properties OnClick and OnClientClick. Use OnClientClick to trigger any JavaScript on the page.
Hope it helps

HTML tag:label with onclick asp.net method.

I have this form:
<form id="form21" runat="server" method="post" onsubmit="return send()">
<asp:Button runat="server" ID="submit" name="submit" type="submit" class="btn btn-send" Text="עדכן" onclick="submit_Click" />
<label ID="other" name="other" runat="server" class="btn btn-send" onclick="other_Click" Visible="False">נהל משתמש אחר</label>
</form>
When I click on the label this error occur: "JavaScript runtime error: 'other_Click' is undefined".
How can I combine between asp.net method and HTML tag?
From server perspective, this:
<label ID="other" name="other" runat="server" ...
is an instance of HtmlGenericControl class. This class and most of its subclasses does not have server-side click event. So the onclick you defined is not treated as server-side subscription and therefore rendered into the HTML as is. So on the final page is this just a JavaScript function call. And since you do not have such function on the client side, you get the error.
To resolve it you might want to switch to some sever-side control which has serve-side Click event. For example LinkButton, though it will require some css to look like label. Other option is to generate postback yourself on the client, but this is a bit unusual path.
you should define what do you want to do, the click is for show or execute one task or do you want execute to the server side..
For execute one task with the click and not call to the server, you should define the function javascript and call
For execute call to the server with the event click , you should use wcf ajax for call the server..
or maybe this can help you
http://www.morgantechspace.com/2014/01/Call-Server-Side-function-from-JavaScript-in-ASP-NET.html

Relay click to Button to trigger ASP.NET File Upload

In a ASP.NET C# website I have an input that uploads a file to my server. To overcome the issue of not being able to style an input of the type=file I have created a styled div that looks like the input but actually just relays the message to the actual input which has display: none to be invisible.
My Problem: Relaying the message isn't working, ie, when I relay the click message to the actual input the file is never uploaded(nothing happens). I know the button works because if I click the actual input it uploads the file sucessfully.
Is there some ASP.NET security stopping me from being able to do this? Whats going wrong? How can I acheive what I am trying to do:
Have a style input where type=file(not a boring browse button) & relay the click to the actual input?
My actual input which works:
<input id="fileUpload" type="file" Runat="server" NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked"
runat="server" Text="Upload File"></asp:button>
<asp:label id="lblMessage" runat="server"></asp:label>
My styled button:
<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>
Not sure what your aiming at but this should work
<a onclick="$('<%= btnSave.ClientID %>').click(); return false;"
href="#">test</a>
Why? Because by default, asp.net gives controls its own id, which is defined by ClientIdMode. See also System.Web.UI.Control.ClientID
In my humble opinion, this would be a neater solution:
<a id="btnRelay" href="#">test</a>
Hook it up with JQuery separately, so your code isn't mangled with your html.
$('btnRelay').click(function(event){
event.preventDefault();
$('<%= btnSave.ClientID %>').click()
}

Form GET in ASP.NET

I'm trying to convert a classic ASP page to ASP.NET 3.5.
On the page, there is a small form to submit your e-mail address to an external newsletter site. Here's the code:
<form name="emailForm" action="http://www.site.com/emailsignup.aspx" method="get">
<input type="text" name="email" />
<input type="submit" id="btnSubmit" name="btnSubmit" />
</form>
I was hoping I'd just be able to drop this on the page and it would work, but it doesn't, it just reloads the page.
How am I supposed to do this? Does it need to be done in the code behind of the button's click event?
In ASP.Net, by default controls - like the button - that cause postbacks will submit the page back to itself EVEN if you set the action attribute on the page to another file. What you want is called Cross-Page Posting. The following MSDN pages shows you how to do this with ASP.Net 4, but there is a link at the top to get to older versions:
http://msdn.microsoft.com/en-us/library/ms178140.aspx
http://msdn.microsoft.com/en-us/library/ms178139.aspx
Otherwise you can just use the Button's Click Event Handler in the code behind.
Hope this helps.
you must be missing runat="server" in the form tag
try to create a page through the IDE and paste the code for input tags between the form tags
<input type="text" name="email" />
<input type="submit" id="btnSubmit" name="btnSubmit" />
It surely is ending nested in the form aspx get by default.
Depending on the layout of your page, you can modify it so you don't end with a nested form. If that's not possible, I think you can't get around to use a form, so instead you'll have to look at a different solution like building the get with js.
The easiest way would be to put that <form> tag outside the main <form runat="server"> tag that usually wraps all ASP.NET controls.
If you're using a master page and the only content placeholder you can use is within that <form runat="server" tag, or you need this form tag in the page structure within the main <form runat="server"> tag then you need to:
Take out the simple <form> tag but leave the HTML <input> tags. Handle the client onclick event (the JavaScript versions, not ASP.NET postback handlers) of the submit button. That handler should grab the e-mail from the text box and issue something like window.location = 'http://www.site.com/emailsignup.aspx?email=....' in Javascript. Make sure to cancel the default HTML button action handler so it doesn't bubble up and submit the ASP.NET form too.

Categories