Submit button in ASP.net - asp.net

I am new to .NET and I am trying out basic functionalities. I got an error when I placed submit button. Please go through the code and let me know if the Submit button syntax I used is wrong.
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My First web page</title>
</head>
<body>
<form id="form1" runat="server" >
<div style="position:absolute">
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br/>
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button OnClick="submit" Text="submit" runat="server" />
</div>
</form>
</body>
</html>
Error is :
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'ASP.webform1_aspx' does not contain a definition for 'submit' and no extension method 'submit' accepting a first argument of type 'ASP.webform1_aspx' could be found (are you missing a using directive or an assembly reference?)
Thank You.

You have to provide the server side OnClick handler to OnClick and probably submit is not defined as handler. This MSDN Button.OnClick documentation tell how OnClick event handler is attached with button. You also need to provide the ID to your button.
Remove the OnClick attribute from button. Open the form in VS designer Double click the button in VS designer it will generate handler for you. You can find mode in How to: Create Event Handlers in ASP.NET Web Forms Pages
After generating event handler you would have something like.
Code behind
void yourButtonId_Click(Object sender, EventArgs e)
{
}
HTML (aspx)
<asp:Button ID="yourButtonId" OnClick="yourButtonId_Click" Text="submit" runat="server" />

<script runat="server">
Sub submit(sender As Object, e As EventArgs)
lbl1.Text="Your name is " & txt1.Text
End Sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>

Related

Server side validation if Javascript disabled on user's browser

