如何将 ASP 与 Bootstrap 与动态列表组合

Question

我的工作是维护一个 ASP 站点，Bootstrap 很棒，但是从代码隐藏创建项目列表似乎存在一个基本问题，使用普通 html 元素与 Bootstrap 一起很好地显示，并使该列表与代码隐藏交互。

例如：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        <span id="span_selectedclient" runat="server">Dropdown Example</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="ul_selectclients" runat="server"
        OnServerChange="SelectClients_Change" onchange="__doPostBack()">
    </ul>
</div>

我可以从代码隐藏添加 <li>，但是 ul 元素没有任何事件，因此单击下拉列表中的值不会到达代码隐藏。

菜单相同。

你可以贴一个

<a id="abc" runat="server" onserverclick="OnClickHandler">itemtext</a>

在 <li> 元素中，但不是来自代码隐藏，否则 onserverclick 事件将不起作用。

是否有巧妙的技巧使 bootstrap 项目中的动态列表与代码隐藏一起工作？

嗯嗯嗯，也许 __doPostBack() ...

Answer 1

您可以在 asp.net 中创建皮肤，您可以提供 bootstrap 的样式。它还将有助于标准化应用程序并减少重复和一致的代码。 .skin

中的扩展名

您还可以创建静态绑定方法并创建 bootstrap 样式的下拉菜单。

public static void FillDropDownWithoutSelect(DropDownList ddl, object Datasource, string ValueField, string TextField)
        {
            ddl.DataSource = Datasource;
            ddl.DataTextField = TextField;
            ddl.DataValueField = ValueField;
            ddl.DataBind();
        }



        public static void FillListBoxWithoutSelect(ListBox ddl, object Datasource, string ValueField, string TextField)
        {
            ddl.DataSource = Datasource;
            ddl.DataTextField = TextField;
            ddl.DataValueField = ValueField;
            ddl.DataBind();
        }

        public static void FillCheckBoxListWithoutSelect(CheckBoxList ddl, object Datasource, string ValueField, string TextField)
        {
            ddl.DataSource = Datasource;
            ddl.DataTextField = TextField;
            ddl.DataValueField = ValueField;
            ddl.DataBind();
        }

一些按钮示例

<asp:Button runat="server" CssClass="bigbutton" SkinId="bigbutton" />
<asp:Button runat="server" CssClass="AddNewButton" SkinId="addnewbutton"/>
<asp:Button runat="server" CssClass="btn btn-primary" SkinId="PrimaryButton"/>

文本框示例

<asp:TextBox SkinID="NumericTextBox" runat="server" CssClass="flatbox" BorderWidth="1" onkeydown="ForceNumericInput(this, true, true,event)" style="text-align:right"/>

复选框

<asp:CheckBox runat="server" CssClass="normalkp"/>
<asp:CheckBox runat="server" skinId="FormControl" />

下拉示例

<asp:DropDownList runat="server" CssClass="selectpicker"/>
<asp:DropDownList skinId="FormControl" runat="server" CssClass="form-control"/>
<asp:DropDownList skinId="FormControlDropDown" runat="server" CssClass="btn btn-default FormControlDropDown" style="width:100px;"/>

Answer 2

简单的答案是使用 __doPostBack()。

巧合的是，我已经在示例中提到了这个调用，但我的重点是 OnServerChange 你不应该插入客户端代码，因为它应该在服务器端被解释。

但是 __doPostBack() 是客户端解释的并且可以工作。

唯一的问题是，缺少服务器生成的 ClientID 作为该调用的参数，您无法在代码隐藏中拥有良好的回调函数，而必须在 Page_Load() 中处理事件，但是这不是很难。只需发明一个漂亮的参数字符串传递给 _doPostBack。

如何将 ASP 与 Bootstrap 与动态列表组合

How to combine ASP with Bootstrap with dynamic lists

c#

asp.net

events

dynamic-list

twitter-bootstrap

一些按钮示例

文本框示例

复选框

下拉示例