We Keep Coding

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

Create a customized alert box in c# asp.net

I want to create a alert box with asp controls, is it possible?
For example, a simple script alert would be like,
Response.Write("<script>alert('Alert Box');</script>");
On the alert box there are default buttons "Ok" and "Cancel" with the text "Alert Box"
Now all i want to do is call a function written in the respective Demo.aspx.cs page on the click of Ok button of alert.
Or
Is it possible to place a asp:Button control in that alert box to call that function?
Thanks if any of you could help! :)

You can't use asp:Button in JavaScript alert, The best way to make an alert or modal dialog box in asp.net is to create your own and make it hidden or in-active in master page and call it when you need it.
You can get a ready made modal or alert in GetBootstrap
Update:
Here some Idea how to use bootstrap modal.
This is how I use GetBootstrap Modal for asp.net webforms, you can use it if you want.
The following code is use to create a customize alert or modal box with proper asp.net button controls that you can use in back-end. "you can place this in master page to prevent repetitive"
<asp:Panel ID="pnlAlertBox" runat="server" style="position:absolute;top:0;> //You can make is visible or hidden -- you need to customize the style of panel
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">This is customize alertbox</h4>
</div>
<div class="modal-body">
This is the messages...
</div>
<div class="modal-footer">
<asp:Button ID="btnCancel" runat="server" CssClass="btn btn-default" Text="Cancel" />
<asp:Button ID="btnOk" runat="server" CssClass="btn btn-primary" Text="Ok" />
</div>
</div>
</div>
</asp:Panel>
But of course you need to include the getboostrap .js and .css files in master page to show the design.
Place this in header:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
Place this after form:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

This is a fixed version of Abrar Jahin's answer. Calling e.preventDefault() prevents the default action being taken, which is to submit the form.
The following displays the alert on click, and then submits the form: -
$("#alert_button").click( function(e)
{
alert('This is a custom alert box', 'Alert Dialog');
});
EDIT:
If you want to call a specific function in your webpage, you have a few options: -
A PageMethod or HttpHandler
in your client-side code, call the ASP.NET-generated __doPostback function, and pass parameters indicating what to do to your server-side code

without redirect page alert code
ScriptManager.RegisterStartupScript(this, this.GetType(), "showalert", "alert('Demo');", true);
with redirect page
ScriptManager.RegisterStartupScript(this, this.GetType(), "err_msg", "alert('Demo');window.location='Demo.aspx';", true);

You can use javascript inside OnClientClick event handler for the button
<asp:Button ID="Button1" runat="server" Text="Delete User"
OnClientClick="return confirm('Are you sure you want to delete this user?');" />

How to use a page after opening another page with target=_blank?

I can open another window to display some stuff, but then I cannot use the buttons on the original page anymore. Why is this and how to fix it? This is my code:
<asp:Button ID="Button_ViewSimpleRequest" Text="Simple Request" runat="server" OnClientClick="window.document.forms[0].target='_blank'" PostBackUrl="~/xyz.aspx" />
<asp:Button ID="Button_Self" Text="Self" runat="server" OnClientClick="window.document.forms[0].target='_self'" />
After clicking the first button, the second button also redirects to xyz.aspx. How do I make the second button behave like a normal button on the original page?

I tried: <asp:Button ID="Button_ViewSimpleRequest" Text="Simple Request" runat="server" OnClientClick="window.open('xyz.aspx', 'name')" /> which is simple, and seems to work.
I found my solution by studying How to launch another aspx web page upon button click.

Can I add HTML button triggers to update panel

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.

Add ASP.NET Element to JQuery Dialog dynamically

I am placing some ASP.NET html elements(that upload a file) inside a JQuery Dialog.
My Problem: When I click the button to upload the file, nothing happens. I create the query dialog dynamically AFTER the page has loaded. My solution is to place the HTML/ASP elements(for uploading a file) in a div at the bottom of the body of the page & set its display to none.
Then upon opening the dialog, I move the HTML/ASP elements into the JQuery dialog. But my problem is that when I click my ASP.NET button to upload the file from within the dialog, nothing happens?
Note if I click the button whilst its outside the JQuery dialog is sucessfully uploads the file.
Whats going wrong & how do I fix this? Is there an easier way to add ASP.NET code to a JQuery dialog AFTER the page has loaded?
This sits in the body
<div id="test">
<input class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
style="display: inline-block;" id="fileUpload" type="file" Runat="server"
NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked" style="display: inline;"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only"
runat="server" Text="Upload File" ></asp:button>
<asp:label id="lblMessage" runat="server" style="height:20px;width:390px;"
</asp:label>
</div>
Then on dialog open I grab the above HTML & move it into the dialog:
$(this.dialog).dialog('open' function()
{
var e = $("#test");
$(body).remove(e);
$(this).append(e);
});

jQuery UI dialog creates the dialog elements at the very end of the document, right before the closing </body> element. So when you open your dialog and move your content div#test into the dialog, it is outside the <form> and does not work anymore with asp.net which requires it.
Try to create your dialog and move it back inside the <form> element:
$("#myDialog").dialog({
...
}).parent().appendTo($("form"));