How to combine ASP with Bootstrap with dynamic lists

Question

My job is to maintain an ASP site, and Bootstrap is great, but there seems to be a fundamental problem with creating a list of items from code-behind, with plain html elements to be displayed nicely with Bootstrap, and to get that list to interact with code-behind.

For example:

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

I can add <li> from code-behind, but the ul element does not have any events, so clicking on a value in the dropdown does not reach the code-behind.

Same for menus.

You can stick an

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

in the <li> elements, but not from code-behind, or the onserverclick event will not work.

Is there a smart trick to make dynamic lists in bootstrap items work with code-behind?

Hmmmmm, perhaps something with __doPostBack() ...

nikunjM · Accepted Answer · 2017-09-13 15:26:08Z

You can Create Skin in asp.net and you can give styling of bootstrap. It will also help with standardizing the application and less duplicate and consistent code. The extension in .skin

You can also create a static method for binding and be creating drop-down of bootstraps style.

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

Some example of button

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

Text box example

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

Check box

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

DropDownExample

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

Hmmm not exactly clear how to apply this to my problem, but I will study the skins in asp. For now I am experimenting with __doPostBack().

Roland Kwee · Accepted Answer · 2017-09-18 10:37:23Z

0

The easy answer is to use __doPostBack().

Coincidentally, I already mentioned this call in the example, but there my focus was on OnServerChange that you should not insert to client-side code because it should be interpreted server-side.

But __doPostBack() is interpreted client-side and will work.

The only thing is that, lacking the server-generated ClientID as a parameter to that call, you cannot have a nice callback function in code-behind, but have to handle the event in Page_Load(), but this is not very hard. Just invent a nice param string to pass to _doPostBack.

answered Sep 18, 2017 at 10:37

Roland Kwee

5,3027 gold badges59 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to combine ASP with Bootstrap with dynamic lists

2 Answers 2

Some example of button

Text box example

Check box

DropDownExample

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Some example of button

Text box example

Check box

DropDownExample

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related