如何为Bootstrap按钮创建Button_Click()事件?

时间:2013-12-18 14:51:01

标签: asp.net twitter-bootstrap event-handling buttonclick

Bootstrap登录表单如下:

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

单击该按钮时,我想创建与数据库的连接。所以,我需要像这样:

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();
    ...
} 

但它不像ASP.NET那样有效。如果我在设计时双击按钮,那就不会让我背后的代码。请把我放在正确的方向!

2 个答案:

答案 0 :(得分:5)

在ASP.Net中,如果要回发,则需要使用服务器控件。

大多数情况下,<form>标记位于母版页内,因此您无法轻松设置样式。

这是一个例子 -

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

答案 1 :(得分:1)

  

但它不像ASP.NET那样工作

您的代码(又名“代码隐藏”)看起来像是期望ASP.Net服务器控件,例如<asp:Button runat="server" id="foo"...所以它可以执行Postback这是ASP.NET“网络表单”的方式。

话虽如此,你可以试试

  • 将引导程序css类分配给ASP.net服务器控件,使其看起来像一个引导按钮(样式)

  • 让您现有的HTML处理正常的HTTP POST而不处理服务器控件(并处理request.form

根据适合您的选择,这是您的选择。无论哪种方式,核心概念都基于标准HTTP POST(html表单帖子,asp.net web表单“postback”)。

... H个