I have developed a small form with 3 input type = text and one input type = submit button. The end user fills the form and submit it, but no data inserted into backend table. (probably empty form is submitted). I get to know that Javascript is disabled on user's browser. Now i want to do server side validation. How i validate my form on server side? I need a piece of code to validate form on server side (code behinde) ? I need code in asp.net
You really should not ask for straight forward code on this forum. But either way here is a great resource for asp.net form validation: MSDN - Validating ASP.NET Server Controls
Essentially, assuming you are using C#, you might do something like this:
<%# Page Language="C#" %>
<script runat="server">
void Button1_Click(Object sender, EventArgs e) {
Label1.Text = "Page is valid!";
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:TextBox id="TextBox1"
runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
id="RequiredFieldValidator1" runat="server"
ErrorMessage="Required!"
ControlToValidate="TextBox1">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Button id="Button1" onclick="Button1_Click"
runat="server" Text="Button"></asp:Button>
</p>
<p>
<asp:Label id="Label1" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
My recommendation is to try and Google some and look for tutorials - there are pretty informative ones out there available with easy step by step directions.
Happy coding!

Button OnClick event not firing with one textbox in the form

I came across a very strange occurrence with ASP.NET onclick event in IE (other browsers doesn't seem to have this problem). When there is only one textbox field in a form, the onclick event doesn't fire when you enter text and hit Enter/Return. The event does fire when you click on the actual submit button. When there are two or more fields in the form, hitting Enter/Return works just fine.
It's very strange. Thought it was something with my IE, but checked other machines, and every one of them had the same problem.
I had setup this really simple page as a test:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
Response.Write(((Button)sender).Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="txtBox2" runat="server" ></asp:TextBox>
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click" Text="Submit" runat="server" />
</div>
</form>
</body>
</html>
When one of the textbox is removed, the btnSubmit_Click event doesn't behave as expected.
The defaultButton property of Panel or Form is used to ensure Enter Key Submission. Typically people used to Enter Key submission and if it is disabled, it might be annoying certain times.
The defaultButton really provides a way to handle Enter Keys for respective portions of the page when the focus is there.
Source: multiple submit buttons and the enter key

ASP.NET/HTML input button value on postback

According to the info in:
Which values browser collects as a postback data?
the value of the HTML input button is sent in a post back. I'm testing in ASP.NET with IE and I am not finding this to be the case.
The markup for my test case is:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server"
DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" />
<asp:Button ID="btnTest" runat="server"
Text="change" OnClientClick="doTest()" />
</asp:Panel>
</div>
</form>
The code behind is:
Partial Class Test
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = btnTest.Text
End Sub
End Class
My result is that the value of the input button is always "change" when the browser loads the page, but I was expecting it to be "new-value" after postback. The Javascript doTest() function is changing the value when the button is clicked.
Is there something more I'm supposed to do for ASP.NET or IE to get the input button value posted back? Or is the information about this functionality
wrong?
In a case like this I would probably use:
<input type="button" ID="btnTest" runat="server" onclick="doTest()" value="change" />
Note the runat="server".
While asp:button probably renders similarly, if what you really want it an HTML button input, you can use that. Yes, ASP.NET will pick up the value on the server side.
Also, do a view source and make sure the ASP.NET panel is not munging up the ID of the input. More generally, have you tested this without the asp:panel tag? I wonder if that affects anything.
I believe IE just hates input submits....
But you should also know...
ASP uses viewstate to ensure there is no tampering with server controls. The value of the submit button is stored in the view state and most likely the only way to modify the value of it is to use the ASP.NET JS API.
More commonly you see this problem with <selects> (Options added to by javascript lost in postback), but <input type="submit" /> is very similar
It's not that it's not being set, but the javascript sets the value, which gets reset back to "change" on the postback. If you're looking for a button that works with your javascript, use the client input control:
<input type="button" ID="btnTest" onclick="doTest()" />
Otherwise, if you want a server control, you should set btnTest.Text on the server side.
You are using the wrong id for the button. ASP.NET gives each control a unique id. It is made up of all the ids in the chain to your control.
Therefore your button probably has an id something like ctl00_pnlTest_btnTest. This is why your JavaScript is not setting the buttons text.
view source in your browser to see the actual ID of the control and adjust your JavaScript accordingly.
From code you can get the actual ID used in the page with the ClientID property. So you could change your JavaScript to:
var button = document.getElementById("<%= btnTest.ClientID %>");
Just tried Marc's solution like this:
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
<input type="submit" id="btnTest1" name="btnTest1" value="Submit 1" runat="server" onclick="doTest()" />
When I posted back the Load event still had Submit 1 as the value of the button. You could use a hidden field, set that value with the button in JS and post back. That does in fact work.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
var hdn = document.getElementById("hdnTextboxName");
hdn.value = button.value;
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server" DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" /><asp:HiddenField ID="hdnTextboxName" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnTest" runat="server" Text="change" OnClientClick="doTest()" ClientIDMode="Static" />
</asp:Panel>
</div>
</form>
</body>
</html>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = hdnTextboxName.Value
End Sub

ASP.net, Ajax, JavaScript help

I need help in how to set webform control proprieties in asp.net and ajax control using javascript.
I have asp page that has checkBox, TextBox, MaskedEditExtender, and RegularExpressionValidator.
I set the mask for MaskedEditExtender as Mask="(999)999-9999" and I set the ValidationExpression for RegularExpressionValidator as ValidationExpression="\d{10}".
I want to change these two properties when user checked the international checkbox to: Mask="999999999999" and as ValidationExpression="\d{12}"
Using JavaScript without interrupting with server side and when the user unchecked they get previous value so the interaction should be only in the client side.
Please help me with this and here is my code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function pageLoad() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code"
AutoPostBack="false"/>
<asp:TextBox ID="txtHomePhone" runat="server"></asp:TextBox>
<cc1:MaskedEditExtender ID="txtHomePhone_MaskedEditExtender" runat="server"
AutoComplete="False" CultureAMPMPlaceholder=""
CultureCurrencySymbolPlaceholder="" CultureDateFormat=""
CultureDatePlaceholder="" CultureDecimalPlaceholder=""
CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True"
Mask="(999)999-9999" TargetControlID="txtHomePhone">
</cc1:MaskedEditExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="RegularExpressionValidator" ControlToValidate="txtHomePhone"
ValidationExpression="\d{10}"></asp:RegularExpressionValidator>
</div>
</form>
</body>
</html>
Instead of meddling with the maskEditor/validator controls' client-side behaviour, are you OK with having 2 sets of textbox+maskExtender+validator?
Set 1 = texbox_HomePhone + maskEditExtender_HomePhone + regexValidator_HomePhone
Set 2 = texbox_IntHomePhone + maskEditExtender_IntHomePhone + regexValidator_IntHomePhone
Using the checkbox to toggle (via javascript) the display/hidding of either set.

Control scope within Repeater, with and without UpdatePanel

Why does the following give me a compilation error for line B (Label2, outside UpdatePanel) but not for line A (Label1, inside UpdatePanel)? I would have expected both lines to give an error since both controls are within the same Repeater and should therefore not be directly accessible outside the repeater, since there is no one unique instance.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = Label1.ClientID; // Line A - compiles fine
Label2.Text = Label2.ClientID; // Line B - "The name 'Label2' does not exist in the current context"
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text="Label2" />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I'm betting if you comment out line B you'll get a run-time error on execution. Label1 is going to be a null reference.
When you create controls in the ASPX page Visual Studio tries to help you out by adding the controls to the code behind in the designer file which extends the class for the page. In this case it's adding one when it shouldn't be.
Short answer is it's a bug. You should submit it but it shouldn't be a blocking issue.
Real question is why are you creating multiple update panels in a repeater ? Put one outside of the repeater and call it good. Or if you just want to refresh some text dont use an update panel, use a call back with some client side script to set the dom element. Check out this http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
Neither of those is proper anyway. You shouldn't be trying to directly reference a control that's contained within the ItemTemplate.
If you want to modify those Labels at runtime, you should be using OnItemDataBound and FindControl. To "find" the Label in the UpdatePanel, you'll need to use UpdatePanel.ContentTemplateContainer.FindControl().

Resources