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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20661282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:31:01  来源:igfitidea点击:

How to create Button_Click() Event for Bootstrap Button?

asp.nettwitter-bootstrapevent-handlingbuttonclick

提问by Jude

Bootstrap login form is below:

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>

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!

但它不像 ASP.NET 那样工作。如果我在设计时双击按钮,它不会带我去编码。请把我放在正确的方向!

回答by Win

In ASP.Net, you want to use Server control if you want to post back.

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

Most of the time, <form>tag is located inside Master Page, so you cannot style it easily.

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

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>

回答by EdSF

But it doesn't work like ASP.NET

但它不像 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 Postbackwhich is the the ASP.NET "web forms" way.

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

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 POSTand not deal with server controls (and deal with request.form)

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

  • 保持上面现有的 HTML 处理正常HTTP POST而不处理服务器控件(和处理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").

这是您根据适合您的方式做出的选择。无论哪种方式,核心概念都基于标准 HTTP POST(html 表单发布,asp.net Web 表单“回发”)。

Hth...

嗯...