How to create Button_Click() Event for Bootstrap Button?

Question

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!

Win · Accepted Answer · 2013-12-18 15:19:13Z

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>

EdSF · Accepted Answer · 2013-12-18 15:05:58Z

1

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...

answered Dec 18, 2013 at 15:05

EdSF

12.5k6 gold badges45 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to create Button_Click() Event for Bootstrap Button?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related