If you are working in either Microsoft Visual Studio or Microsoft Visual Web Developer, to visually add a button, drag the Button object from the Standard section of the Toolbox and drop it on the form. To manually add a button, create an <asp:Button> tag in the form. Here is an example: <%@ Page Language="C#" %> <html> <head> <title>Exercise</title> </head> <body> <form id="frmExercise" runat="server"> <asp:Button id="btnExercise" runat="server"></asp:Button> </form> </body> </html> This would produce:
At a minimum, a button should inform a web user what it is meant for. To provide this information, assign a string to the Text attribute of the tag. Here is an example: <%@ Page Language="C#" %> <html> <head> <title>Exercise</title> </head> <body> <form id="frmExercise" runat="server"> <asp:Button id="btnExercise" Text="Exercise" runat="server"></asp:Button> </form> </body> </html> This would produce:
A button is supposed to be clicked to initiate its action. When this is done, the control fires the Click event. You can implement this event which is of type EventArgs. If you create the method manually, assign the name of the method to the OnClick attribute. This can be done as follows: <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
private void ButtonWasClicked(object sender, EventArgs e)
{
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmExercise" method="post" runat="server">
<asp:Button id="btnExercise"
Text="Exercise"
OnClick="ButtonWasClicked"
runat="server"></asp:Button>
</form>
</body>
</html>
In the same way, you can add as many buttons as you want to a web page and write code for the Click event of each. Here are examples: <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
private void VerifyClicked(object sender, EventArgs e)
{
}
private void SendClicked(object sender, EventArgs e)
{
}
private void RetrieveClicked(object sender, EventArgs e)
{
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmExercise" method="post" runat="server">
<ul style="list-style-type: none;">
<li><asp:Button id="btnVerify"
Text="Verify"
OnClick="VerifyClicked"
runat="server"></asp:Button></li>
<li><asp:Button id="btnSend"
Text="Send"
OnClick="SendClicked"
runat="server"></asp:Button></li>
<li><asp:Button id="btnRetrieve"
Text="Retrieve"
OnClick="RetrieveClicked"
runat="server"></asp:Button></li>
</ul>
</form>
</body>
</html>
Normally, when a visitor clicks a button, the values are sent to the server. Sometimes, you will want some code to be processed in the browser of the web page visitor. To support this, the <asp:Button> tag is equipped with an attribute named OnClientClick. Before executing code on the client side, you must identify what code it is. In most cases, it may bee a JavaScript function you want to call. If that function is already defined, you can simply call it and assign it to this attribute. Here is an example: <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmTimeSheet" method="post" runat="server">
<asp:Button ID="btnTimeSheet"
OnClientClick="JavaScrip:window:alert('Make sure you submit your time sheet');"
Text="Time Sheet"
runat="server" />
</form>
</body>
</html>
This would produce:
If the code you want to execute is not yet defined, you can write your own function to take care of it. Here is an example: <%@ Page Language="C#" %>
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ShowMessageBox()
{
JavaScrip:window:alert('The time sheet you submited is not complete');
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmTimeSheet" method="post" runat="server">
<asp:Button ID="btnTimeSheet"
OnClientClick="ShowMessageBox()"
Text="Time Sheet"
runat="server" />
</form>
</body>
</html>
This would produce:
If you add many buttons to a web page, you can write code for the Click event of each. As an alternative, you can create a common command code that all buttons can use. To support this, the Button class is equipped with an event named Command. If you are working in either Microsoft Visual Studio or Microsoft Visual Web Developer, click a button on the form. Press and hold Ctrl, then click each of the other buttons. Release Ctrl. In the Events section of the Properties window, double-click Command and write the code for the event. If you are working manually, to start, write the code for the event. Here is an example: <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmExercise" method="post" runat="server">
<ul style="list-style-type: none;">
<li><asp:Button id="btnVerify"
Text="Verify"
runat="server"></asp:Button></li>
<li><asp:Button id="btnSend"
Text="Send"
runat="server"></asp:Button></li>
<li><asp:Button id="btnRetrieve"
Text="Retrieve"
runat="server"></asp:Button></li>
</ul>
</form>
</body>
</html>
After writing the code, you must associate the event to the buttons. To support this, the <asp:Button> tag is equipped with an attribute named OnCommand. Assign the name of the event to this attribute. Here are examples: <%@ Page Language="C#" %>
<html>
<head>
<script runat="server">
private void ButtonCommanded(object sender, CommandEventArgs e)
{
}
</script>
<title>Exercise</title>
</head>
<body>
<form id="frmExercise" method="post" runat="server">
<ul style="list-style-type: none;">
<li><asp:Button id="btnVerify"
Text="Verify"
OnCommand="ButtonCommanded"
runat="server"></asp:Button></li>
<li><asp:Button id="btnSend"
Text="Send"
OnCommand="ButtonCommanded"
runat="server"></asp:Button></li>
<li><asp:Button id="btnRetrieve"
Text="Retrieve"
OnCommand="ButtonCommanded"
runat="server"></asp:Button></li>
</ul>
</form>
</body>
</html>
|
|
|||||||||||||||||||||||
|
|
||||||||||||||||||||||||
