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.
Related
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
I have created my first fully functional listview with custom action buttons, that worked fine when I used asp:buttons, but I need the buttons to be icons, so I tried inserting HTML tags inside, since it can't be done out of the box, I used as:linkbuttons controls to achieve the desired look.
What it does is that the buttons trigger several actions that populate controls inside update panels, and I have my own Javascript that shows a popup on click, but on the second action it currently sends a postback and page is reloaded, I googled other questions and tried everything they had, what I tried:
Adding a return false on client click
<asp:LinkButton runat="server" OnClientClick="showDialog('#popup'); return false;" CommandName="Detalles" CssClass="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</asp:LinkButton>
Using an HTML button with runat server, but Command doesn't trigger
<button runat="server" onclick="showDialog('#popup');" CommandName="Detalles" class="toolbar-button" ID="EditButton">
Editar
<span class="mif-pencil"></span>
</button>
And on jQuery, but doesn't do any difference
$('.toolbar-button').removeAttr('href');
What exactly I'm missing, my code works fine with Asp:buttons, but they can't have additional HTML :(, I'm a newbie on ASP, any hints are appreciated.
Working button that doesn't allow inside HTML
<asp:Button runat="server" Text="Detalles" CssClass="toolbar-button fg-darkCyan button-popup" ID="btn_detalles" CommandName="Detalles">
</asp:Button>
NOTE Buttons are inside a ListView control, and assigned for each item.
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
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.
I have an ASP.net page.
That has an Ajax Toolkit Tab Control.
That has tabs.
That have custom ascx controls I wrote.
I have a text box that perform a search action. It is declared like this:
<asp:TextBox ID="txtPrereqSearch" runat="server"
ontextchanged="txtPrereqSearch_TextChanged"></asp:TextBox>
Nothing fancy. This format has been working for months. There's no submit button. It just posts back when I hit enter. The problem appeared when I added a second custom control using the same type of feature. Now browsers don't postback when I type something in either of these textboxes and press enter.
It seems that browsers have a default way of handling one textbox in one form, but that behavior changes when the number reaches two.
Is there an easy way around this? I guess I can create a hidden submit button but it seems like there is probably a better way to deal with this when the functionality is in two separate custom controls.
Your feedback is appreciated!
Check this out: http://www.allasp.net/enterkey.aspx
The default behavior with no submit button seems to depend on the browser, and the behavior can indeed depend on the number of input controls.
I would add hidden "submit" button (e.g. style="display:none;") which should ensure that it always gets submitted.
The answer was a little different than I expected, but philosophically like my original idea that #jamietre reinforced.
I had to surround the controls with an <asp:Panel> tag with a DefaultButton attribute. A-like-a so:
<asp:Panel ID="ButtonPanel" runat="server" DefaultButton="btnSubmit">
<asp:Label ID="Label1" runat="server" Text="Course:"></asp:Label>
<asp:TextBox ID="txtPrereqSearch" runat="server"
ontextchanged="txtPrereqSearch_TextChanged"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="txtPrereq_TextBoxWatermarkExtender"
runat="server" Enabled="True" TargetControlID="txtPrereqSearch"
WatermarkCssClass="Watermark" WatermarkText="e.g., MATH201"></asp:TextBoxWatermarkExtender>
<asp:Button ID="btnSubmit" CssClass="InvisibleSubmit" runat="server" Text="Submit" OnClick="txtPrereqSearch_TextChanged"/>
</asp:Panel>