如何将 ASP 与 Bootstrap 与动态列表结合起来答案

【问题标题】：How to combine ASP with Bootstrap with dynamic lists如何将 ASP 与 Bootstrap 与动态列表结合起来
【发布时间】：2017-09-13 14:56:35
【问题描述】：

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

例如：

<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 事件将不起作用。

是否有一个聪明的技巧可以使引导项中的动态列表与代码隐藏一起使用？

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

【问题讨论】：

标签： c# asp.net twitter-bootstrap events dynamic-list

【解决方案1】：

你可以在 asp.net 中创建皮肤，你可以给引导程序的样式。它还将有助于标准化应用程序并减少重复和一致的代码。 .skin 中的扩展名

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

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

DropDown 示例

<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;"/>

【讨论】：

嗯不完全清楚如何将其应用于我的问题，但我将研究 asp 中的皮肤。现在我正在试验 __doPostBack()。

【解决方案2】：

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

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

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

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

【讨论】：