HTML Button Calling ASP Class?

Question

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>

Then you have something else going on because your code worked just fine for me with that change. Do you have any jQuery or JavaScript involved? — Drew Kennedy
– Drew Kennedy, Commented Jan 26, 2016 at 15:52
Added all html code. (took from a website for design but still editing. I noticed "modernizr.js" script. Removed it, but never fixed it. — Brian Elliott
– Brian Elliott, Commented Jan 26, 2016 at 15:58

Drew Kennedy · Accepted Answer · 2016-01-26 16:13:42Z

4

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.

edited Jan 26, 2016 at 16:13

answered Jan 26, 2016 at 16:02

Drew Kennedy

4,1564 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Elliott Over a year ago

Thanks. I appreciate the help (Spent hours trying to figure out what I was doing wrong!!!). Worked brilliantly!

Collectives™ on Stack Overflow

HTML Button Calling ASP Class?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related