How to create Button_Click() Event for Bootstrap Button? - asp.net

Bootstrap login form is below:
<form class="form-vertical login-form" runat="server" action="~/Default.aspx">
<label class="control-label visible-ie8 visible-ie9">User Name</label>
<input class="m-wrap placeholder-no-fix" type="text" placeholder="UserName" name="username"/>
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="m-wrap placeholder-no-fix" type="password" placeholder="Password" name="password"/>
<button type="submit" class="btn green pull-right" aria-pressed="undefined">
Log In <i class="m-icon-swapright m-icon-white"></i>
</button>
</form>
When the button is clicked, I want to create the connection to the database. So, I need to have sth like this:
protected void (ButtonName)_Click(object sender, EventArgs e)
{
string connStr = "Initial Catalog=LoginCheck; Data Source=MYCOMPUTER; User id=sa; password=000000;";
SqlConnection conn = new SqlConnection(connStr);
conn.Open();
...
}
But it doesn't work like ASP.NET. If I double-click on the button when I am designing, it's not taking me to code behind. Please put me in the right direction!

In ASP.Net, you want to use Server control if you want to post back.
Most of the time, <form> tag is located inside Master Page, so you cannot style it easily.
Here is an example -
<form id="form1" runat="server">
<div class="form-vertical login-form">
<asp:Label runat="server" ID="UsernameLabel"
AssociatedControlID="UserNameTextBox"
CssClass="control-label visible-ie8 visible-ie9">User Name
</asp:Label>
<asp:TextBox runat="server" ID="UserNameTextBox"
CssClass="m-wrap placeholder-no-fix" />
<asp:Label runat="server" ID="PasswordLabel"
AssociatedControlID="PasswordTextBox"
CssClass="control-label visible-ie8 visible-ie9">Password
</asp:Label>
<asp:TextBox runat="server" ID="PasswordTextBox"
CssClass="m-wrap placeholder-no-fix" />
<asp:LinkButton runat="server" ID="SubmitLinkButton"
CssClass="btn btn-default pull-right"
OnClick="SubmitLinkButton_Click">
Log In <i class="m-icon-swapright m-icon-white"></i>
</asp:LinkButton>
</div>
</form>

But it doesn't work like ASP.NET
Your code (aka "code-behind") looks like it expects ASP.Net server controls e.g. <asp:Button runat="server" id="foo"... so it can do a Postback which is the the ASP.NET "web forms" way.
Having said that, you can try
assigning a bootstrap css class to an ASP.net server control to make it look like a bootstrap button (styling)
keep your existing HTML above handle the normal HTTP POST and not deal with server controls (and deal with request.form)
It's your choice based on what works for you. Either way the core concept is based on standard HTTP POST (html form post, asp.net web forms "postback").
Hth...

Related

Required field validator is not working

I have used a required field validator, on click of add Button error message will be displayed but whatever code written on onclick event will be executed even if the field is empty.
<div class="form-group posrel">
<asp:Label ID="Label1" runat="server" AssociatedControlID="txtDept"><i class="fa fa-pencil"></i></asp:Label>
<asp:TextBox runat="server" ID="txtDept" placeholder="Department Name" ValidationGroup="ss1"></asp:TextBox>
<div class="text-right validators">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Department Name" ControlToValidate="txtDept" ValidationGroup="ss1">
</asp:RequiredFieldValidator>
</div>
</div>
Below is the code snippet of add button -
<div class="form-group pull-right">
<asp:LinkButton runat="server" ID="lnkbtnaddept" CssClass="btn btn-primary" ValidationGroup="ss1" OnClick="lnkbtnaddept_Click">
<asp:Label runat="server" Text="Add" ID="lbladddept"></asp:Label>
<i style="margin-left: 10px;" class="fa fa-send"></i>
</asp:LinkButton>
</div>
May be this will help you out:
On link-button click event validate your page.
Page.Validate("validation group");
if(Page.isValid){
// your code logic
}
for more on page validate follow the link
https://msdn.microsoft.com/en-us/library/0ke7bxeh%28v=vs.110%29.aspx
Turn on JS support for the Validator control by adding attribute:
EnableClientScript="True"
It should prevent a post-back until text box is filled.
take your Id of RequiredFieldValidator and update on back end
or .cs page.
Ans RequiredCityName.Update();

How to send text to content page as query string from Master Page

I have a search textbox that I tried wrapping in a form element:
<form id="searchForm" method="GET" action="Search.aspx">
<input name="term" type="text" id="searchTerm" class="nav-search" size="30" />
<input type="submit" value="submit" style="display:none;"/>
</form>
I can't get it to redirect to the content page (Search.aspx) with the query string (term) from the Master Page.
I tried wrapping it in an ASP:Panel and using the DefaultButton Property but that wouldn't call the Click event in code behind.
I'm perplexed as I've searched for a solution for hours and this seems like a such common task. Thanks.
Change your code to this
<input name="term" type="text" id="searchTerm" runat="server" class="nav-search" size="30" />
<asp:Button ID="searchsubmit" OnClick="searchsubmit_Click" runat="server" Text="Search" />
in Site.Master.cs add something like this
protected void searchsubmit_Click(object sender, EventArgs e)
{
Response.Redirect("~/search.apsx?content=" + searchTerm.text);
}
This will allow to search with button click, if you want to hide it, add also panel around first code, saying that this is a button to automatically press when enter is pressed Something like this:
<asp:Panel ID="UserPanel" runat="server" DefaultButton="searchsubmit">

