Was hoping someone would be able to help me. I'm basically attempting to call a method within an class using a HTML button. The reasoning behind this is because I'm intending to make it work similar to a login (and wanting it to hold sessions upon logging in), as well as keeping the current, visual effects of the button.
Upon research, there is some places basically saying you can do it, however it simply won't work for me for some reason. Where it says you can do it-
HTML Button like a ASP.NET Button
Here is my code-
<form runat="server">
<div class="input">
<asp:TextBox ID="txtUser" runat="server" type="email" placeholder="Username"></asp:TextBox>
<span><i class="fa fa-envelope-o"></i></span>
</div>
<div class="input">
<asp:TextBox ID="TextBox1" runat="server" type="password" placeholder="Password"></asp:TextBox>
<span><i class="fa fa-lock"></i></span>
</div>
</form>
<button id="button1" runat="server" onserverclick="doIt" class="submit"><i class="fa fa-long-arrow-right"></i></button>
With the C# code containing
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void doIt(object sender, EventArgs e)
{
Response.Redirect("index.html");
}
}
Am I going about this the totally wrong way? (The redirect was just there as a test for now, until I'm able to get it to run the method since it doesn't run it.)
Any help is appreciated.
Below is all my HTML code:
<form class="login">
<fieldset>
<legend class="legend">Login</legend>
<form runat="server">
<div class="input">
<asp:TextBox ID="txtUser" runat="server" type="email" placeholder="Username"></asp:TextBox>
<span><i class="fa fa-envelope-o"></i></span>
</div>
<div class="input">
<asp:TextBox ID="TextBox1" runat="server" type="password" placeholder="Password"></asp:TextBox>
<span><i class="fa fa-lock"></i></span>
</div>
<button id="button1" runat="server" onserverclick="doIt" class="submit"><i class="fa fa-long-arrow-right"></i></button>
</form>
</fieldset>
<div class="feedback">
login successful <br />
redirecting...
</div>
</form>
You have a nested form in your HTML, which is invalid markup. Remove the inner form, and add runat="server" to the form remaining. Then place your button inside the form like so:
<form class="login" runat="server">
<fieldset>
<legend class="legend">Login</legend>
<div class="input">
<asp:TextBox ID="txtUser" runat="server" type="email" placeholder="Username"></asp:TextBox>
<span><i class="fa fa-envelope-o"></i></span>
</div>
<div class="input">
<asp:TextBox ID="TextBox1" runat="server" type="password" placeholder="Password"></asp:TextBox>
<span><i class="fa fa-lock"></i></span>
</div>
<%-- place the button here --%>
<button id="button1" runat="server" onserverclick="doIt" class="submit"><i class="fa fa-long-arrow-right"></i></button>
</fieldset>
<div class="feedback">
login successful
<br />
redirecting...
</div>
</form>
Each web form - .aspx - should contain one form, and must contain runat="server" for the .cs file to manage. All server-side elements - elements with the runat="server", such as your <button> must be contained within it for the code behind to be able to point to it. If you don't, you should receive a Invalid postback or callback argument exception yellow screen of death.
Related
I have used a login-template for the page in .net application. How can I get the texts from the input text fields of the template and store it in a string variable?
<form id="form1" runat="server" role="form" method="post" class="login-form">
<div class="form-group" runat="server">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form_username" runat="server"/>
</div>
<div class="form-group" runat="server">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form_password" runat="server"/>
</div>
<button type="submit" class="btn" onclick="btn_login_Click" runat="server">LOGIN</button>
</form>
To get the Text in a TextBox you can simply do this:
private void AnyMethod()
{
string textValue = this.MyTextBox.Text;
}
You can access the raw post data with:
string exampleInput = Request.Form["<inputElementName>"];
If your input element is having the attribute 'runat="server"' you should be able to access it with
string exampleInput = <inputElementName>.Value;
If this does not work, you would need to show us a little bit more of your code/page.
Sample form:
<form id="login" runat="server">
<asp:TextBox ID="tbInput1" runat="server"
Width="75px"
TabIndex="1">
</asp:TextBox>
<asp:Button ID="btSubmit" runat="server" Text="Submit" />
</form>
Access with
tbInput1.Text
I guess ,if runat=server is there then it should directly get value using :
form_username.value.Tostring().
After doing little research on above issue got to know that ,
we can't access the login control properties directly .
if we want to access name then we have to use : User.Identity.Name
try doing this ! it might help you .
For further reference please visit below link :
https://msdn.microsoft.com/en-us/library/system.web.security.formsauthentication.redirecttologinpage.aspx
I'm working on a simple login screen with the below code:
<form id="login">
<div class="formHeader">
<h1>Login</h1>
</div>
<div class="formDiv">
<input type="text" placeholder="Email" name="txtEmail"/>
<div class="inputImage fa fa-user"></div>
</div>
<div class="formDiv">
<input type="password" placeholder="Password" name="txtPassword"/>
<div class="inputImage fa fa-lock"></div>
</div>
<div class="formDiv">
<label id="remember">
<input type="checkbox" name="cbxRemberMe" value="Checked"/>
<div class="checkbox"></div><span>Remember me</span>
</label>
</div>
<div class="formDiv">
<input type="submit" value="LOGIN" onclick="btnLogin_Click" />
</div>
<div class="formFooter"><a class="forgot" href="#">Forgot Password</a></div>
and back-end code
protected void btnLogin_Click(object sender, EventArgs e)
{
}
But the button does not call the backend code at all.
Nothing happens except the URL changes from
"http://localhost:15726/Pages/Login.aspx" to
"http://localhost:15726/Pages/Login.aspx?txtEmail=&txtPassword=&ctl00=LOGIN"
I cannot put a Runat=Server attribute in the form as I have 2 forms on this page (login and register)
any help is appreciated.
What I have tried:
Playing around with Runat=Server, onclick() and OnServerClick() (swapping around and changing them up)
Making input type=submit / input type=button
none of these work.
Have you tried these two approaches?
<asp:Button runat="server" id="btnLogin" Text="LOGIN" OnClick="btnLogin_Click">
or
< button onserverclick="btnLogin_Click" runat="server" id="btnLogin">LOGIN</button>
Edit
This was supposed to be a comment and not answer. Sorry for that.
However, the entire form doesn't seem to be "webform" form compatible. If you want to be able to read the values from the form elements the form should have a runat="server" tag, too.
Firstly, you need to specify whether it is a server control or client control. Specify runat=server to tell that it should be available for the Code-Behind file.
Finally, Use any javascript function with OnClick and any code behind function with OnServerClick
Something like this,
aspx
Plain HTML
<input type="submit" runat="server" value="LOGIN" onclick="return js_btnLogin_Click()" OnServerClick="btnLogin_Click"/>
or with ASPX Control
<asp:Button runat="server" Text="LOGIN" OnClientClick="return js_btnLogin_Click()" OnClick="btnLogin_Click">
javascript
<script type="text/javascript">
function js_btnLogin_Click()
{
//return false, in case if you want to stop posting the form to the server
return true;
}
</script>
Code-Behind
protected void btnLogin_Click(object sender, EventArgs e)
{
}
Might be a dummy question, but this issue is getting me mad.
I have a MasterPage that has the main design and of course the <form runat="server"> tag.
The page I'm currently working on has a bootstrap modal containing a text box and button. I want to get the TextBox text entered by the user in the "OnClick" event of the Button. At first button click event wasn't fired so I used Use UseSubmitBehavior="False" and the click event is fired finally. Here's the problem, the TextBox returns empty string when I try to get the text in it.
My page's html code :
<div id="dlgNewOrder" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="container">
<div class="row">
<div class="col-md-3">
<asp:TextBox runat="server" CssClass="form-control" EnableViewState="True" ID="txtQuantity" placeholder="Quantity"></asp:TextBox>
</div>
</div>
</div>
<div>
<br />
</div>
<br />
<asp:Button runat="server" ID="btnAddToCart" UseSubmitBehavior="False" Text="Add" CssClass="btn btn-info" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
And here's the code behind :
void btnAddToCart_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(txtQuantity.Text))
{
lblErrorMessage.Text = "Error";
}
else
{
lblErrorMessage.Text = "Correct";
}
}
Seems to be as issue for ASP.NET web forms UpdatePanel with the bootstrap modal.
I tried the jQuery modal and works like a charm! :s
I'm developing a web application using asp.net and bootstrap v3. On my page, there is a modal which contains two twxt boxes and an asp dropdownlist.
My problem is that the dropdownlist SelectedIndexChanged is not firing. When I put a dropdownlist outside the Modal, its SelectedIndexChanged fires without any problem.
I have set the EnableViewState="true" for the Page and the DDL. I have also set AutoPostBack = "True".
Note:
The page postback when i change the selected item in the DDL inside the modal but it don't go to the SelectedIndexChanged event as i have put a break point and it doesn't work.
I have notices also that the HTML of the DDL (Option, Select) is also that the (Selected="Selected") property is always set for the first element.
this is how I loadt the DDL
protected void Page_Load(object sender, EventArgs e)
{
if(!isPostBack)
{
DataSet ds2 = MainModule.GetTableSQLBySP(new Dictionary<string, string>(), "SP_Stand_GetSectorTypes");
ddlMdlAreaInvitedSecType.DataSource = ds2.Tables[0];
ddlMdlAreaInvitedSecType.DataValueField = "Set_ID";
ddlMdlAreaInvitedSecType.DataTextField = "Set_LongName";
ddlMdlAreaInvitedSecType.DataBind(); }
}
and this is the Modal code
<div class="modal fade" id="modalAreaInvitedSearch" style="margin-top: 155px" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Please enter product data </h4>
</div>
<div class="modal-body" style="height:auto">
<input type="text" class="form-control" placeholder="MM" style="display: none" runat="server" id="Text1" />
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Short Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedShortName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Long Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedLongName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Sector Type</label>
<div class="col-lg-8">
<asp:DropDownList EnableViewState="true" class="form-control" OnSelectedIndexChanged="ddlMdlAreaInvitedSecType_SelectedIndexChanged" AutoPostBack="true" runat="server" ID="ddlMdlAreaInvitedSecType" />
</div>
</div>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="grdMdlAreaInvitedResult" runat="server" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="Sec_Id" CssClass="table table-hover table-striped table-bordered centerGridHead">
<Columns>
<asp:TemplateField HeaderText="" ShowHeader="false" ItemStyle-Width="17%">
<ItemTemplate>
<%--<asp:LinkButton id="btnRemove" runat="server" CausesValidation="false" Text="<i aria-hidden='true' class='icon-plus'></i>" CssClass="btn btn-info btn-xs "/>--%>
<asp:CheckBox ID="chkGrdMdlAreaInvitedResult" runat="server" CssClass="btn btn-primary btn-xs " />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Sec_Id" HeaderText="Sec_Id" Visible="false" />
<asp:BoundField DataField="Sec_ShortName" HeaderText="Sector" />
<asp:BoundField DataField="Sec_LongName" HeaderText="Sector Long Name" />
<asp:BoundField DataField="Sec_Id_Master" HeaderText="Sec_Id_Master" Visible ="false" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnMdlAreaInvitedSearch" EventName="Click" />
<%-- <asp:AsyncPostBackTrigger ControlID="ddlMdlAreaInvitedSecType" EventName="SelectedIndexChanged" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-lg-12">
<asp:Button ID="btnMdlAreaInvitedClear" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Clear"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedGet" OnClientClick="clickCodeBtn()" runat="server" OnClick="btnMdlAreaInvitedGet_Click" class="btn btn-primary col-lg-2" Text="Get"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedSearch" UseSubmitBehavior="false" runat="server" OnClick="btnMdlAreaInvitedSearch_Click" class="btn btn-primary col-lg-2" Text="Search"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedClose" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Close"></asp:Button>
</div>
</div>
</div>
and this is how i open the Modal
function popAreaInvitedSearch() {
$('#modalAreaInvitedSearch').appendTo('body').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
}
any help will be appreciated.
I had a similar problem to this with Fancybox, and it turned out that when the Modal loads, it extracts the HTML and injects it into a DIV outside of the main ASP.NET Form.
To correct this in Fancybox, I overrode the Fancybox source code to inject the Modal within the form.
I'd start by inspecting the page with Firebug, and identify where the Bootrap Modal is actually located. If it is outside of the form, you will need to figure out how to get it rendered within for the ASP.NET control events to properly fire, which you perhaps can configure with the Modal javascript configuration options.
Hope that sets you on the right path.
Have you tried putting the DDL in the UpdatePanel as well? The DDL will most likely always result in a Postback now. Which is probably not desirable.
I am trying to pull values entered by a user from a C# code file using a Bootstrap modal, which is in an ASPX page.
I found that Bootstrap is not allowing two forms in one page (blocking values of another form), and as we all know, we have a master form in master page, so I can't use another form for the modal, and my modal is rendering outside of the main form.
I used this code to render my modal inside the parent form:
function showDialog(id) {
$('#paiddialog').on('show.bs.modal', function (e) {
$(this).parent().appendTo("form");
});
$('#' + id).modal("show");
}
This is the modal's HTML:
<div id="paiddialog" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<asp:UpdatePanel ID="panels" runat="server">
<ContentTemplate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update payment Information
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="form-field-1">
Select Assignment ID
</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlassignmentid" runat="server" DataTextField="iassignmentidref" AppendDataBoundItems="true" DataValueField="iassignmentid" DataSourceID="sdassignmentid" CssClass="form-control">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="btnbindassigdetails" runat="server" OnClick="btnbindassigdetails_Click" CssClass="btn btn-info">Pull info</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="btnupdate" OnClick="btnupdate_Click" runat="server" CssClass="btn btn-success large">Request Payment </asp:LinkButton>
<button aria-hidden="true" data-dismiss="modal" class="btn btn-default">
Close
</button>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The rendered HTML is some thing like this
<html>
<head></head>
<body>
<form id="mainform" action="page.aspx">
<div class="pagecontent"></div>
</form>
<div class="model fade"></div>
</html>
But still no luck.
There is an ugly hack to allow another form tag.
</form><form action="blah.aspx" id="blah">
This will get a trailing form in there for you to work with. Not recommended but a way around the 1 form tag limit of .Net
For any new readers, i managed to fix this by adding bellow script
$(this).parent().appendTo("form");