Client ID is not getting generated for asp.net controls

I am writing a simple webform on .net 4.0 framework.
<body>
<form id="form1" runat="server">
<div>
<span>Name</span>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</div>
<div>
<span>Email</span>
<asp:TextBox ID="txtEmail" EnableViewState="false" runat="server"></asp:TextBox>
</div>
<div>
<asp:Button ID="btnButton" runat="server" Text="Submit" />
</div>
</form>
</body>
Issue is when the form renders on browser, I am not getting ClientID for the server side controls. This is strange for me.
The portion of the markup in the browser is
<div>
<input type="submit" name="btnButton" value="Submit" id="btnButton" />
</div>
Notice there is no clientID.
Edit : Client ID something like 'ctl00$MasterPageBody$ctl00$btnButton2'
The client id of the button is btnButton. The other one "ctl..." is when you have your control inside a masterpage. As a side not: If you don´t wan´t asp.net changing your id:s you can set clientidmode='static'.
ClientID is a server side attribute.
You would see the ClientID on the client as the ID attribute:
id="btnButton"
Client id is calculated on the server, it never gets sent to the client.
You need runat="server" to generate a client ID for the control for the reasons mentioned

How do I retrieve HTML POST data for manipulation in ASP.NET WebForms?

I have the following html:
<html>
<body>
<form runat="server">
Name: <input type="text" name="name" />
<br />
<input type="submit" name="submit" />
</form>
</body>
</html>
How do I retrieve the value in the "name" textbox posted back to the webserver to manipulate in ASP.NET WebForms?
(I know about the ASP.NET built-in controls and the possibilities with them, but I am looking for a "clean" solution without the use of built-in ASP.NET controls)
If you can't, or don't want to use asp.net textboxes, then you can retrieve the name of a regular html textbox like this:
string nameTextPosted = Request.Form["name"];
Just note that textboxes created in this manner will not automatically persist their values across postbacks like asp.net textboxes will.
Simplest solution would be to turn it into a server-side component and access it by it's name. e.g.
<asp:TextBox Id="Name" runat="server"></asp:TextBox>
...
string name = Name.Text;
Unless you have other reasons not to use a component, you'd only be making things much more difficult on your part for no justification.
ASP.net includes Html server controls for backward compatibility for just someone like you fond of html. make your html tags server controls by adding the runat="server" and id properties and you are able to access them inside your server side code with their id.
<form runat="server">
Name: <input type="text" name="name" id="name" runat="server" />
<br />
<input type="submit" name="submit" id="name1" runat="server" />
</form>
Now after this you can control their behavior:
name.Value="Hellow World !"
You have to add id and runat="server" in each control. like this :
<input type="text" name="name" id="name" runat="server" />
Its better to use asp:TextBox like this :
<asp:TextBox ID="name" runat="server"></asp:TextBox>

Use asp.net button with a html form

I got a request to add this form to a asp.net control.
I want to use asp.net text box and button to submit the info to the form. (because I have special controls to match the look and feel).
this is the form:
<form name="ccoptin" id="signup" action="http://visitor.r20.constantcontact.com/d.jsp"
target="_blank" method="post">
<input type="hidden" name="llr" value="yyyyyy">
<input type="hidden" name="m" value="xxxxxx">
<input type="hidden" name="p" value="oi">
<label>sign up for new services and promotions:</label>
<input type="text"name="ea" value="" class="text" />
<input type="submit" id="iframe" class="submit"
name="go" value="submit" />
</form>
can this be done?
yes, you can use asp.net Textbox control for html input control and you can put the same styling. e.g.
<asp:TextBox ID="ea" CssClass="text" runat="server"></asp:TextBox>
Button control for html submit button e.g.
<asp:Button ID="iframe" CssClass="submit" runat="server" Text="submit" />
For your input type hidden, you can use asp.net HiddenField Control
<asp:HiddenField ID="llr" runat="server" Value="yyyyyy" />
Yes it can be done . On browser side ASP.NET controls get converted in to HTML even if you use the asp.net button.
Drag and drop asp.net button from toolbox and put attribute id , cssclass , name , text . It will get converted in end to HTML as expected
<asp:Button id="iframe" cssclass="submit"
Text="Submit" runat="server" />
Yeah. You have to consider these notes:
If you want to use ASP.NET controls, you should add runat='server' attribute to your form element. It's because ASP.NET controls (AKA server controls) while rendering check to see if they are get rendered in a server form (VerifyRenderingInServerForm method).
<asp:Hidden control is your replacement for <input type='hidden'
<asp:TextBox control is your replacement for <input type='text'
<asp:Button control is your replacement for <input type='submit'
All of your server controls should have runat='server' attribute
ASP.NET only allows for one form with runat=server, and all of your server controls have to be within a form with runat=server. Nesting forms isn't advisable.
See reference on form nesting:
https://web.archive.org/web/20170420110433/http://anderwald.info/internet/nesting-form-tags-in-xhtml/.
You'll need the form in a different document object - maybe host it in an iframe and conver the mini-form to an ASPX page that you load into the iframe ...

Resources